forked from StarStudio/stepByStep
-
Notifications
You must be signed in to change notification settings - Fork 1
/
UI养成计划
93 lines (70 loc) · 10.4 KB
/
UI养成计划
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
星辰UI养成计划
工具篇:
1. PS入门,如果你觉得你会扣图,调一点颜色就算PS入门的话我也没有话说。就个人理解而言PS真正的精髓在于各种各样神奇的滤镜以及图层的叠加效果。也没什么多说的,你可以自己去网上找教程,或者是图书馆借书,像《野生设计师的成长之路》里面说的去看Adobe出的标准教材也是可以的。吐槽一下啊,我觉得国内网看官方教程反正是挺卡的。
2. AI入门,就AI这个工具来说,就是一个简单粗暴的矢量图设计工具,主要使用的地方在LOGO设计,图标制作,以及一些个需要很强的分辨率适应性的图片的制作。不过你也可以用PS或者Coreldraw来进行你的矢量图设计。有必要强调的是PS和AI主要的矢量图绘制方式是使用钢笔工具,一个学起来很复杂但是会用了相当爽的工具,你可以适当了解一下。Coreldraw的话你在街边的打印店什么的应该会经常见到,比较实用的一个矢量图设计工具,经常用来做海报和宣传横幅。
3. Sketch,这个也得稍微提一下,挺牛逼的设计软件,在《野生设计师的成长之路》上也是有提到的,不过据我所知这东西只有MAC版的,windows上没有,我在MAC虚拟机上用过,确实牛逼,资源很多,做扁平设计的话很好用。
4. Axure,这个工具我也不知道到底该不该讲,非常强大的一个原型设计工具而且是有WINDOWS版的,但是就是要用好这个工具比较难,如果你只是要做一个网站的用户界面设计的话这个软件没有什么必要。可是深层次的交互设计上这个东西相当有用,在一个web/app开发团队,一个能熟练使用Axure进行产品原型设计的UI/产品经理可以减少整个团队很大的开发负担。(这里吧UI/产品经理的界限画得比较模糊,严格来说,产品原型设计应该是产品经理的工作,但是不是所有的产品经理都会熟练的使用原型设计软件,所以有时候需要UI来协助产品经理进行原型设计。且在产品经理提出了原型设计初稿之后,设计师可以细化原型的具体内容,做出网站的DEMO)总而言之,这个工具一般只有做大项目的时候才用,而且要用好这个,你的PS,AI还有设计功底一定要够。学好了这个工具,你对网站的交互设计会有更深的认识。悄悄说一句,这东西也可以用来制作静态网站,就是这么叼……
http://www.myaxure.cn/ 这里有个免费的教程网站,不得不说,这种生产力工具的免费教程就是少,都是收费的。
工具用得再好也只是工具,做设计关键还是想法,有了想法之后,多做多练。工具就这么多,如何创造性地使用有限的工具,做出最炫的效果,靠得还是想法,怎么组合使用各种效果,看得都是设计师的实力。大家可以多去看看国外的优秀UI设计,http://www.egouz.com/creative/ 这里有个网址,多看,多悟,先是模仿,再是升华,最后才是做出自己的设计风格。
基础知识:
1.视觉
不要说你不是艺术专业的,也不要说你要做交互设计这些不重要。没有美感的设计谁敢要,以后出的设计稿别人都不想看还怎么一稿过?
有时间去了解一下设计史,至少知道各种设计风格,推荐一下网易中国大学的课程《设计的力量》。知道现代美学理论的基础—包豪斯理论—点线面理论。
举个例子,说一下这些理论的运用。在做设计的时候,常说视觉焦点,明显“点”用来吸引人视觉,“线”用来引导视线,“面”则用来划分内容。如果没有点线面意识的话,经常你做出来的东西会给人很散的感觉。
下面介绍两本比较好的书吧,(排版居多)
《写给大家看的设计书》入门,轻松。
《认知与设计—UI设计准则》 升级版,里面介绍的格式塔是很经典的,不用完全记住,理解就行,设计不是记住过去,是要创造未来。
颜色方面的东西我看的不多,知道色彩模式,记住色环就行了。《色彩心理学》可以看看,比较有用。通常配色的话要善于从生活中发现,比如好看的家具,好看的风景图,拿过来取几个色配一配就行了。
当然,你要是觉得你是不适合读书的人,以上都可以忽略。去dribbble多下载点psd文件,每天临摹一张。就算你看了那些书,平时也要多临摹,不做怎么会有提高。
2.交互
在这个阶段,不要想得太复杂。把各个平台的设计规范熟悉了。各个平台的人机交互指南,理解他们的设计思路。书的话后面有个链接,你们自己去看吧,我也忘了。
懂得基本的信息架构,流程图旅程图等的作用。推荐《web信息架构》。刚开始学习交互,有个比较好的方法:积累交互模式。看到比较好的设计,就截图整理到一起,分析它的适用场景,优缺点。最好是把同类相关的整理到一起,比如搜索框的交互或者登陆界面。
推荐书籍《网站UI设计之道》和《设计心理学》。
设计思维
通常,这才是重点。为什么这么设计,为什么用这个颜色,为什么用圆角不用直角,信息架构为什么要这样等等。你的设计得有根据。
先祭出大招《about faces》,我看了三遍,非常有用。用户体验(交互)设计的经典教材。情景思维和同理心,算是设计最重要的东西了,慢慢去感受吧。虽然介绍的方法不多,但每一个思考方式或者设计模式都能延伸很多。千万不要被高端的词汇吓到,不懂的找度娘。
《用户体验要素》又一本大书。更多的是教你怎么样从整个产品去思考用户体验。设计师其实很多时候做的是平衡的工作。用户体验和商业策略的平衡,视觉表达和开发难度的权衡等等。怎样去理解需求,怎样去迎合市场,怎么讨好用户,这是你需要思考的。
当然,设计师要产出很多产出物,《设计高效沟通之道》里面比较详细的介绍了很多各种文档,图表的规范。
除了这些理性的东西,平时也注意多积累。形成自己的设计风格。看看《设计中的设计》,《设计与死》什么乱七八杂偏文艺的东西也不错。
设计管理
怎么样的开发流程会适合你的团队,怎样的设计过程才会更高效。
介绍一下一般简单的用户体验设计流程吧.
1.拿到需求,分析验证需求(用研配合)
2.整理需求,排优先级
3.制作信息架构
4.交互原型制作
5.测试demo
6.修改,再测
7.视觉敲定
8.高保真demo制作
9.测试(ABtest,用户测试,可用性测试等等)
10.开发
11.编写规范文档
当然,并不是所有的流程都长一样。怎么样的流程适合你的团队,又能达到提升用户体验的效果,那才是适合你的。
就我个人而言,我觉得设计是心理学的一个延伸,每个设计,都是根据用户的心理感触以及直观体验来做的。而设计的又一个关键就是,根据不同的用户需求和使用场景,使用不同的设计思路。就是说考虑不同用户在各种极端状况下的体验。还有就是要在开发难度,和用户体验方面做好权衡,有可能某个功能确实能提高用户体验,但是代价太大,这种时候就需要慎重考虑。
感觉这些东西说起来有点苍白无力,但是很多事用语言着实很难描述,我觉得在做过一些项目之后,可能你们会对这东西有自己的理解。
设计流程这东西多说无益,每个团队都有不同的风格,体验下就知道,习惯就是好的。
提高篇:
在前面的知识已经基本掌握的情况下,可以进入提高篇的学习。这个阶段中,UI设计其实和前端已经不分家了。CSS和HTML的基础知识,对于一个优秀的网页UI设计师来说,是必须要做到了解的。在你设计网页的时候,你要考虑某个设计要靠什么东西来实现,实现起来难度如何,更重要的是,很多网页前端工程师并不会按照你的设计稿一尘不变的写出来,或者说,当网站成型之后,有一些小的细节需要改动,这时候,HTML和CSS的知识会显得尤为重要,设计师并不是不需要写代码的。(很多网络公司招收设计师的时候也要求掌握基本的HTML/CSS知识)
HTML: 超文本标记语言,标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。(构建网页框架的基本语言结构,其实就是个标记,很好学的)
CSS: 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。(构建网页样式的语言,也很简单,并不存在逻辑结构,只是类似标记的东西)
推荐入门书籍:《HEAD FIRST HTML》这本书简单易懂,用一个个实例串联起每个需要学习的知识点,很适合入门初学者学习。
在读完此书之后,推荐大家去下载一本CSS 3.0参考手册,腾讯ISD版的就不错,方便在平时使用中查找需要使用的标记。而HTML/CSS之后的深入学习基本上就是需要在实战中联系了,没事可以看看前端非JS之外的代码。
总结:
1. PS的深入学习
2. Axure的了解和使用
3. 《认知与设计—UI设计准则》,《设计心理学》,《网站UI设计之道》,《写给大家看的设计书》这些书可以选几本来看。
4. 浏览一些好的设计网站,分析一下这些设计好在哪里
5. 试着模仿一些好的网站设计
6. 搜集整理一些设计资源:
7. 自己试着编写一个静态页面
PS:资源整理
http://hao.uisdc.com/设计网站集合
http://hao.uisdc.com/book/#0-tsina-1-45066-397232819ff9a47a7b7e80a40613cfe1设计相关书籍
灵感:pinterest
临摹or资源:dribbble,365psd
相关社区:behace dribbble 站酷 ui中国(懂得利用这些平台,让别人看到你)
设计尺寸:http://chicun.in/
一个icon网站http://www.iconfont.cn/ 挺好用的~