来源:优设 作者:k_001ayy
UI 在拿到产品原型时该如何思考?如何着手设计界面?最近跟一些设计师朋友交流 UI 设计方案，总结了一下在方案优化的思考过程，在这里分享给大家。
一、两道思维
很多 UI 拿到一个页面原型的时候，就立马打开各大设计网站找参考，然后照着参考页面上的效果，生搬硬套到原型上，这只是达到了单纯美化页面的效果。
那么拿到原型后应该带着怎样的思维来进行思考呢?
第一道思维：交互思维
先了解页面实现什么功能，功能的交互操作流程是怎样的，也就是说用户操作这个页面上的功能时，用户的行为路径是怎样的。
第二道思维：视觉思维
了解完功能、交互后，提取原型中视觉组成元素，细分归类，每一类应用统一性原则进行设计。
然后交互与视觉一同结合来设计界面。
二、思维应用
结合案例我们来看下两道思维是如何进行的。
第一道思维：交互思维
了解功能交互流程。
根据实例原型分析出用户行为路径：
用户行为路径：
注意点：
用户行为路径的获取，一定要跟产品经理、交互设计师进行沟通确认清楚。
用户行为路径某些步骤中，也有先后之分，比如第1步中，用户输入了账户地址后，才会有账户的相关数据显示。
用户行为路径可以支撑信息内容进行归类分组。
第二道思维：视觉思维
提取视觉组成元素。
视觉元素：
注意点：
提取视觉组件元素尽量详细归类。
如有视觉规范，视觉组件元素风格应用请遵循视觉规范。
如无视觉规范，同类视觉组件元素应用统一性原则进行设计。
三、检验方案
我们带着两道思维来检验一下这位设计师输出的方案：
问题1：交互层级
问题所在：
数据显示在前，输入在后，交互操作层级有点混乱。
问题截图：
问题解决：
用户行为路径中，第1步有个先后顺序，先输入地址，后显示数据，在进行信息内容布局设计的时候同样需要有先后顺序，所以交互操作层级一定程度上影响着布局排版。
问题2：步骤关联
问题所在：
「批量转账」按钮归类到了第1步的信息模块中，交互操作逻辑有点不通畅。
问题截图：
解决方案：
用户行为路径中，用户核心费用信息后，最有可能的行为就是点击「批量转账」按钮，所以「批量转账」按钮与转账费用信息的操作关联性比较大，应该在同一模块里会更符合交互操作逻辑。
问题3：颜色应用
问题所在：
主色、点缀色、辅助色各自的应用范围没有规则，颜色应用混乱。
问题截图：
问题解决：
一个页面或者项目中，各种颜色的应用范围需要有一定规范，文字使用什么颜色、按钮使用什么颜色、输入组件使用什么颜色、背景使用什么颜色都需要有对应的使用规则。
问题4：输入控件
问题所在：
输入类组件样式存在多样性，同样是输入框，有多种样式，会造成用户交互操作上的认知有误。
问题截图：
问题解决：
一个页面或者项目中，输入类组件样式应用统一性原则，保持视觉风格一致，从而减少用户操作认知偏差。
问题5：按钮样式
问题所在：
按钮样式应用到不具备按钮点击属性的对象上，用户会认为也是可点击，会造成用户交互操作上的认知有误。
问题截图：
问题解决：
一个页面或者项目中，不具备按钮点击属性的元素尽量不要套用按钮样式，减少用户操作认知偏差。
举个例子：人形的稻草套上人的衣服，成功了欺骗了人们，造成了认知偏差。
问题6：信息展示
问题所在：
同类信息内容的展示存在多样式，传达过程中加重了用户的认知负担。
问题截图：
问题解决：
一个页面或者项目中，同类信息内容的展示应用相似性原则保持视觉风格一致，因为相似性的布局可以更加高效地传达信息。
举个例子：电商页面，金额信息展示;理财页面，收益信息的展示;都是应用相似性的布局，即统一又高效地传达信息。
