一、确认产品需求
产品需求一般有两种来源途径:一种是甲方客户(俗称外包项目),另一种是自研产品。甲方客户产品需求就需要与甲方进行多次沟通来确定产品需求;如果是自研产品则除了内部的多次沟通外,还需要根据产品的定位、目标用户、竞品分析等来确定需求。无论需求是哪种,沟通都是非常重要的。两者在确定需求方面方法论其实是差不多的,不是割裂和对立的。对于需求的理解越透彻后期就会越好开展工作。
二、讨论并制定草图框架
在项目的开始,UI设计师就需要参与到整个项目当中。对于产品需求的了解,不只是产品经理或者项目负责人的事情。所以,需要UI设计师、项目负责人、产品经理等一起作出讨论。在此阶段,UI设计师可以通过画出一个大概的框架草图来提高沟通效率。
对于一些外包项目,客户的需求很多时候都是模糊的,客户方一般会说先提供几个版本的设计稿看看,这个时候,整个产品的功能、结构框架也都是模糊的,所以,可能需要UI设计师积极的与客户或者项目负责人沟通,了解清楚。切记,在需求明确之前别开始设计工作,不然做出来的东西也是无用的,重复这类工作还会打消自己的积极性。
三、流程图
这个时候,你需要结合开始的产品需求和框架草图,用流程图工具做出一个具体的流程图,理清你的设计思路。这样你的项目负责人可以直观的看到整个的流程,你在开始设计的时候,也可以依据你做的流程图。
做脑图/思维导图/流程图的工具其实有很多。在这里呢,列举一些常用到的流程图工具,如Mindnode/百度脑图/Xmind/Visio等等。
四、原型图
在原型图设计阶段,界面应避免用色,一般用黑白灰,这样可以避免颜色影响视觉聚焦功能需求。
所需工具:Sketch(框架图)、Adobe-XD、POP(初步原型)、墨刀(高保真原型图和交互)等
五、制作设计规范
设计规范指导要兼顾一致性和可用性原则。
一致性:
1、设计目标一致
软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。例如:以老年人作为目标用户,以简化界面逻辑为设计目标,那么该目标需要贯彻软件(软件包)整体,而不是局部。
2、元素外观一致
交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。
3、交互行为一致
在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。例如:所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确,但是的确有相反的例子证明不按照这个理念设计,会更加简化用户操作流程。
可用性原则:
1、可理解
软件要为目标用户服务,软件各元素对应的功能要被目标用户所理解。如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。例:删除操作元素。用户可以点击删除操作按钮,提示用户如何删除操作或者是否确认删除操作,用户可以更加详细的理解该元素对应的功能,同时可以取消该操作。
2、可达到
用户是交互的神经,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。
3、可控制
软件的交互流程,用户可以控制。功能的执行流程,用户可以控制。如果确实无法提供控制,则向目标用户提示相关的信息。
六、确定设计稿和原型交互demo
所需工具:Sketch(设计稿)、Axure(原型交互)、Marvel(原型展示)、Principle(交互动效)、墨刀(原型交互)
七、对接开发
所需工具:PS、AI等(设计)、Cutterman (切图工具)、PxCook(标注、切图工具)、Zeplin(切图、设计稿标注)等。
当你设计完成页面以后,要做的工作就是:标注、切图。以及跟进开发实现,确保设计稿落地效果。
八、上架
软件是为目标用户服务。因此应该由目标用户来使用和控制软件。软件响应用户的动作和设定的规则。对于目标用户交互的结果和反馈,提示目标用户结果和反馈信息,引导目标用户进行自我需求的下一步操作。
九、跟进用户反馈及后续迭代
以上是UI设计流程的内容,内容也许不是最全,但也能让你对UI设计流程有清楚的认识。