APP下载

你不知道的UI设计流程~

消息来源:baojiabao.com 作者: 发布时间:2024-05-10

报价宝综合消息你不知道的UI设计流程~

新手设计们,你们不知道的UI设计流程来啦~

不少刚刚入行做UI设计的朋友,都期待着可以参与公司专案设计的整个流程,但是不同的公司,具体的流程可能是不一样的。为了满足广大学员的需求,AAA教育小编姐姐就UI设计流程简单分析如下:

一、确认使用者需求

在UI设计过程中,需求设计角色会确定软件的目标使用者,获取终端使用者和直接使用者的需求。使用者互动要考虑到不同目标使用者的互动设计重点,将这些重点融合。例如:老年人使用者和专业使用者的设计重点就不尽相同,所有的目标使用者的需求都要考虑进去。

二、采集互动方式

目标使用者不同互动习惯也千差万别。习惯性的互动方式往往来源于其原有的针对现实的互动流程、已有软件工具的互动流程。在此基础上通过调研分析找到使用者希望达到的互动效果,并且以流程确认下来。

三、讨论并制定草图框架

在一个专案的开始,UI设计师就需要参与到整个专案当中。对于产品需求的了解,不只是产品经理或者专案负责人的事情。所以,需要UI设计师、专案负责人、产品经理和客户一起作出讨论。这个时候,你就需要画出一个大概的框架草图。

对于一些外包专案,客户的需求很多时候都是模糊的,这个时候,整个产品的功能、结构框架也都是模糊的,所以,可能需要UI设计师积极的与客户或者专案负责人沟通,了解清楚。要不然,你就会抓瞎,没法开始接下来的专案。

四、流程图

这个时候,你需要结合开始的产品需求和框架草图,用思维导图工具做出一个具体的流程图,理清你的设计思路。这样你的专案负责人可以直观的看到整个的流程,你在开始设计的时候,也可以依据你做的流程图。

做脑图/思维导图/流程图的工具其实有很多。在这里呢,列举一些常用到的流程图工具,如Mindnode/百度脑图/Xmind/Mindmanager等等。

五、原型图

所需工具:Sketch(框架图)、POP(初步原型)、墨刀(高保真原型图和互动)等

六、确定设计稿和原型互动demo

所需工具:Sketch(设计稿)、Axure(原型互动)、Marvel(原型展示)、Principle(互动动效)、墨刀(原型互动)

七、设计和待开发

所需工具:PS、AI等(设计)、Cutterman (切图工具)、PxCook(标注、切图工具)、Zeplin(切图、设计稿标注)等。

设计过程就不说了,只要你是一位UI设计师,页面怎么做那你肯定清楚。当你设计完成页面以后,要做的工作就是:标注、切图。

八、引导使用者互动

软件是为目标使用者服务。因此应该由目标使用者来使用和控制软件。软件响应使用者的动作和设定的规则。对于目标使用者互动的结果和反馈,提示目标使用者结果和反馈资讯,引导目标使用者进行自我需求的下一步操作。

九、一致性原则

1、设计目标一致

软件中往往存在多个组成部分(元件、元素)。不同组成部分之间的互动设计目标需要一致。例如:以老年人作为目标使用者,以简化界面逻辑为设计目标,那么该目标需要贯彻软件(软件包)整体,而不是区域性。

2、元素外观一致

互动元素的外观往往影响使用者的互动效果。同一个(类)软件采用一致风格的外观,对于保持使用者焦点,改进互动效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标使用者进行调查取得反馈。

3、互动行为一致

在互动模型中,不同型别的元素使用者触发其对应的行为事件后,其互动行为需要一致。例如:所有需要使用者确认操作的对话方块都至少包含确认和放弃两个按钮。对于互动行为一致性原则比较极端的理念是相同型别的互动元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确,但是的确有相反的例子证明不按照这个理念设计,会更加简化使用者操作流程。

想要学习UI设计的小伙伴,看这里——北京的AAA教育从基础的美术教学,到界面设计、平面设计再到互动设计等等,逐渐带着学生在实战专案上不断进步,培养学生独立创作能力,培养“”全能+"设计师。感兴趣的可以参加免费的试听课程,报名网站:

也可以加微信:17642041293

2019-11-19 02:51:00

相关文章