实例解析！如何成为有交互和视觉思维的UI 设计师？

UI 在拿到产品原型时该何思考？何着手设计界面？最近跟一设计师朋流 UI 设计方案，总结一下在方案优化的思考程，在里分享给大家。

一、两道思维

很 UI 拿到一个页面原型的时，就立马打开各大设计网站找参考，照着参考页面上的效果，生搬硬套到原型上，只是达到单纯美化页面的效果。
那么拿到原后应该带着怎样的思维来进行思考呢？

第一道思维：交互思维

先了解页面实现么功，功的交互操作流程是怎样的，就是说户操作这个页面上的功时，户的行为路径是怎样的。

第二道思维：视觉思维

了解功、交互后，取原中视觉组成元素，细分归类，每一类应统一性原则进行设计。

然后交互与视觉结合来设计界。

二、思维应用

结合案例我们来看下两思维是如何进。

第一道思维：交互思维

了解功能交互流程。

根据例原型分析出用户行为路径：

用户为路径：

注点：

• 用户行为路径的获取，一定要跟产品经理、交互设计师进沟确认楚。
• 用户行为路径某步骤中，也有先之分，比1步中，用户输账户地址，才有账户的相关数据显示。
• 用户行径可以支撑信息内行归类分组。

第二道思维：视觉思维

提取视觉组成元素。

视觉元素：

注点：

• 提取视组件元素尽量详细归类。
• 如视觉规范，视觉组件元素风格应用请遵循视觉规范。
• 如无视觉规范，同类视觉组件素应用统一性则进行计。

三、检验方案

我们带着两道思来检验一下位设计师输出的方案：

问题1：交互层级

问题在：

数据显示在前，输入在后，交互操作层级有点混乱。

问题截图：

问题解决：

用户行径中，第1先后顺序，先输入址，后显示数据，行信息内布局设的时候同样需先后顺序，所以交互操作层级一程度影响布局排版。

问题2：步骤关联

问题所在：

「批量转账」按钮归类到1步的信息模块中，互操逻辑有点不通畅。

问题截图：

解决方案：

户行为路径中，户核心信息后，最有可的行为就是点击「量转账」按钮，「量转账」按钮与转账信息的操作联性较大，应该在同一模里会更符合交互操作逻辑。

问题3：颜色应用

问题所在：

主色、点缀色、辅助色各的应用范围没有规则，颜色应用混乱。

问题截图：

问题决：

一个页面或者项目中，各种颜的应用范围需要有一定规范，文字使用什么颜、按钮使用什么颜、输组件使用什么颜、背使用什么颜需要有对应的使用规则。

问题4：输入控件

问题所在：

输入类组件样存在多样性，样是输入框，有多样，会造成用户交互操作上认知有误。

问题截图：

问题解决：

一个页面或者项目中，输入类组件式应用统一性则，保持视觉风格一致，从而减少用户操作认知偏差。

问题5：按钮样式

问题所：

按钮样式应用到不具备按钮点击属性的对象，用户会认也可点击，会造用户交互操作的认知误。

问题截图：

问题解决：

个页或者项目，不具备按钮击属性元素尽量不要套用按钮样，减少用户操作认知偏。

举个例子：人形的稻草套上人的服，成功欺骗人们，造成认偏差。

问题6：信息展示

问题所在：

类信息内容展示存在多样，传过程加了用户认知负担。

问题截图：

问题解决：

一个页面或者项目中，同类息内容的展示应用相似性则保持视觉风格一致，因为相似性的布局可以更加高效地传达息。

举个例子：电商页面，金额信息展示；财页面，收益信息的展示；都是应相似性的布，即统一又效地传达信息。

问题7：图标风格

问题所在：

图标风格不一致，图形反风格，立体风格，线性风格。

问题截图：

问题决：

根据产品的特，建议统一的图标风，选择、面、渐变、立等风。

问题八：对齐间隔

问题所在：

页元素齐、隔没有规律，体视觉显松散，不严谨。

问题截图：

问题解决：

可以利用栅格系统，把页面息内容规整起来。

四、优化方案

根据发现的问题，来一下优化后的计方案：

优化1：交互径

根据用户行径，将相关联的信息归类到一模块，每骤划分到一模块，相关联的骤合并到一模块，模块内完各自的操作展示任务，模块之间信息内互不扰，但从结构布局又能够形符合交互操作逻辑。

优化2：颜色规范

规范颜色，配色法在这里不做深入讨论，这里法是基于品色过饱和度、亮度、透明度变化来出文各层级颜色、边框颜色。

优3：输入控件

对输入类控件的样式进行了统一，户从视觉上就够清楚地分辨哪些是可进行输入操作的，从而减户对交互操作上的认知成本，信息输入效率。

输入控件进交互时，要有交互状态反馈，默认状态、选状态、误状态。视情况而定，可以增加鼠标移上状态和不可输入状态。

状态变化时的颜应用，以通变换相的透明度来持彩的一致。

优化4：按钮规范

按钮进了分类，分为常规按钮、图标按钮、文按钮；按钮样用颜色进了统；按钮要有交互状态反馈，不可击状态、可击状态、鼠标移上状态、鼠标按下。

状态变化时的颜应用，以通变换相的饱和度、亮度、透明度来持彩的一致。

优化5：信息展示

信息内容应用相似性原则进了排版统处理，个小类信息标题与内容采用统排版格，然后复应用，有助于提高信息获取效率。

优6：图标格

这里的图标应于功性图标，统一采线性圆角格。功性图标需要注意图标的形状要够正确有效地传达功的含义。

优化7：对齐间隔

应用栅格系统对视觉素之间的对齐、间隔进行调整，使页面视觉更加严谨，页面息更容易阅读。

五、总结

互思

页面中的功能互流程，梳理用户操行为路径，以对行为步骤中的信息内容进行归类分组提供依据，最终有助页面信息内容的排版局。

视思

提取视组成元素，对颜、文字、控件、图标等每一类应用统一原则进行规范设计，通视元素身相互组合，最终应用回信息内容上，建立规范的视感。

设一页面，交互思维视觉思维互相配合的，缺一不可，终都了共同去构造符合交互操作逻辑、满足视觉感的界面。

作者：k_001ayy  不断奔跑中的计

图片素材作者：JONES & CO