-
让品牌有温度、有情感
专注品牌策划15年
ui设计怎么做（ui设计怎么做成app）
发布时间：2023-04-25 02:28:37
稿源：
创意岭 阅读：
1279
大家好！今天让创意岭的小编来大家介绍下关于ui设计怎么做的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
创意岭作为行业内优秀企业，服务客户遍布全国，相关业务请拨打175-8598-2043，或微信：1454722008
本文目录:
一、UI设计工作流程是怎样的?
设计前：设计前的准备也是很有必要的，很多设计师都是直接开始进行设计，殊不知这样做会给后续工作埋下无数的坑，比如：反复修改设计稿、需求方临时增加几个页面、设计交付延期、效果不如预期等情况，这样一来反而使得整个项目节奏慢下来，背离初衷。去了解业务，拉上需求方请他讲讲项目背景、业务目标、用户人群、竞品分析以及跟现有业务的关联等，这样做的好处非常多。一方面能通过需求方的讲述了解最真实的需求和产品目标，便于后续设计中的决策;另一方面我们可以反向要求需求方把业务目标梳理得更加透彻，避免在大方向上出现差错。
设计中：我们需要先对交互原型进行不断的打磨，确保交互层面的体验优雅且符合用户使用习惯。如果团队里配备了交互设计师，可以与交互同学做一些讨论，敲定原型后与需求方再次进行确认，对齐各方意见。敲定原型后，就可以确定风格了，风格通常没有明确的规定，只要风格定义有依据加上平时对当下流行趋势的关注，风格定调基本上不会有太大问题，也可以根据设计前准备的一些机会点做针对性的设计，比如：插画、质感、细节、动效等。
设计后：一般设计师设计完成后，设计评审会对设计师的作品进行评价，设计评审通过后，除了输出设计内容和对设计文件进行整理归档外，后面还要做的事情基本上就是推进设计落地与设计验证了。设计落地环节设计师的参与非常重要，前面所有的工作是以上线的效果为标准，所以为了让我们的付出不打折扣，需要在设计验收时细致坚持，确保设计效果完美落地。除了督促开发同学们进行调整，将设计细节标注得更加清晰，复杂的交互输出一份动画 demo，更能帮助开发同学准确理解设计意图。
二、如何做一个优秀的UI设计师呢？
一、两道思维
很多 UI 拿到一个页面原型的时候，就立马打开各大设计网站找参考，然后照着参考页面上的效果，生搬硬套到原型上，这只是达到了单纯美化页面的效果。
那么拿到原型后应该带着怎样的思维来进行思考呢？
第一道思维：交互思维
先了解页面实现什么功能，功能的交互操作流程是怎样的，也就是说用户操作这个页面上的功能时，用户的行为路径是怎样的。
第二道思维：视觉思维
了解完功能、交互后，提取原型中视觉组成元素，细分归类，每一类应用统一性原则进行设计。
然后交互与视觉一同结合来设计界面。
二、思维应用
结合案例我们来看下两道思维是如何进行的。
第一道思维：交互思维
了解功能交互流程。
根据实例原型分析出用户行为路径：
用户行为路径：
注意点：
用户行为路径的获取，一定要跟产品经理、交互设计师进行沟通确认清楚。
用户行为路径某些步骤中，也有先后之分，比如第1步中，用户输入了账户地址后，才会有账户的相关数据显示。
用户行为路径可以支撑信息内容进行归类分组。
第二道思维：视觉思维
提取视觉组成元素。
视觉元素：
注意点：
提取视觉组件元素尽量详细归类。
如有视觉规范，视觉组件元素风格应用请遵循视觉规范。
如无视觉规范，同类视觉组件元素应用统一性原则进行设计。
三、检验方案
我们带着两道思维来检验一下这位设计师输出的方案：
问题1：交互层级
问题所在：
数据显示在前，输入在后，交互操作层级有点混乱。
问题截图：
问题解决：
用户行为路径中，第1步有个先后顺序，先输入地址，后显示数据，在进行信息内容布局设计的时候同样需要有先后顺序，所以交互操作层级一定程度上影响着布局排版。
问题2：步骤关联
问题所在：
「批量转账」按钮归类到了第1步的信息模块中，交互操作逻辑有点不通畅。
问题截图：
解决方案：
用户行为路径中，用户核心费用信息后，最有可能的行为就是点击「批量转账」按钮，所以「批量转账」按钮与转账费用信息的操作关联性比较大，应该在同一模块里会更符合交互操作逻辑。
问题3：颜色应用
问题所在：
主色、点缀色、辅助色各自的应用范围没有规则，颜色应用混乱。
问题截图：
问题解决：
一个页面或者项目中，各种颜色的应用范围需要有一定规范，文字使用什么颜色、按钮使用什么颜色、输入组件使用什么颜色、背景使用什么颜色都需要有对应的使用规则。
问题4：输入控件
问题所在：
输入类组件样式存在多样性，同样是输入框，有多种样式，会造成用户交互操作上的认知有误。
问题截图：
问题解决：
一个页面或者项目中，输入类组件样式应用统一性原则，保持视觉风格一致，从而减少用户操作认知偏差。
问题5：按钮样式
问题所在：
按钮样式应用到不具备按钮点击属性的对象上，用户会认为也是可点击，会造成用户交互操作上的认知有误。
问题截图：
问题解决：
一个页面或者项目中，不具备按钮点击属性的元素尽量不要套用按钮样式，减少用户操作认知偏差。
举个例子：人形的稻草套上人的衣服，成功了欺骗了人们，造成了认知偏差。
问题6：信息展示
问题所在：
同类信息内容的展示存在多样式，传达过程中加重了用户的认知负担。
问题截图：
问题解决：
一个页面或者项目中，同类信息内容的展示应用相似性原则保持视觉风格一致，因为相似性的布局可以更加高效地传达信息。
举个例子：电商页面，金额信息展示；理财页面，收益信息的展示；都是应用相似性的布局，即统一又高效地传达信息。
问题7：图标风格
问题所在：
图标风格不一致，图形反白风格，立体风格，线性风格。
问题截图：
问题解决：
根据产品的特性，建议统一的图标风格，选择线性、面性、渐变、立体等风格。
问题八：对齐间隔
问题所在：
页面元素的对齐、间隔没有规律，整体视觉显得松散，不严谨。
问题截图：
问题解决：
可以利用栅格系统，把页面信息内容规整起来。
四、优化方案
根据发现的问题，我们来看一下优化后的设计方案：
优化1：交互路径
根据用户行为路径，将相关联的信息归类到一个模块，每个步骤划分到一个模块，相关联的步骤合并到一个模块，模块内完成各自的操作展示任务，模块之间信息内容互不干扰，但从结构布局又能够形成符合交互操作逻辑。
优化2：颜色规范
规范颜色，配色的方法在这里不做深入讨论，这里方法的是基于品牌色通过饱和度、亮度、透明度的变化来得出文字各层级的颜色、边框的颜色。
优化3：输入控件
对输入类控件的样式进行了统一，让用户从视觉上就能够清楚地分辨出哪些是可以进行输入操作的，从而减少用户对交互操作上的认知成本，提高信息输入效率。
输入控件进行交互时，要有交互状态反馈，默认状态、选中状态、错误状态。视情况而定，可以增加鼠标移上状态和不可输入状态。
状态变化时的颜色应用，可以通过变换色相的透明度来保持色彩的一致性。
优化4：按钮规范
对按钮进行了分类，分为常规按钮、图标按钮、文字按钮；对按钮样式用颜色进行了统一；按钮要有交互状态反馈，不可点击状态、可点击状态、鼠标移上状态、鼠标按下。
状态变化时的颜色应用，可以通过变换色相的饱和度、亮度、透明度来保持色彩的一致性。
优化5：信息展示
对信息内容应用相似性原则进行了排版的统一处理，每个小类信息的标题与内容采用统一排版格式，然后重复应用，有助于提高信息获取效率。
优化6：图标风格
这里的图标应用于功能性图标，统一采用线性圆角风格。功能性图标需要注意图标的形状要能够正确有效地传达出功能的含义。
优化7：对齐间隔
应用栅格系统对视觉元素之间的对齐、间隔进行调整，使页面视觉更加严谨，页面信息更容易阅读。
五、总结
交互思维
了解页面中的功能交互流程，梳理用户操作行为路径，可以对行为步骤中的信息内容进行归类分组提供依据，最终有助于页面信息内容的排版布局。
视觉思维
提取视觉组成元素，对颜色、文字、控件、图标等每一类应用统一性原则进行规范设计，再通过视觉元素本身相互组合，最终应用回信息内容上，建立规范的视觉感。
设计一个页面，交互思维和视觉思维是互相配合的，缺一不可，最终都是为了共同去构造符合交互操作逻辑、满足视觉美感的界面。
三、ui设计整个过程一般分为哪些步骤？
1. Storyboard 故事版：
主要负责人：产品经理或交互设计师
最早大家开始讨论用户体验流程，在白板上边画流程边添加粗略的UI元素。会后交互设计师会在在纸上做手绘版线框图。这阶段产品经理、交互设计师、UI设计师、包括技术工程师会一同作大量的讨论，而且主要讨论的是流程和主要功能，因此手画故事版最快最方便并易于修改的。
此环节要敲定userflow，用户流程及其中的关键步骤，每一步骤都是一个主要界面。
*白板上一般都是这样，交互设计同学会在纸上重绘。
<img src="https://pic4.zhimg.com/5b5007aa23668ae60f26e87b5e807453_b.jpg" data-rawwidth="360" data-rawheight="240" class="content_image" width="360"/>
*移动产品设计这样做也行，不买专用的模板本和工具尺，自己打印也行。
<img src="https://pic3.zhimg.com/e0816d618c789316adbd90e091f7cebe_b.jpg" data-rawwidth="400" data-rawheight="300" class="content_image" width="400"/>
2. Key wireframe 关键界面线框图
主要负责人：交互设计师
在确定的用户流程中，选出几个关键的，有代表性的步骤，做细化的wireframe线框图。线框图里要确保每一个UI元素的设计，包括其大小和位置。我们做的线框图是1:1的，也就是线框图与实际界面尺寸一致。1:1的线框图能在前期避免考虑不周和执行困难等很多问题的出现。
此环节要确定关键界面里的UI元素和布局，以及全局的布局排版风格。
*线框图做成1:1最好。输出到文档里要添加说明。在后面的工作里，这份文档可以让UI设计同学和工程师同学共用。
<img src="https://pic2.zhimg.com/ed48f0c692a530b4bb5903f50c7ef2f5_b.jpg" data-rawwidth="439" data-rawheight="280" class="origin_image zh-lightbox-thumb" width="439" data-original="https://pic2.zhimg.com/ed48f0c692a530b4bb5903f50c7ef2f5_r.jpg"/>
3. Key visual design 关键界面视觉设计
主要负责人：UI设计师
此环节交互设计师会按确定的用户流程及确定的布局风格来继续做其它界面的线框图。UI设计师则同时开始做关键界面的视觉设计，进行配色、样式不同风格的尝试。
此环节要确定产品界面的视觉设计风格。
4. All wireframe 全部界面线框图
主要负责人：交互设计师
此环节交互设计师要完成全部界面的线框图（1:1的）设计并且团队确认。
*做完全部的线框图，一般会出一个总结构图。如果有足够大的场地，也可以逐页打印出来贴到一面墙上。方便团队随时参考。
<img src="https://pic4.zhimg.com/9f67c96abfd05c88769252258aea0b6f_b.jpg" data-rawwidth="599" data-rawheight="371" class="origin_image zh-lightbox-thumb" width="599" data-original="https://pic4.zhimg.com/9f67c96abfd05c88769252258aea0b6f_r.jpg"/>5. Prototype 可动原型
主要负责人：交互设计师
此环节依产品需求而定。如果静态的线框图还不能完整的体现出产品特点，那就需要做成可操作甚至有关键界面动画示意的可动原型。通常是HTML的可动原型，特殊项目也曾经做过Flash的。我还有一个奇葩朋友用PPT做过（PPT的开发工具+VB Script）几乎接近成品界面的可动原型。
此环节的确认同上一步，团队的理解会更精准。
*忍不住帖一个PPT的开发工具面板，提供VS风格的控件，并且直接用VB script写控件逻辑！还可以带dummy数据！客户都以为你开发完毕了有木有。
<img src="https://pic1.zhimg.com/2c1005ec8685f2765d802a7ff759b1cc_b.jpg" data-rawwidth="596" data-rawheight="117" class="origin_image zh-lightbox-thumb" width="596" data-original="https://pic1.zhimg.com/2c1005ec8685f2765d802a7ff759b1cc_r.jpg"/>
6. UI design 全部界面视觉设计
主要负责人：UI设计师
完成全部界面的UI视觉设计。
此环节确认全部UI设计。同时把确认的UI更新到文档里。
四、懂视生活
做好手机开发中的UI设计如下：
1、主色调与辅助色的搭配。
主色调的使用会给用户留下一定的印象，所以要选择好主色调。至于配色和辅助色就是为了配合衬托产品的主色调，不同产品的辅助色运用策略也不同。我们常说的邻近色和对比色就是选择辅助色的方法。
2、整个界面风格的表达。
手机APP开发具体要采用的什么样的设计风格，还是要依据产品具体的需求等去进行选择。同样的产品信息，在UI的表达上可以有不同的表达方式，而图标的设计风格也有很多细微的差别，圆角还是直角，面还是线行，设计的语言逻辑和目的等等都需要在UI设计中去考虑。
3、情感化设计的表达。
在一些细节上需要考虑到情感化的设计，这样可以去提升手机APP设计的品质，提高用户在使用体验。而且好的设计师会在UI设计中引导用户去解决问题，从而满足用户的需求。不过情感化设计的表达方式和风格也要具体问题具体分析，并通过UI设计去进行处理。
4、动效设计和产品的适配。
动效是进行人机UI设计的一个体现，在一些跳转页面恰到好处地引用动效设计，可以提升用户体验度，为手机APP获取更多用户的好感。在设计动效的过程中，要考虑到用户使用场景和需求等细节，而不是盲目的过度使用动效，还有一点UI设计要具备可兼容性。
以上就是关于ui设计怎么做相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。
推荐阅读：
为了生活努力赚钱的励志句子（为了生活努力赚钱的励志句子简短）
赣公网安备 50019002502384号
