UI设计基础基本理论学习课程

1、第1页/共15页第一页，编辑于星期日：二点 十九分。什么是UI设计？ UI=User Interface 就是用户界面，一般指的是软件界面，也包括机械的人机交互系统。UI设计则可以理解为协调用户与界面之间关系的设计，包括交互设计、用户研究、界面设计三部分。目前UI设计在国内仍旧处于起步阶段，长期以来界面设计工作一直没有被重视起来，国内甚至还没有院校设立相关的专业，市面上也极少关于UI设计的书籍，大部分的设计师都是在完全没有这方面的系统知识框架的基础上自学而成长起来的，这也大大限制了UI设计的发展，甚至导致大部分从事相关行业的人也对UI一知半解。有些界面设计师甚至被贬义地称为“美工”。其实软件界

2、面设计就像工业产品中的工业造型设计一样，是产品的重要部分。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑或手机等设备的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。 第2页/共15页第二页，编辑于星期日：二点 十九分。第3页/共15页第三页，编辑于星期日：二点 十九分。UI设计师是做什么的？UI设计从工作内容上来说分为3个方向。

3、它主要是由UI 研究的3个因素决定的： 1.研究界面图形设计师Graphic UI designer 国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校毕业的，其中大部分是有美术设计教育背景，例如工业设计，平面设计，信息多媒体设计等。 2.研究人与界面的关系交互设计师，interaction designer 在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计，并且确立交互

4、模型，交互规范。 交互设计师一般都是软件工程师背景居多。 3.研究人用户测试/研究工程师User experience engineer 研究用户心理状态、行为习惯和审美情趣等。主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般彩页目标用户问卷的形式来衡量UI设计的合理性。这个环节很重要，如果没有这个环节，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。用户研究工程师一般是心理学人文学背景比较合适。 综上所述，一个全面的UI设计师就是：软件图形设计师、交互设计师和用户研究工程师。 第4页/共15页第四页，编辑于星期日：二点 十九分。UI设计师需

5、要做到什么？1. 简易性：界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。2. 可控性：这是界面设计的先决条件，用户想要做什么，就一定让他做到，并且必须得到应有的提示。3. 记忆负担最小化：人脑比不了电脑，人类的短期记忆极不稳定、有限。不要轻易打破用户的行为习惯，不要让用户思考。 第5页/共15页第五页，编辑于星期日：二点 十九分。4. 一致性：是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与实际内容相一致。同一软件的不同界面，同一界面的不同板块，同一板块的不同位置，都必须保持相当的一致性。5. 提高用户的熟悉程度：用户可通过已掌握的知识来使用界面，

6、但不应超出一般常识。如拟物法。 第6页/共15页第六页，编辑于星期日：二点 十九分。6.从用户的观点考虑：想他们所想，做他们所做。大多数用户并没有相当的专业知识，他们往往只是从自身的经验和习惯出发思考和操作。把自己代入用户角色，设定为最糟糕的用户：无知，易怒，缺乏耐性。7.有序排列：一个有序排列的界面可以让用户轻松，让界面简洁美观。8.安全性：用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。 9.灵活人性化：高效率和用户满意度是人性化的直接体现。要尽可能考虑到特殊用户的操作体验，如色盲，残疾人等。5W2H 设计原则 WHO WHERE WHEN WHAT

7、 WHY HOW HOW MUCH第7页/共15页第七页，编辑于星期日：二点 十九分。GUI：前面大致介绍了UI设计的一些基本理论，其中很大部分都是涉及到逻辑与用户，也可以说它们属于UE（用户体验）范畴，所以我们的主要重点放GUI上。下面就从我自己的认知出发，让大家跟着我的思路认识学习GUI。GUI就是软件产品的外观设计，是在达到功能目标的基础上使产品更加美观个性，抓住用户眼球的重要环节。一般来说，GUI设计分为两大块部分：图标(icon)设计 和 界面(interface)设计。常用软件：Photoshop Illustrator第8页/共15页第八页，编辑于星期日：二点 十九分。Icon：

8、Icon即为图标，分为 桌面图标 和 界面图标 。桌面图标是软件标识，所以也可以称为Logo。界面图标是功能标识，表示功能与含义。图标能够将产品或功能的信息快速传达给用户，并获得更好的视觉体验，在软件界面中具有重要价值。 图标能够强调产品的重要特点，醒目地传达用户须知的操作重点 图标可以减轻认知负担，尤其是对于复杂的产品功能 图标可以使人机界面更加具有吸引力，不显得空洞乏味 统一的图标风格能够加深用户记忆，给予他们信赖感第9页/共15页第九页，编辑于星期日：二点 十九分。移动设备ICON规范：由于受到移动设备屏幕尺寸和分辨的大小限制，icon的尺寸也不尽相同：Icon基本尺寸: 96*96 6

9、4*64 48*48 32*32 16*16 12*12Icon平台： symbian、mobile、java、android、iphone、mtk不同平台对ICON的设计要求： Symbian Size: 64*64 32*32 16*16 File layout: svg bmp png Svg 是一种矢量文件，可由AI转化生成，可以对图标文件无虚化无损拉伸和压缩，但是需要分层，容易产生乱码。 Bmp 是最初使用的文件格式，不支持透明背景，现在已经被淘汰。 Png24 支持透明背景 不支持无损自适应缩放第10页/共15页第十页，编辑于星期日：二点 十九分。Mobile Size: 32*32 16*16 File layout: ICO Ps: win mobile不支持PNG格式,透明图标效果只能用ICO格式实现。Android Size: 64*64 32*32 File layout: PNG24 透明背景Iphone Size: 自适应 File layout: PNG24 透明背景 无需其他效果，系统自动生成第11页/共15页第十一页，编辑于星期日：二点 十九分。ICON表现技法：光感表现：材质表现：第12页/共15页第十二页，编辑于星期日：二点 十九分。Interface：第13页/共15页第十三页，编辑于星期日：二点 十九分。作业