如何成为有交互和视觉思维的设计师

版权申明：本文原创作者“k_001ayy”，感谢“k_001ayy”的原创经验分享！

UI 在拿到产品原型时该如何思考?如何着手设计界面?最近跟一些设计师朋友交流 UI 设计方案，总结了一下在方案优化的思考过程，在这里分享给大家。

一、两道思维

很多 UI 拿到一个页面原型的时候，就立马打开各大设计网站找参考，然后照着参考页面上的效果，生搬硬套到原型上，这只是达到了单纯美化页面的效果。

那么拿到原型后应该带着怎样的思维来进行思考呢?

第一道思维：交互思维

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

第二道思维：视觉思维

了解完功能、交互后，提取原型中视觉组成元素，细分归类，每一类应用统一性原则进行设计。

然后交互与视觉一同结合来设计界面。

二、思维应用

结合案例我们来看下两道思维是如何进行的。

第一道思维：交互思维

了解功能交互流程。

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

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

用户行为路径：

注意点：

用户行为路径的获取，一定要跟产品经理、交互设计师进行沟通确认清楚。

用户行为路径某些步骤中，也有先后之分，比如第1步中，用户输入了账户地址后，才会有账户的相关数据显示。

用户行为路径可以支撑信息内容进行归类分组。

第二道思维：视觉思维

提取视觉组成元素。

视觉元素：

注意点：

提取视觉组件元素尽量详细归类。

如有视觉规范，视觉组件元素风格应用请遵循视觉规范。

如无视觉规范，同类视觉组件元素应用统一性原则进行设计。

三、检验方案

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

问题1：交互层级

问题所在：

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

问题截图：

问题解决：

用户行为路径中，第1步有个先后顺序，先输入地址，后显示数据，在进行信息内容布局设计的时候同样需要有先后顺序，所以交互操作层级一定程度上影响着布局排版。

问题2：步骤关联

问题所在：

「批量转账」按钮归类到了第1步的信息模块中，交互操作逻辑有点不通畅。

问题截图：