UI设计基础(基本理论)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
目前UI设计在国内仍旧处于起步阶段,长期以来界面设计工作一直没有被重视起来,国内甚至还没有院校设立相关的专 业,市面上也极少关于UI设计的书籍,大部分的设计师都是在完全没有这方面的系统知识框架的基础上自学而成长起来
的,这也大大限制了UI设计的发展,甚至导致大部分从事相关行业的人也对UI一知半解。有些界面设计师甚至被贬义地
ICON表现技法:
光感表现:
材质表现:
Interface:
作业1:
手绘天气图标 (晴、少云、多云、雾、小雨、大雨、雷电、小雪、大雪、 冰雹、风…….) 图标大小:30*30mm 纸张:A4 数量:10个 要求:画面整洁,信息传达快速、准确,颜色不限,绘画方式不限
思考和操作。把自己代入用户角色,设定为最糟糕的用户:无知,易怒,缺乏耐性。
7. 有序排列:一个有序排列的界面可以让用户轻松,让界面简洁美观。 8. 安全性:用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。 9. 灵活人性化:高效率和用户满意度是人性化的直接体现。要尽可能考虑到特殊用户的操作体验,如色盲,残疾人等。
AI---Illustrator
矢量图绘制软件
CI--- 被明确地认知企业理念与企业文化的活动 VI---企业视觉识别系统 UI---软件界面,也包括机械的人机交互系统
什么是UI设计?
UI=User Interface 就是用户界面,一般指的是软件界面,也包括机械的人机交互系统。 UI设计则可以理解为协调用户与界面之间关系的设计,包括交互设计、用户研究、界面设计三部分。
3.研究人—用户测试/研究工程师User experience engineer
研究用户心理状态、行为习惯和审美情趣等。主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般彩页目 标用户问卷的形式来衡量UI设计的合理性。这个环节很重要,如果没有这个环节,UI设计的好坏只能凭借设计师的经验或者领 导的审美来评判,这样就会给企业带来严重的风险性。用户研究工程师一般是心理学人文学背景比较合适。
称为“美工”。 其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要部分。一个友好美观的界面会给人带来舒适的视 觉享受,拉近人与电脑或手机等设备的距离,为商家创造卖点。界面设计不是单纯的美术绘画,他需要定位使用者、使 用环境、使用方式并且为最终用户而设计,是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领 导的意见也不是项目成员投票的结果,而是最终用户的感受。所以界面设计要和用户研究紧密结合,是一个不断为最终 用户设计满意视觉效果的过程。
5W2H 设计原则 WHO WHERE WHEN WHAT WHY HOW HOW MUCH
GUI:
前面大致介绍了UI设计的一些基本理论,其中很大部分都是涉及到逻辑与用户,也可以说它们属于UE(用户体
验)范畴,所以我们的主要重点放GUI上。 下面就从我自己的认知出发,让大家跟着我的思路认识学习GUI。 GUI就是软件产品的外观设计,是在达到功能目标的基础上使产品更加美观个性,抓住用户眼球的重要环节。 一般来说,GUI设计分为两大块部分:图标(icon)设计 和 界面(interface)设计。 常用软件:Photoshop Illustrator
UI设计师是做什么的?
UI设计从工作内容上来说分为3个方向。它主要是由UI 研究的3个因素决定的: 1.研究界面—图形设计师Graphic UI designer
国内目前大部分UI工作者都是从事这个行业。也有人称之为美工,但实际上不是单纯意义上的美术工人,而是软件产品的 产品外形设计师。这些设计师大多是美术院校毕业的,其中大部分是有美术设计教育背景,例如工业设计,平面设计,信息多 媒体设计等。
2.研究人与界面的关系—交互设计师,interaction designer
在图形界面产生之前,长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程,树状结构, 软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计,并且确立交互模型,交互规范。 交互设计师一般 都是软件工程师背景居多。
综上所述,一个全面的UI设计师就是:软件图形设计师、交互设计师和用户研究工程师。
UI设计师需要做到什么?
1. 简易性:界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。 2. 可控性:这是界面设计的先决条件,用户想要做什么,就一定让他做到,并且必须得到应有的提示。 3. 记忆负担最小化:人脑比不了电脑,人类的短期记忆极不稳定、有限。不要轻易打破用户的行为习惯,不要让用户思考。
Symbian
Size: 64*64 32*32 16*16 File layout: svg bmp png
Svg 是一种矢量文件,可由AI转化生成,可以对图标文件无虚化无损拉伸和压缩,但是需要分层,容易产生乱码。 Bmp 是最初使用的文件格式,不支持透明背景,现在已经被淘汰。
Png24 支持透明背景 不支持无损自适应缩放
4. 一致性:是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与实际内容相一致。同一软件的不同界面,
同一界面的不同板块,同一板块的不同位置,都必须保持相当的一致性。
5. 提高用户的熟悉程度:用户可通过已掌握的知识来使用界面,但不应超出一般常识。如拟物法。
6. 从用户的观点考虑:想他们所想,做他们所做。大多数用户并没有相当的专业知识,他们往往只是从自身的经验和习惯出发
移动设备ICON规范:
由于受到移动设备屏幕尺寸和分辨的大小限制,icon的尺寸也不尽相同: Icon基本尺寸: 96*96 64*64 48*48 32*32 16*16 12*12 Icon平台: symbian、mobile、java、android、iphone、mtk 不同平台对ICON的设计要求:
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 透明背景 无需其他效果,系统自动生成
Βιβλιοθήκη Baidu
Icon:
Icon即为图标,分为 桌面图标 和 界面图标 。 桌面图标是软件标识,所以也可以称为Logo。
界面图标是功能标识,表示功能与含义。
图标能够将产品或功能的信息快速传达给用户,并获得更好的视觉体验,在软件界面中具有重要价值。
图标能够强调产品的重要特点,醒目地传达用户须知的操作重点 图标可以减轻认知负担,尤其是对于复杂的产品功能 图标可以使人机界面更加具有吸引力,不显得空洞乏味 统一的图标风格能够加深用户记忆,给予他们信赖感
的,这也大大限制了UI设计的发展,甚至导致大部分从事相关行业的人也对UI一知半解。有些界面设计师甚至被贬义地
ICON表现技法:
光感表现:
材质表现:
Interface:
作业1:
手绘天气图标 (晴、少云、多云、雾、小雨、大雨、雷电、小雪、大雪、 冰雹、风…….) 图标大小:30*30mm 纸张:A4 数量:10个 要求:画面整洁,信息传达快速、准确,颜色不限,绘画方式不限
思考和操作。把自己代入用户角色,设定为最糟糕的用户:无知,易怒,缺乏耐性。
7. 有序排列:一个有序排列的界面可以让用户轻松,让界面简洁美观。 8. 安全性:用户能自由的作出选择,且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。 9. 灵活人性化:高效率和用户满意度是人性化的直接体现。要尽可能考虑到特殊用户的操作体验,如色盲,残疾人等。
AI---Illustrator
矢量图绘制软件
CI--- 被明确地认知企业理念与企业文化的活动 VI---企业视觉识别系统 UI---软件界面,也包括机械的人机交互系统
什么是UI设计?
UI=User Interface 就是用户界面,一般指的是软件界面,也包括机械的人机交互系统。 UI设计则可以理解为协调用户与界面之间关系的设计,包括交互设计、用户研究、界面设计三部分。
3.研究人—用户测试/研究工程师User experience engineer
研究用户心理状态、行为习惯和审美情趣等。主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般彩页目 标用户问卷的形式来衡量UI设计的合理性。这个环节很重要,如果没有这个环节,UI设计的好坏只能凭借设计师的经验或者领 导的审美来评判,这样就会给企业带来严重的风险性。用户研究工程师一般是心理学人文学背景比较合适。
称为“美工”。 其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要部分。一个友好美观的界面会给人带来舒适的视 觉享受,拉近人与电脑或手机等设备的距离,为商家创造卖点。界面设计不是单纯的美术绘画,他需要定位使用者、使 用环境、使用方式并且为最终用户而设计,是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领 导的意见也不是项目成员投票的结果,而是最终用户的感受。所以界面设计要和用户研究紧密结合,是一个不断为最终 用户设计满意视觉效果的过程。
5W2H 设计原则 WHO WHERE WHEN WHAT WHY HOW HOW MUCH
GUI:
前面大致介绍了UI设计的一些基本理论,其中很大部分都是涉及到逻辑与用户,也可以说它们属于UE(用户体
验)范畴,所以我们的主要重点放GUI上。 下面就从我自己的认知出发,让大家跟着我的思路认识学习GUI。 GUI就是软件产品的外观设计,是在达到功能目标的基础上使产品更加美观个性,抓住用户眼球的重要环节。 一般来说,GUI设计分为两大块部分:图标(icon)设计 和 界面(interface)设计。 常用软件:Photoshop Illustrator
UI设计师是做什么的?
UI设计从工作内容上来说分为3个方向。它主要是由UI 研究的3个因素决定的: 1.研究界面—图形设计师Graphic UI designer
国内目前大部分UI工作者都是从事这个行业。也有人称之为美工,但实际上不是单纯意义上的美术工人,而是软件产品的 产品外形设计师。这些设计师大多是美术院校毕业的,其中大部分是有美术设计教育背景,例如工业设计,平面设计,信息多 媒体设计等。
2.研究人与界面的关系—交互设计师,interaction designer
在图形界面产生之前,长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程,树状结构, 软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计,并且确立交互模型,交互规范。 交互设计师一般 都是软件工程师背景居多。
综上所述,一个全面的UI设计师就是:软件图形设计师、交互设计师和用户研究工程师。
UI设计师需要做到什么?
1. 简易性:界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。 2. 可控性:这是界面设计的先决条件,用户想要做什么,就一定让他做到,并且必须得到应有的提示。 3. 记忆负担最小化:人脑比不了电脑,人类的短期记忆极不稳定、有限。不要轻易打破用户的行为习惯,不要让用户思考。
Symbian
Size: 64*64 32*32 16*16 File layout: svg bmp png
Svg 是一种矢量文件,可由AI转化生成,可以对图标文件无虚化无损拉伸和压缩,但是需要分层,容易产生乱码。 Bmp 是最初使用的文件格式,不支持透明背景,现在已经被淘汰。
Png24 支持透明背景 不支持无损自适应缩放
4. 一致性:是每一个优秀界面都具备的特点。界面的结构必须清晰且一致,风格必须与实际内容相一致。同一软件的不同界面,
同一界面的不同板块,同一板块的不同位置,都必须保持相当的一致性。
5. 提高用户的熟悉程度:用户可通过已掌握的知识来使用界面,但不应超出一般常识。如拟物法。
6. 从用户的观点考虑:想他们所想,做他们所做。大多数用户并没有相当的专业知识,他们往往只是从自身的经验和习惯出发
移动设备ICON规范:
由于受到移动设备屏幕尺寸和分辨的大小限制,icon的尺寸也不尽相同: Icon基本尺寸: 96*96 64*64 48*48 32*32 16*16 12*12 Icon平台: symbian、mobile、java、android、iphone、mtk 不同平台对ICON的设计要求:
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 透明背景 无需其他效果,系统自动生成
Βιβλιοθήκη Baidu
Icon:
Icon即为图标,分为 桌面图标 和 界面图标 。 桌面图标是软件标识,所以也可以称为Logo。
界面图标是功能标识,表示功能与含义。
图标能够将产品或功能的信息快速传达给用户,并获得更好的视觉体验,在软件界面中具有重要价值。
图标能够强调产品的重要特点,醒目地传达用户须知的操作重点 图标可以减轻认知负担,尤其是对于复杂的产品功能 图标可以使人机界面更加具有吸引力,不显得空洞乏味 统一的图标风格能够加深用户记忆,给予他们信赖感