header_v1.7.40

提纲挈领!UI设计师知识体系梳理

134天前发布

原创文章 / UI / 观点
小浣熊干脆猫 原创,如需商业用途或转载请与小浣熊干脆猫联系,谢谢配合。

对UI设计师需要掌握的知识体系做简单梳理

写在前面

UI设计师,这个职业发展至今已经有十几个年头了,开始逐渐走向成熟。我们获取知识的途径也越来越多。“超全面设计指南”、“学会这一点,从此不迷茫”、“快速掌握”、“干货大合集”、“BAT设计师都在用的视觉技巧”等等字眼统治了各大设计网站。乱花渐欲迷人眼,在庞大的信息碎片面前,我感觉到了无力——为什么天天看“干货”还是抓不住精髓?为什么学好了这一点,还是会迷茫?超全面到底有多全面?为什么每一篇文章标题都可以这么劲爆,而内容其实“新瓶旧酒”?

未知的迷茫,就像黑暗对于孩子。我想,是时候整理出自己的UI知识体系,做好自己的规划,不再被碎片化的所谓“干货大合集”扰乱思维。

. . .

分类的方法很多,这里我会根据产品开发的时间顺序梳理UI设计师在每个阶段需要掌握和运用的知识点。我对于本文的定位是一个目录,每个分类的内容点到为止,之后我会再根据目录中的内容按重要程度深入学习。


1.需求阶段

一个产品的出现源于用户的需求,需求对于产品来说是至关重要的。作为设计师,也需要了解需求的产生和分析,这样才能更加有理有据的做设计(怼产品)。对于这部分内容,了解即可,不需要过于深入的研究。


1.1 用研常识

界面的最终面向的是用户,用户研究对于界面设计来说,就像是地基对于高楼一样重要。了解用研的基本常识有助于更好的理解用户。

常用的用研常识有:用户画像、用户访谈、问卷调查、焦点小组、眼动测试、用户反馈和大数据分析等。


1.2 产品常识

了解产品是做好产品的第一步,要对于产品的需求如何确定、产品定位如何决定有一个基本的认识。

常用的产品常识有:产品设计的五个层面、产品定位五步法、产品设计的三要素、马斯洛需求理论、KANO模型、Censydiam用户动机分析模型。


1.3 商业常识

常用商业常识有:竞品分析、增长模型、精益画布。


1.4 心理学常识

了解心理学的相关知识有助于我们把握用户的心理状态。

常用的心理学常识:认知心理学、格式塔心理学、色彩心理学、心流状态。


2.交互阶段

交互设计与视觉设计密不可分,有时,在视觉设计的过程中也需要修正一些交互的问题,因此,积累一些交互设计知识是必不可少的。这部分内容需要熟知。


2.1 产品架构

产品的架构就是产品的骨架,就是信息架构。产品类型不同,架构的复杂度也会不同。对于不同类型的产品需要使用合适的架构。

· 产品架构的模型主要分为层级结构、自然结构、线性结构、矩阵结构。

· 产品结构的特性:易用性、稳定性、可扩展性


2.2 交互设计三要素

目标、任务、行为


2.3 可用性原则

尼尔森十大可用性原则:状态可见原则、环境贴切原则、撤销重做原则、一致性原则、防错原则、易取原则、灵活高效原则、易扫视原则、容错原则、人性化帮助原则。


2.4 可用性测试

掌握几种常用的可用性测试方法,可以帮助我们作出较好的决策。

常用方法:走廊测试、远程可用性测试、专家测试、纸质原型测试。


3.视觉阶段

对于视觉设计师来讲,视觉能力当然是所有能力的重中之重,这部分涵盖的信息非常多,需要深入的研究掌握,并在平时工作中熟练运用。


3.1 各平台设计规范以及基础控件

各平台规范对于实际的设计工作会有很大的帮助,目前主要需要了解Android、iOS原生系统设计规范、web设计规范等,同时也需要关注一些新平台的出现。

系统控件也是需要熟练掌握的部分,例如:按钮、导航栏、状态栏、toast、弹窗、输入框等。同时,不要忽略页面的异常状态。


3.2 字体

需要了解不同平台的默认字体以及常用字号。对于不同字号的使用,要注意既要能够达到区分层级的目的,也不能使用过多过细的字号层级,以免产生凌乱感。

此外,还要掌握字体设计的方法。


3.3 图标设计

图标是界面的基本元素之一,对于任何App或网站都是很重要的。好的图标需要注意:识别性、易用性、一致性、独特性、吸引力。


3.4 配色原则

色彩可以决定界面给用户的第一感觉,做好配色需要:

· 熟练掌握运用配色原则;

· 结合品牌特性选择合适的配色方案;

· 熟练掌握主色、次色、辅助色、背景色直接的搭配比例。


3.5 排版原则

页面排版最重要的是要有效地组织信息。

排版四大原则:亲密性、对比、重复、对齐。


3.6 动效设计

动效可以更加生动地展示系统状态,还可以为页面增加不少趣味。动效的样式非常多变,但是万变不离其宗,那就是——迪士尼动画十二原则:

· 挤压与伸展                · 预期动作                   · 演出展示    

· 接续动作与关键动作    · 跟随动作与重叠动作    · 渐快和渐慢    

· 弧形                         · 附属动作                   · 时间控制质感    

· 夸张                         · 手绘技巧                   · 吸引力

这十二条动画法则可以帮助我们更好的做出有创意的动效。


3.7 设计工具

设计工具不用多说,一般PS、Sketch、AI是常用工具,另外做动效可以使用AE、principle、flinto、Framer等。除此之外,还要经常关注新工具的出现,毕竟长江后浪推前浪。


3.8 审美水平

审美水平直接决定页面的视觉质量。在平时,除了要多浏览相关网站学习大神们的作品关注设计趋势之外,还需要在生活中多留心,从不同的行业中汲取营养。


4.开发阶段

设计完成后还要关注开发实现的问题,否则再好的设计也是空中楼阁。这部分内容需要熟知,至少要能够用相同的语言与开发小哥哥们更好的沟通。


4.1 前后端基础知识

了解前后端的基础知识主要是为了方便与开发小哥哥沟通,节省大家的时间。主要需要了解前端布局的知识和数据埋点的基础。


4.2 协作方法以及工具

这部分知识主要解决协作效率问题。

· 项目文件管理方法:可以根据自身情况按照时间、项目、版本或终端维度划分。这件事上没有绝对的正确,最重要的是要适合自己并且有一定的准则,方便查找和分类即可。

· 标注与切图规范

· 协作工具:现在出现了很多好用的协作工具,如:zeplin、蓝湖等,释放了大部分设计师切图标注的工作量,十分便捷,需要时常关注一下。


4.3 设计走查

设计走查是保证设计还原度、进一步优化用户体验的重要环节,在这一环节要注意:页面的一致性、方案的可用性、文本的可读性、不同屏幕上的易用性、屏幕对于颜色的影响、icon的可识别性、动效的使用。


5.反馈阶段

产品上线后要关注后续的反馈,以便进一步发现问题、迭代产品。这部分内容了解、做到心中有数即可。


5.1 用户反馈

获取用户反馈的渠道主要有:

· 通过客服;

· 通过产品论坛、QQ群、微博等社交工具;

· 应用商店直接评论;

· 应用内用户反馈入口。

可以不时关注一下用户反馈,以便培养站在用户角度考虑问题的思维习惯。


5.2 数据分析

产品好不好,还要靠数据说话。做好数据分析可以帮助我们把握正确的设计方向。

常见概念:SEO/SEM、访问路径、用户行为路径,浏览量、访问量、独立访客数、跳失率、转化率、页面停留时间、访问页面数、流量来源、流量来源ROI、留存、留存、平均使用时长等等

常用方法:Link Tag的流量标记、转化漏斗、微转化、A/B测试、事件追踪、DOSS分析法等等。


6.软实力

做好设计工作还需要一些看不见的软实力。


6.1 素材库管理

素材库包括但不限于图片、图标、配色、规范、建模等,还自己需要根据个人的需求对于上述各种方面的知识进行梳理,让素材库成为灵感源泉和弹药库。


6.2 沟通能力

与上下游沟通、与用户沟通。


6.3 理解能力

对于需求的理解、对于公司品牌战略以及产品的理解。


6.4 表达能力

有将自己的设计主张表达出来的能力,做到能够有理有据的说服人。


6.5 更新的态度

随时做好准备接受的新的方法、理念,并主动学习。


6.6 做人方面

注意要诚实守信(真的见过两面三刀的设计师,叹为观止,具体就不吐槽了,噗~)、对人宽容,工作积极、细心,有分享的态度,最后,抗压抗挫折能力对于设计师尤为重要,要有一颗强大的心脏。

. . .


写在后面

《双城记》中说:“这是最好的时代,也是最坏的时代,这是智慧的时代,这是愚蠢的时代。”多种多样的信息渠道使得我们可以随时随地获取自己想了解的信息,而随之而来的问题则是如何分辨信息的质量,在这样的时代中,唯有建立起自己的知识体系,才能提纲挈领,拨开迷雾。


6

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功