# User visual design_N **Repository Path**: lujizhi/User-visual-design_N ## Basic Information - **Project Name**: User visual design_N - **Description**: 用户视觉设计课程笔记 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-04-05 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # User visual design_N #### 介绍 用户视觉设计课程笔记 # Week 3 设计理论 设计理论对于设计师是基础(就如小学生算术中的小学乘法表必背的重要性) * **格式塔心理学** 先从整体去感知认识事物 特性: 1. 相近性:人的视觉把关系紧密的元素分为一组(关联与非关联分开--留白) 2. 相似性:有相似特征元素比没有相似特征元素认为紧密相关(实心按钮 水晶按钮 图标按钮)(颜色>大小>形状) 3. 连续性:有序(举例:IBM图标)(左右滑动) 4. 闭合性:优化视觉(色块-内容过多过杂，排版) 5. 主题与背景/焦点性:登录页面+背景，弹窗 6. 共同命运性:一起运动的物体被感知认识为一组 * **尼尔森用户体验十大原则** 1. 系统可视化(淘宝货单物流) 2. 不脱离现实(使用用户熟悉的) 3. 用户有自由的控制权(引导用户控制) 4. 一致性 5. 用帮助性语言帮助用户(输入几位验证码) 6. 预防用户出错(输入正确登录账号 登录按钮亮) 7. 帮助用户识别，而非回忆 8. 灵活性和使用效率 9. 美观和极简设计 10. 帮助，说明文档 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * # Week 4 一致性 **视觉一致性：通过视觉层次，比例，颜色，质感，排版等在设计上达到一致性** **建立一致性意味着用户熟悉元素来设置并维持用户逾期** ## 如何判断“用户预期”? 1.现有页面可视化惯例 2.应用内其他页面上已经建立的预期 3.用户在其他应用上曾经见过的 ## 一致性：内部一致性和外部一致性 ``` 内部一致性具体手段： * 视觉：颜色一致性；风格一致性(扁平，投影，拟物等风格)；属性一致性(字体，图标，图片) * 行为：操作一致性(删除，滑动，点击，下滑刷新，动作动画表现)；与产品所在平台保持一致性(安卓和iOS的不同的操作习惯 * 感知：位置一致性(确定取消按钮，保存，类似模块的相同按钮位置相似)；文本一致性(提示语，操作提示，功能按钮，编辑提示) ``` ``` * 布局：是否把相同功能的元素摆放在每个页面的相同位置 * 排版：相似元素是否都使用相同的排版 * 色彩：是否有一组已定义好的色彩；是否有一套用色彩来强调并支持信息层级的系统 * 图像：是否使用风格相同的图像传达信息 * 控件和可控性：是否使用相同的界面元素和设计处理来代表同样的动作；是否为反馈和互动控件使用了同样的动作； ``` ## 外部一致性 * 与竞品的一致性 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0412/172217_ac8c2e25_2237359.png "1.png") * 与所在平台的一致性 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0412/172239_d231de3d_2237359.png "1.png") ## 内部一致性 * 视觉 * 交互（产品内部的交互方式应该保持一致） * 迭代（在迭代中保持产品的一致性，当产品不得不进行较大的更新和改变时，也需要重点提示和指导用户，帮助其了解新的变化） * 产品线 （同一公司的不同产品之间保持一致性） * 多终端 ## 举例：谷歌如何建立一致性 * 化繁为简 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0412/173915_d3b03261_2237359.png "1.png") * 几何图形 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0412/174033_66dd7039_2237359.png "1.png") * 保持正面-“z轴” ![输入图片说明](https://images.gitee.com/uploads/images/2020/0412/174056_2920c5b4_2237359.png "1.png") * 直线阴影 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0412/174113_911227b3_2237359.png "1.png") * 调色原理 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0412/174132_38dbbbc5_2237359.png "1.png") * 配色组合 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0412/174149_7898b3fa_2237359.png "1.png") * 配色变化 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0412/174211_0279d3c7_2237359.png "1.png") * 深浅配色 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0412/174251_48e026c0_2237359.png "1.png") * * * * * * * * * * # Week 5 色彩 **HSB(色相红绿蓝)vsRGB(色相饱和度 亮度)vsCMYK(打印颜色)** **使用色彩不同，使用场景不同(不同行业，配色目标不同)** ![输入图片说明](https://images.gitee.com/uploads/images/2020/0413/200554_8e6ffadc_2237359.png "1.png") ``` 产品界面设计vs推广设计 界面设计:(传递信息，引导操作，品牌价值) 清晰 舒适 引导 品牌感 推广设计:(吸引流量，营造氛围，快速传递) 吸引力 氛围 快速传递 ``` ## 流程： * 确定需求-确定配色-配色方向(确定主色，精简层级)-确定辅色(慢慢尝试不同颜色风格) ## 统一性的配色方法: * 同一色相的配色:产品相同，颜色单调 * 邻近色配色: ![输入图片说明](https://images.gitee.com/uploads/images/2020/0413/201001_4deb2713_2237359.png "1.png") * 类似色相的配色 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0413/201043_30e3f30b_2237359.png "1.png") * 对比性的配色方法 **互补色** ![输入图片说明](https://images.gitee.com/uploads/images/2020/0413/201148_3cc21283_2237359.png "1.png") **对比色** ![输入图片说明](https://images.gitee.com/uploads/images/2020/0413/201232_9134ef28_2237359.png "1.png") * 中差色搭配: ![输入图片说明](https://images.gitee.com/uploads/images/2020/0413/201316_df3a7c1a_2237359.png "1.png") **颜色比例：60%主颜色30%辅颜色10%点缀色，配色比(整个产品系所有的主颜色)** ## 色彩层级精简意义: 控制界面的色彩数量:色不过三；最多不超过7种 ## 品质感 品质感＝品相+质感(渐变色:两种色相不超过90度；阴影（光影）) ``` 关于颜色的网站： https://mycolor.space https://colorhunt.co https://webkul.github.io/coolhue ``` * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * # Week 6 字体 ## 衬线字体和非衬线字体 * 衬线字体（serif）：字母结构笔画之外的装饰性笔画字体； * 非衬线字体（sans-serif）：没有装饰性笔画的字体 ## 字号与字重 * 字号参考：Apple、Material Design、Ant Design * 字重：不同的文字作用对应不同的字重 ## 字体颜色 * 白/黑背景色系：色彩数值模式为HSB，B值为灰度。HS值为0时，B值越高颜色越亮，100为纯白，0为纯黑。 * 白色背景B值控制范围（参考）：标题0-20；正文20-50；注释60-80；深色背景B值控制范围（参考）：标题100-90；正文90-70；注释70-30。 ## 行高与间距 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * # Week 7 版式设计 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/123157_a1a9ab24_2237359.png "屏幕截图.png") # 平面中的版式与用户界面中的版式区别在哪里？ ### 内容的不确定性 比如标题可能出现两行也有可能一行，可能特别长也可能特别空，那么版式就需要为一些边缘情况做容错处理。而平面设计中的版式则相对内容固定 ### 长时间停留 平面设计中用户不会长时间浏览，海报、卡片或者包装设计一般都是为了让用户在短时间内获取到主要信息 而用户在使用APP时更多的是长时间停留，比如用户使用业务类产品购物时也需要大批量浏览然后挑选合适的商品，使用内容类产品看新闻或者段子时甚至平均停留时长达7分钟以上，所以用户界面设计中的版式相对规整、耐看 ### 阅读效率 平面设计的产品一般相对独立，比如单张海报或者单个商品折页，其内容相对固定，比如海报可以单页面大面积留白来凸显格调 然而对于用户界面来讲每一个页面的存在都是为了完善一个交互流程，并且在批量获取信息时，如果太过形式感会让用户的阅读效率出现问题，所以用户界面设计的版式较为紧凑、易读 ### 信息层级多样性 一个产品内需要传递给用户的信息越多，信息层级随之也较为多样性，如果同一个页面中不同表意的信息版式层级相同就容易提高用户的误操作的几率，并且多样的层级需要使用各种不用的版式技巧将其呈现出对比而保持页面的整体统一性，所以用户界面设计中的版式较为多样、有规律 * * * * * * * * * * * * # 版面设计特性 ## 亲密性 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/124710_0ad8310b_2237359.png "屏幕截图.png") ## 对齐 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/132036_975191d8_2237359.png "屏幕截图.png") ## 重复 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/132148_1f478250_2237359.png "屏幕截图.png") ![](https://images.gitee.com/uploads/images/2020/0502/132247_4b471c21_2237359.png "屏幕截图.png") ## 对比 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/132333_46e12c47_2237359.png "屏幕截图.png") # APP界面布局 ### 卡 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/132519_954b8184_2237359.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/132629_712a1ae9_2237359.png "屏幕截图.png") ### 线 * 内嵌式 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/132946_29391ed4_2237359.png "屏幕截图.png") * 贯穿式 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/132930_162fab5a_2237359.png "屏幕截图.png") **采用内嵌式分割线比较适合划分有关联性的内容，提高浏览效率；同时前提要处理好“线”的间距、颜色、粗细等问题** ### 间距、无框 **间距、无边框设计适合的场景：大图为主、内容有规律、小众且垂直产品** * 大图为主 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/134048_d69f1393_2237359.png "屏幕截图.png") * 内容有规律 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/134128_c6474628_2237359.png "屏幕截图.png") * 小众且垂直产品 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/134211_6b4e552c_2237359.png "屏幕截图.png") * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * # week 8 图像 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/134616_7a6f3ddf_2237359.png "屏幕截图.png") ``` 图像类别： 摄影图片、符号、视频、数据可视化、插画、互动图表、动画、地图、LOGO、图案纹理渐变和背景、图标 ``` ## 图片 **要求：提高图片的质量、图片的真实还原、图片比例、内圆角与外圆角的处理、图片投影的设置** * 图片比例1:1（常用于：产品展示、头像、特写展示等场景，电商类产品中尤为常见） ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/135037_ab1c7b42_2237359.png "屏幕截图.png") * 图片比例4:3（由于移动端容量较小，作为全屏展示时，该比例在产品设计布局上面占用空间较大，通常我们作为分栏来进行界面布局） ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/135321_f1f4fe95_2237359.png "屏幕截图.png") * 图片比例16:9（运用于娱乐类产品设计中-腾讯视频、网易云音乐等） ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/135423_5349e97c_2237359.png "屏幕截图.png") * 图片比例16:10（黄金比例） ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/135507_cba06e5b_2237359.png "屏幕截图.png") * 图片比例x≤Y（瀑布流设计-宽度固定，高度在最大值之间自定义） ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/135615_efef5968_2237359.png "屏幕截图.png") * 圆角（设置的圆角数值由卡片外圆角数值减去他们之间的间隙数值，如果算出来的数值为负数的情况，原理上图片不做圆角值设计也是可以的） ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/135904_b09eaed3_2237359.png "屏幕截图.png") * 投影（在相同投影参数设置的前提下，浅色风格的图片会显得投影重，深色风格的图片会显得投影淡） ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/140104_09114ef8_2237359.png "屏幕截图.png") ``` 免版权图库： pexels：http://www.pexel.scom Foter:http://foter.com unsplash: http://unsplash.com barn images: http://barnimages.com visual hunt: http://visualhunt.com pixabay: http://pixabay.com stock snap: http://stocksnap.io picjumbo: http://picjumbo.com free images: http://cn.freeimages.com ``` ## LOGO-设计原则 ``` 检测LOGO可用性：http://logolab.app/lab ``` * 先了解产品背景，提取出关键词 * 尽可能的脑暴不同形式的LOGO，筛选最巧妙的符合产品定位的方案 ``` a.产品名字的首字母/一个字 b.产品全称 c.体现产品核心功能的图形/符号（某一物品mobike单车） d.产品名称的形象（动物） ``` * 确定合适的表现手法 （手法：极简风、格式塔（自动脑补）、渐变色、同色系风格、投影、拟人/拟物、） * 根据产品属性及用户群体，定义配色 * 打磨LOGO细节 ## 图标-icon ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/141854_770da7b7_2237359.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/141906_fc4d7877_2237359.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/141921_fdae5351_2237359.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/141927_1584caa8_2237359.png "屏幕截图.png") ## 图标 * 拥有一致的特征 * 一致的风格 * 彩色平面图标 * 一致的圆角角度 * 一致的线条粗细 * 一致的特征断线 * 双色拼接、色彩叠加 ``` 实心图标（面性图标-选中）和空心图标（线性图标-未选中） ![输入图片说明](https://images.gitee.com/uploads/images/2020/0502/142842_7643f2d7_2237359.png "屏幕截图.png") 面性图标：强调页面视觉中心，视觉表现力强，承载的信息相对更重，即选中状态 线性图标：识别起来比面性更显吃力，线性装饰性更强，不干扰重要内容 icon图标网站： iconfont: www.iconfont.cn flaticon: www.flaticon.com iconmonstr: iconmonstr.com iosicongallery: iosicongallery.com ``` ## 插画 ``` 免费商用可自定义颜色的矢量插画图库 illustration gallery： https://gallery.manypixels.co/ ``` * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * # Week 9 期中互评 * 期中项目-MIWI * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * # Week 10 产品体验日记 ## 导师推荐‘模块’ ![输入图片说明](https://images.gitee.com/uploads/images/2020/0523/155144_c86fdda7_2237359.jpeg "老师推荐.jpg") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0523/155153_f7f4ed13_2237359.jpeg "老师推荐1.jpg") # week11 栅格 **栅格系统的基础元素：屏幕总宽度、列数、列宽、水槽、安全边距、内容区域** ![输入图片说明](https://images.gitee.com/uploads/images/2020/0604/092945_1348961f_2237359.png "屏幕截图.png") ### 水槽：列与列、行与行之间的间距，水槽宽度决定布局的间距，水槽不能放置内容 ### 内容区：栅格宽度是需要栅格设计区域的宽度，不是显示器宽度；例如网页尺寸设定为960、1280、1440等常规尺寸，各种电商主要以960居多，移动端主要以375、750/1280等常规设计尺寸。 ### 屏幕安全边距：栅格外的屏幕边缘内容，这里是内容的边距留白，不可放置内容，是水槽宽度的1/2。 ### 列=小列+水槽。比如屏幕总宽度为a，被分为n列。就可以计算出小列和水槽的宽度，列数n越多，那么排布在版面内的内容就越精细，通过控制列数，就可以控制版面的留白和呼吸感，列的数量越多，页面就会被分割的越‘碎’，在页面设计时就会难把控，适用于业务信息量大、信息分组较多。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0604/094035_db4e1885_2237359.png "屏幕截图.png") ### 模块：建立好基础栅格后，一块内容通常会占用几个栏和列的宽度，我们把这个区域理解为模块 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0604/094333_aea6d823_2237359.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0604/094346_e31dc6c8_2237359.png "屏幕截图.png") ## 应用准则 ``` 1.栅格系统的核心思想是内容元素必须位于若干列上 2.水槽内禁止放任何内容元素 3.父级元素对齐栅格，子级元素可以不完全对齐列 4.除非特意设计，否则不要把列之外区域放置元素 5.特殊的设计风格，可以有例外规章（如：完全出血的设计形态） ``` ## 8px原则 **栅格系统中最小单位是界面的网格单位基础-8px** ![输入图片说明](https://images.gitee.com/uploads/images/2020/0604/095420_0c63f53e_2237359.png "屏幕截图.png") ## 边距与间距 ### 全局边距 * 页面到内哦荣屏幕边缘的距离 ``` 全局边距规则： 移动设备常用12px-40px中间 例如：ios原生态页面 ‘设置’和‘通用’页面使用30px边距；微信和支付宝分别使用20px和24px 通常左右边距最小为20px，30px是非常舒服的距离，是绝大多数应用的首选边距 ``` ### 卡片边距 * 卡片与卡片之间的距离的设置需要根据界面的风格以及卡片承载信息的多少来界定，通常最小不低于**16px**，使用最多的是**20px、24px、30px、40px** ## 在UI设计中为什么要做栅格系统？ ``` 1.设计内容都应该有所依据：商业设计时逻辑性解决问题的设计方式。通过栅格化的使用，能有理有据的阐述自己的设计，界面中的尺寸细节问题就能完美的解释了 2.响应化：多设备环境迫使设计人员根据动态网格系统进行思考，而不是固定宽度。使用网格可以跨不同屏幕尺寸的多个设备创建连贯的体验 3.团队协作：设计师除了本身的视觉工作外，还需要跟进对接开发，对是否落地、实现方式、实现的规范性、复用性的高低、性价比是否合适，这些问题都是现实存在的，而栅格化设计方式可以间接的推动和解决这些问题 4.设计师可以利用栅格让页面更加有条理性：让内容可读性变高，快速校准元素在界面的位置，让界面更加稳定平衡，让版面更加有层次感、模块化的管理元素 ``` ## 建立栅格系统 W：内容区总宽度；C：列宽；a:每个栅格宽度；n：列数；i：间距 W = （a x n）+（n - 1）i 由于a+i=A 可得：（A x n）-i = W ``` 如果设置了宽度是1200px，间距是20px，则页面的内容宽度是1180px。如果需要12等分，则1180px=（12*80+20*（12-1）），每个栅格的宽度是80px。12列的栅格满足大部分比例关系，而且设置间隔（水槽）为20px，12等分、16等分、20等分的网格，每一列都是整数。 ``` * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * # week 12 设计稿规范 ## px、pt、倍率 * 物理像素：图像的1像素=设备的1像素。一台分辨率1920*1080px的显示屏，表示水平方向分布着1920个像素点（发光点），垂直方向分布着1080个像素点（发光点） - （在硬件层面构成了液晶屏幕） * 逻辑像素：控制屏幕内容显示的多寡（在软件层面构成了画面图像倍率） * ppi（图像分辨率）：每英寸的像素点，常用于显示器设备 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0608/173823_d1a8ad19_2237359.png "屏幕截图.png") * dpi（打印分辨率）：每英寸多少点，常用于打印设备。1dpi表示打印设备上每英寸分布着1个打印点 * 倍率 = 物理像素/逻辑像素 （@1、@2、@3等表示） ![输入图片说明](https://images.gitee.com/uploads/images/2020/0608/174217_e324be3e_2237359.png "屏幕截图.png") ## 切图 略 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *