1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

实例解析!如何成为有交互和视觉思维的UI 设计师?--九分网络

时间:2020-06-30   分类:设计管理    作者:网络   来源:网络整理   点击:126

实例解析!如何成为有交互和视觉思维的UI 设计师? 本文来自九分网络

www.9fen.net

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

本文来自九分网络

一、两道思维

很多 UI 拿到一个页面原型的时候,就立马打开各大设计网站找参考,然后照着参考页面上的效果,生搬硬套到原型上,这只是达到了单纯美化页面的效果。
那么拿到原型后应该带着怎样的思维来进行思考呢?

本文来自九分网络

第一道思维:交互思维 本文来自九分网络

先了解页面实现什么功能,功能的交互操作流程是怎样的,也就是说用户操作这个页面上的功能时,用户的行为路径是怎样的。 本文来自九分网络

第二道思维:视觉思维 copyright 9fen.net

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

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

www.9fen.net

二、思维应用

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

第一道思维:交互思维

了解功能交互流程。

内容采集来自9fen.net

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

copyright 9fen.net

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

九分网络

本文来自九分网络

用户行为路径: copyright 9fen.net

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

本文来自九分网络

www.9fen.net

注意点:

九分网络

第二道思维:视觉思维

提取视觉组成元素。

copyright 9fen.net

视觉元素:

九分网络

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

本文来自九分网络

copyright 9fen.net

注意点:

本文来自九分网络

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

本文来自九分网络

如有视觉规范,视觉组件元素风格应用请遵循视觉规范。 www.9fen.net

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

www.9fen.net

三、检验方案

我们带着两道思维来检验一下这位设计师输出的方案: 九分网络

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

本文来自九分网络

www.9fen.net

问题1:交互层级

问题所在:

内容采集来自9fen.net

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

九分网络

问题截图: 九分网络

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

copyright 9fen.net

copyright 9fen.net

问题解决:

内容采集来自9fen.net

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

内容采集来自9fen.net

问题2:步骤关联

问题所在:

九分网络

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

九分网络

问题截图: www.9fen.net

实例解析!如何成为有交互和视觉思维的UI 设计师? 九分网络

内容采集来自9fen.net

解决方案: copyright 9fen.net

用户行为路径中,用户核心费用信息后,最有可能的行为就是点击「批量转账」按钮,所以「批量转账」按钮与转账费用信息的操作关联性比较大,应该在同一模块里会更符合交互操作逻辑。

copyright 9fen.net

问题3:颜色应用

问题所在: 本文来自九分网络

主色、点缀色、辅助色各自的应用范围没有规则,颜色应用混乱。 本文来自九分网络

问题截图:

www.9fen.net

实例解析!如何成为有交互和视觉思维的UI 设计师? 内容采集来自9fen.net

www.9fen.net

问题解决:

本文来自九分网络

一个页面或者项目中,各种颜色的应用范围需要有一定规范,文字使用什么颜色、按钮使用什么颜色、输入组件使用什么颜色、背景使用什么颜色都需要有对应的使用规则。 copyright 9fen.net

问题4:输入控件

问题所在: 九分网络

输入类组件样式存在多样性,同样是输入框,有多种样式,会造成用户交互操作上的认知有误。

www.9fen.net

问题截图: copyright 9fen.net

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

内容采集来自9fen.net

内容采集来自9fen.net

问题解决:

copyright 9fen.net

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

内容采集来自9fen.net

问题5:按钮样式

问题所在:

九分网络

按钮样式应用到不具备按钮点击属性的对象上,用户会认为也是可点击,会造成用户交互操作上的认知有误。

九分网络

问题截图: 内容采集来自9fen.net

标签: 实战案例 交互设计 视觉设计 经验分享 设计规范 UI设计师

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----