7步教你做好UI设计工作

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
6099 4 46 2018-01-17


设计师的专业能力重要,职场习惯更重要~


Image title


什么是UI

UI即User Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、行为路径、用户体验、界面排版的整体设计。好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。一般所说的UI设计主要针对的是软件界面的设计。


以下只是个人经验,仅供参考



个人职责

主要负责医生集团移动端的界面设计和PC端的界面设计。辅助一些平面设计,例如:名片、折页、易拉宝、海报、H5。


了解自己的职责,做好自己的本职工作,最好不要跨界工作



工作流程

了解产品的理念 —— 分析竞品 —— 参与产品的需求分析 —— 分析原型 —— 界面设计 —— 内验设计界面 —— 与开发对接及跟进 —— 产品完成,参与内测 —— 产品上线,继续跟进。



1) 分析竞品

体验行业做的比较好的竞品,分析他们的需求点、功能的优先策略、用户的使用途径、界面的设计风格、品牌颜色、LOGO设计、启动图标、面对人群等。


功能整理 提取可参考元素

Image title

思维导图的方式来分析竞品的功能模块和行为路径。


Image title

下载APP体验竞品,参考其界面风格,交互形式,获取可参考的元素,拉开产品的差异性。



2) 参与产品的需求分析

根据产品,探讨需求的细节、业务流程、功能模块、确定需求、进行工作排期。


3) 分析原型

在最后一次需求分析中,产品经理会详细描述一边他的原型图各个界面的内容和跳转逻辑关系,我们需要了解各个界面的内容,交互形式、空白状态、加载状态、跳转逻辑上有没有缺失的,或者出错的地方,及时与产品经理沟通,讨论合理的处理方法。


4) 界面设计

竞品保持差异性,凸显自己的产品的调性。

根据品牌色和用户群体,慎重思考设计的形式。产品的差异性、运营的设计、新的设计元素及设计趋势的运用、元素之间的关系、舒适的留白、边距的大小、字体的选择及大小、字距的大小、列表的高度、头像的大小、圆角的大小、投影的大小及颜色、辅助色的选择与应用、icon的定位与绘制、启动图标风格的确定及绘制、整体界面的统一性等。

新建画布的大小及命名、必要的辅助线、图层的命名、icon的大小及命名、辅助图形的运用、保存文件的命名及路径。

首页及模块界面确定产品的调性,继而完成其他的界面。


5) 内验设计界面

在初稿完成之后,检验界面是否有丢失或重复,逻辑是否正确,命名是否正确,整体是否统一、文件与命名是否一致、保存格式是否一致、文件夹名称是否明确清晰。

Image title


6) 与开发的对接及跟进

交给开发的文件是否正确清晰,切图是否规范,切图命名是否正确、界面标注是否清晰和完整、制定视觉规范、每个版本开发完成后,进行视觉审查。减少视觉上的偏差,还原度最大化。

Image title


7) 产品上线,继续跟进

产品上线之后,跟进产品的数据,继续体验产品,优化产品,根据用户反馈来提高产品的用户体验及产品功能的增减进行界面的修改。


总结

以上分享仅代表个人一些点滴经验,不足之处望留言指正,期待大家一起进步!




全部评论:4

  • 普罗旺斯的玫瑰

    2018-03-11 17:19

    @July_DL: 需求都定不下来,就做设计,这不是为难设计师么?这样的公司早倒早托生

  • Embfan

    2018-02-28 15:22

    @July_DL: 是啊,很麻烦,就是苦了我们,该提的还是要提的

  • July_DL

    2018-02-27 20:52

    @设计师小元哥: 我现在这个公司也是这样,每次只有简单的几笔草图就开始做设计稿,每次改死设计师,需求都不确定

  • 熹儿alice

    2018-01-27 16:00

    @设计师小元哥: 对对 我遇到的公司也是这样 真的好无语 经常都是没有产品的 对做设计来说真的不好 精力分散了 无法专一设计 很苦恼

  • 设计师小元哥

    2018-01-26 10:16

    感觉你们设计好专业流程性呀,我们公司都是直接和你讲下概念,不说那些具体功能,然后我们直接设计,都没有需求文档,没有原型图,直接干设计效果图。做到后来,都开发了,又来添加减去的,感觉公司迟早会倒!

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票