13693193565

优化技术

SEM营销 / SE0营销 / SMM营销技术

善实战SEO高端人才的智慧结晶

OPTIMIZATION TECHNIQUE

UI设计的整个工作流程是怎样的?

网站管理员 - 浏览:

2019-09-19   作者:  来源:

以下回复把“UI设计”当做一个整体的团队流程来看。而并非是“UI设计师”的工作流程是怎样的。特此说明。

我倾向于说“交互设计的整个流程”。在我这里,UI是指“界面”,在视觉设计开始之前,界面的的交互策划与设计是很重要的前置步骤,对最终的用户体验有很大的影响。

我团队在交互设计阶段一般有产品经理、交互设计师和UI设计师主要参与。以我的了解,很多公司不设专门的交互设计师,而由产品经理完成相关工作。以下是我这里的工作流程(图片来自于网络,本团队的就不贴了)。这个流程希望整个产品团队都能参与其中并共同加强对产品的理解。或者借一个时髦的概念,我是希望团队能具有更多Design Thinking,“设计思维”,来加强和推动解决问题的能力,并激发更多创新。

最开始一定要把Scenario应用场景和Persona用户角色做出来。你的产品是在何种场景下被使用,你的用户角色是怎样特征的人。设计的对不对,要用用户角色来判断,而不是设计师或产品经理自己。把场景和角色描述清楚,并且让整个团队理解透彻,这能保证团队少犯错误。

*用户角色 Persona,实际工作中写文字描述就好,不用做的如下图一般高大上。如果你要给客户或Boss提案,可以做一个提升逼格。


1. Storyboard 故事版:

主要负责人:产品经理或交互设计师

最早大家开始讨论用户体验流程,在白板上边画流程边添加粗略的UI元素。会后交互设计师会在在纸上做手绘版线框图。这阶段产品经理、交互设计师、UI设计师、包括技术工程师会一同作大量的讨论,而且主要讨论的是流程和主要功能,因此手画故事版最快最方便并易于修改的。

此环节要敲定userflow,用户流程及其中的关键步骤,每一步骤都是一个主要界面。

*白板上一般都是这样,交互设计同学会在纸上重绘。

*移动产品设计这样做也行,不买专用的模板本和工具尺,自己打印也行。

2. Key wireframe 关键界面线框图

主要负责人:交互设计师

在确定的用户流程中,选出几个关键的,有代表性的步骤,做细化的wireframe线框图。线框图里要确保每一个UI元素的设计,包括其大小和位置。我们做的线框图是1:1的,也就是线框图与实际界面尺寸一致。1:1的线框图能在前期避免考虑不周和执行困难等很多问题的出现。

此环节要确定关键界面里的UI元素和布局,以及全局的布局排版风格。

*线框图做成1:1最好。输出到文档里要添加说明。在后面的工作里,这份文档可以让UI设计同学和工程师同学共用。

3. Key visual design 关键界面视觉设计

主要负责人:UI设计师

此环节交互设计师会按确定的用户流程及确定的布局风格来继续做其它界面的线框图。UI设计师则同时开始做关键界面的视觉设计,进行配色、样式不同风格的尝试。

此环节要确定产品界面的视觉设计风格。

4. All wireframe 全部界面线框图

主要负责人:交互设计师

此环节交互设计师要完成全部界面的线框图(1:1的)设计并且团队确认。

*做完全部的线框图,一般会出一个总结构图。如果有足够大的场地,也可以逐页打印出来贴到一面墙上。方便团队随时参考。
5. Prototype 可动原型

主要负责人:交互设计师

此环节依产品需求而定。如果静态的线框图还不能完整的体现出产品特点,那就需要做成可操作甚至有关键界面动画示意的可动原型。通常是HTML的可动原型,特殊项目也曾经做过Flash的。我还有一个奇葩朋友用PPT做过(PPT的开发工具 VB Script)几乎接近成品界面的可动原型。

此环节的确认同上一步,团队的理解会更精准。

*忍不住帖一个PPT的开发工具面板,提供VS风格的控件,并且直接用VB script写控件逻辑!还可以带dummy数据!客户都以为你开发完毕了有木有。

6. UI design 全部界面视觉设计

主要负责人:UI设计师

完成全部界面的UI视觉设计。

此环节确认全部UI设计。同时把确认的UI更新到文档里。

以上步骤里省略了了给boss汇报或者给客户汇报的描述。有条件的话,最好是每一步都要让有关的决策人员参与确认。

如果要做用户调研的产品,那一定要做出可动原型再让用户使用测试,不然很难得到有价值的反馈。有条件的公司直接出带设计的可动原型再测试当然最好。

关键词:

上一篇:文章类小程序如何赚钱?

下一篇:实体商家如何玩转小程序增加收益?

热门标签

网站快排 口碑推广 怎么做流量 网站被黑 Bing排名优化 关键词挖掘 如何抓住微信流量 公众号引流 百度SEO排名优化 社交网络搜索 移动SEO搜索优化 网站策划运营 网站内容怎么调整 网站推广 网络营销 网络赚钱 网页设计 英文网站SEO 页面优化技巧 谷歌SEO排名优化 Google SEO SEO工具 SEO技术 Yahoo排名优化 关键词分析 外部链接策略 网站被惩罚 主机域名与SEO 作弊和黑帽SEO 网站降权 创建站点地图 生成站点地图 如何生成站点地图 手动创建站点地图 站点地图生成工具 提交站点地图 短视频搜索

近期文章

本月阅读排行

二维码扫一扫 QR CODE SCAN

  • 微信扫一扫关注我们
  • 手机版扫码浏览

在线预约 Online booking

联系我们 Contact US

公司地址:北京朝阳区团结湖嘉盛中心10层

微信:qq652807263

服务手机:13693193565

E-mail:888@edo2008.com

COPYRIGHT © 2006-2023 北京蓝纤科技有限公司 ALL RIGHTS RESERVED     京ICP备13006508号    京公网安备11010502025264