设计师中,设计师需要清楚地了解设计的目的,特别是当你不一个受欢迎的产品,不能以个人认知、强大的主题(如游戏)或趋势风格来确定目标时。例如,老年人在设计小米手机时需要什么颜色?增加风格是干扰还是更好的体验?按钮多大才合适?在本产品中UI在设计过程中,设计师需要从头开始参与,在设计过程中,设计师基本上已经知道了。
我倾向于说整个交互设计过程。在这里,UI在视觉设计开始之前,界面的交互规划和设计是一个非常重要的前提步骤,对最终的用户体验有很大的影响。
我们的团队在交互设计阶段通常有产品经理、交互设计师和UI设计师主要参与。据我所知,很多公司由产品经理完成相关工作,而不是专门的交互设计师。以下是我在这里的工作流程(图片来自网络,团队不贴)。希望整个产品团队都能参与其中,加强对产品的理解。或者借一个时尚的概念,我希望团队能有更多DesignThinking,加强和促进解决问题的能力,激发更多的创新。
一定要开始Scenario应用场景和Persona制作用户角色。您的产品在什么场景中使用,您的用户角色是什么特征。设计是否正确取决于用户角色,而不是设计师或产品经理本身。清楚地描述场景和角色,让整个团队彻底理解,以确保团队少犯错误。
*用户角色Persona,在实际工作中写文字描述是好的,不需要做如下图所示的高度。如果你想给客户或客户,或者Boss提案,可以做提升逼格。
1.Storyboard故事版:
主要负责人:产品经理或交互设计师
早些时候,我们开始讨论用户体验过程,并在白板上绘制过程加粗略的UI元素。会后交互设计师会在在纸上做手绘版线框图。这阶段产品经理、交互设计师、UI包括技术工程师在内的设计师会一起做很多讨论,主要讨论过程和主要功能,所以手绘故事版快捷方便,易于修改。
这个环节要敲定Userflow,每一步都是用户流程和关键步骤的主界面。
*白板一般都是这样,交互设计的学生会在纸上重画。
*这样设计移动产品也可以,不买专用模板本和工具尺,自己打印也可以。
2.Keywireframe关键界面线框图
主要负责人:交互设计师:
在确定的用户流程中,选择几个关键的、有代表性的步骤并进行细化Wireframe线框图。确保线框图中的每一个。UI元素的设计包括其大小和位置。我们制作的线框图是1:1,即线框图与实际界面尺寸一致。1:1的线框图可以避免早期考虑不当、执行困难等诸多问题。
在关键界面中确定此链接UI元素和布局,以及整体布局和布局风格。
*线框图1:1出名。输出到文档中添加说明。在以下工作中,本文档允许UI设计与工程师共享。
3.Keyvisualdesign视觉设计的关键界面
主要负责人:UI设计师
交互设计师将继续根据确定的用户流程和确定的布局风格制作其他界面的线框图。UI设计师则同时开始做关键界面的视觉设计,进行配色、样式不同风格的尝试。
本环节应确定产品界面的视觉设计风格。
4.Allwireframe所有界面线框图
网站设计-沙漠风网站建设公司" />
主要负责人:交互设计师:
交互设计师应完成所有界面的线框图(1:1)设计,并由团队确认。
*完成所有的线框图,一般会产生总结构图。如果有足够大的场地,也可以逐页打印,贴在墙上。方便团队随时参考。
5.Prototype可动原型
主要负责人:交互设计师:
这个链接取决于产品的需求。如果静态线框图不能完全反映产品的特点,则需要制作可操作甚至关键界面动画示意的可移动原型。HTML可移动原型和特殊项目也做过Flash我还有一个很棒的朋友用它。PPT做过(PPT的开发工具VBScript)可移动原型几乎接近成品界面。
与上一步相同,团队的理解将更加准确。
*忍不住贴一个PPT开发工具面板,提供VS风格控件,直接使用VBscript写控件逻辑!也可以带来dummy数据!客户认为你已经开发好了。
6.UIdesign所有界面视觉设计
主要负责人:UI设计师
完成所有界面UI视觉设计。
全部确认此链接UI设计。同时确认UI在文档中更新。