UI设计流程

用户头像
深圳/设计爱好者/8年前/451浏览
UI设计流程
用户头像
HuBala

结合自身做UI的经历描述UI整个设计过程是怎样

  1. UI设计,是一个产品上线运营之前的最后一次视觉把控,在收到原型图之后,我们需要做的除了考虑ICON的精致程度,配色步调的协调一致,还要考虑例如交互的优先层级,交互方式的学习成本,用户的使用习惯以及后期开发的规则制定等。

  2. 第一步,在收到低保真原型图之后,首先要做的就是分析整个页面的布局,模块与模块之间的亲密关系以及模块的优先层级。下面以我之前做过的项目为例:


  3. 通过对原型图的分析发现原型图的布局整体上是合理的,但是仔细分析之后还有几个点可以进行优化

  4. 在对原型进行分析修改之后发现页面在视觉上更加规整流畅,并且同时增加了页面的显示内容,同时交互效率也有了提升。思考的时候要从全局出发,从整体到局部,从设计者的角度考虑再从用户的角度去审核。

  5. 第一步完成之后就要考虑配色问题,这款贷款消费类APP是以年轻人为主,主色调为活力黄,配色考虑橙色,点缀色考虑蓝色。因为黄色虽然可以彰显年轻人的精神面貌,但是大面积使用黄色会显得没有厚重感,所以主色调为黄色,但是会大面积使用无色相的深灰色,主空间会使用黄色。之所以选择蓝色作为点缀色是由于主色调和配色都是暖色,所以用蓝色加以平衡。


  6. 再对配色进行分析修改之后,页面在黄色主色需求基础上,也避免了大面积使用黄色的轻浮,在进行配色时要注意灰色和彩色搭配使用,根据产品的定位来确定灰色和主色的使用面积,是的产品看起来协调统一。

  7. 第三步要开始考虑页面的控件,例如,ICON、插图、文字大小。


   8.在对控件进行填充之后,一个页面的视觉设计算基本完成,但是一个好的页面需要经过反复       的推敲和不断的尝试,每种颜色、每个图标都是具有全局意义的,如果感觉不对劲就需要继       续修改直至满意。在完成以上设计后需要增加趣味的交互方式提升产品的细节和品质感。即       时交互反馈,模拟真是物理环境,或者趣味的加载刷新动画。





2
举报
|
14
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
Security Camera UI kit
【新年UI图标】30个图标
3D卡通UI界面图标可爱插画免扣素
我的钱包-UI界面设计-app
【新年UI图标】钱包icon
新拟态风格 UI设计组件库
拟物风质感写实UI卡片合集源文件
【新年UI图标】旅行icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
新能源APP应用UIKit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】会员icon
UI 登录界面设计模板包
UI通用设计素材1
【新年UI图标】秒杀icon
【新年UI图标】体育icon
【新年UI图标】汽车icon
【新年UI图标】礼物/活动icon
手表表盘UI系列
盲盒APP UI设计
UI界面 组件
3D渐变流体抽象矢量UI背景图
高级感金属拟物 UI设计组件库
你可能喜欢
大家都在看
登录注册