# user and visual interface design **Repository Path**: ewvue/user-and-visual-interface-design ## Basic Information - **Project Name**: user and visual interface design - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-03-29 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 用户与视觉界面设计Week_01 * 控制用户情绪 抓住需求点 界面要舒适（简洁） Eg：美亚的一种购物方式Prime Pantry 运费不变纸箱上会显示百分之几 增加用户购买欲望 * 用户界面设计&用户体验设计： 提到用户体验设计师，首先要说一说什么是用户体验设计，“用户体验设计”（User Experience Design）是个广义说法，可以包括各种设计：UI（用户界面）、交互（Interaction）、视觉、听觉、甚至工业设计等等，所以通常UI、交互设计师也称之为广义上的用户体验设计师，但在技能及个要素质上，用户体验设计师又高于UI、交互设计师的标准。 用户界面设计师简称UID（User Interface Designer），指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。可分为两个发展方向，一个是界面视觉设计，一个是界面交互设计。创建可识别的图像、艺术的外观，充分利用所相关的显示媒体，形象地表达功能、确保视觉一致性、合理有效地对界面布局。 总的来说 感觉用户体验设计包含用户界面设计 * 用户体验是让用户停留的关键所在 * 新闻类app 用户是老年人 结构： 1.字体、控件调试到适合老年人观看大小 2.图片清晰 做到一目了然 3.排版、功能单一 做到简单易操作 内容： 1.文字易懂 减少专业词汇或是网红词汇的摄入 减少阅读障屏障 2.语音播报 增加多项方言翻译功能 3.增加提醒框 提醒当前阅读进度 * 自学软件：1.ps Ai2.Axure3.XD ## 用户与视觉界面设计Week_02 * 一个东西的Affordance(功能可见性) = 人们觉得怎么用（用户接收） + 东西本身功能属性（设计者定义） * 心智模型 （后天经验） + 限制因素[结构（图片字体距离） 含义（滚动图标） 文化（语言选择） 逻辑（高亮字体按钮）] = 刚刚好 * 好的设计不需要强调流程 让用户自然而然操作 Without thought 无意识设计或者直觉设计 * 控件：无害的 不费劲的 有反馈的 愉悦的（可用的 易用的 吸引的） * 触发操作 数据录入 信息展示 容器 导航 [微软控件](https://docs.microsoft.com/zh-cn/windows/win32/uxguide/controls) * HW：[AI控件设计小白](https://gitee.com/ewvue/user-and-visual-interface-design/blob/master/AI%E6%8E%A7%E4%BB%B6%E5%B0%8F%E7%99%BD%E8%AE%BE%E8%AE%A1.md) ## 用户与视觉界面设计Week_03 * **格式塔** 人对事物的感知，不是各元素感觉的简单相加的总和，而是直接把事物感知为完整的统一体。【1.相近性（留白） 2.相似性（颜色>大小>形状）3.闭合性（卡片式进行规则化闭合）4.连续性 5.对称性 6.焦点性 7.共同命运性】 * **尼尔森十大原则** material design 运动轨迹让用户感知 1.系统状态的可见性（app下载状态） 2.不脱离现实（用简单语言表述） 3.用户的自由与控制权（控件表述需清晰） 4.一致性原则（语言功能操作…） 5.帮助用户发现、诊断和纠正错误 6.预防用户出错（有提醒事宜） 7.帮助用户识别而非回忆（减少记忆负担） 8.灵活性和使用效率 9.美观和极简 （dribbbli网站） 10.帮助和说明文档 * HW：[小绒宠物界面分析](https://gitee.com/ewvue/user-and-visual-interface-design/blob/master/%E5%B0%8F%E7%BB%92%E5%AE%A0%E7%89%A9%E7%95%8C%E9%9D%A2%E5%88%86%E6%9E%90.md) ## 用户与视觉界面设计Week_04 * 单一界面标准能够提高产出和减少错误，改善用户学习界面的能力和提高生产率。（用户体感更好，研发成本降低。） * 一致性：[谷歌设计](http://www.woshipm.com/pd/98160.html) 1.**平台一致性和内部产品**的一致性： 让产品与所在的平台规范尽量保持一致。在你公司的不同产品或服务之间维持一个普遍的样子或感觉。传播你的品牌可以使你的其他产品更快更容易被用户接受。 2.**系列产品**的一致性：比如谷歌图标 ![谷歌图标](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E8%B0%B7%E6%AD%8C%E5%9B%BE%E6%A0%87.png) 3.**应用的欢迎屏，首页等设计元素的总体**的视觉一致性： 视觉设计师应该建立一个有目的的经过思考的视觉语言，并通过可用性测试。用户的行为应该能在不同的版本的产品之间一致。 4.**小的可见的结构元素一致性**，比如icons，按钮，滚动条等。 5.**不可见的产品元素**的一致性： 其他地方有见过的属性按钮的出现保证一致性。 ## 用户与视觉界面设计Week_05（配色） |HSB|RGB|CMYK| |--|--|--| |HSB色（心理色彩）就是由这种模式而来的，比起RGB颜色模式它使用了更贴近人感官直觉的方式来描述色彩，它把颜色分为色相（Hue）、饱和度（Saturation）以及亮度（Brightness）三个因素。|RGB（光学色彩）是色光的色彩模式。R代表红色，G代表绿色，B代表蓝色，三种色彩叠加形成了其它的色彩。因为三种颜色都有256个亮度水平级，所以三种色彩叠加就形成1670万种颜色了。也就是真彩色，通过它们足以在现绚丽的世界。| CMYK（印刷色彩）是基于印刷的色彩模式，C为cyan的英文缩写，即青色，M为Magenta的缩写，即洋红，Y为Yellow的英文缩写，即黄色，K为 black的英文缩写，即黑色，这里选K而不是B，主要是为了区别于蓝色blue。 CMYK色彩模式采用减色混色原理，因为它描述的是需要使用何种油墨，通过光的反射显示出颜色。它是在一种白色介质(画板,页面等)上使用油墨来体现图像。| * 色彩规律+使用场景+配色目标=产品配色 |产品界面 | 推广设计 | |--|--| |1.传递信息 2.引导操作 3.品牌价值 （清晰 舒适 引导 品牌感）|1.吸引流量 2.营造氛围 3.快速传递（吸引力 氛围 快速传递） | ![](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E4%BA%A7%E5%93%81%E7%95%8C%E9%9D%A2%20%E6%8E%A8%E5%B9%BF%E8%AE%BE%E8%AE%A1.png) * 配色法则：主色与辅色 60：30：10 * [如何正确地打开配色方式？](http://www.woshipm.com/pd/2530687.html) * **色不过三** 一个界面中的主要色彩不要超过三种，表达出主题即可，不管是做平面还是做网页和APP，都要遵循这个最简单的道理。这个是指不要超过三种色相的搭配。在单个色相中可以运用颜色明度或者饱和度做色彩的丰富性，而这种不要超过三种。 三色搭配，要控制在不超过三种颜色的色相范围即可，运用单色的设计，会显得单调乏味，而整体颜色饱和度过高会显得界面杂乱无章而不透气，因此我们在设计的时候要把控好颜色的数量，通过颜色的把控让我们的界面主次分明。 * **确定主色** 好的色彩搭配同时还需要符合产品的特征和想要给用户带来的氛围，比如蓝色能给人带来平静，因此大部分的阅读和学习类的主色调用的是蓝色。 ![主色风格](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E4%B8%BB%E8%89%B2%E9%A3%8E%E6%A0%BC.jpg) * **色盘里寻找灵感** 解决了主色调的问题，在界面需要搭配其他辅助颜色的时候，如何搭配也是个很大的问题，要怎么搭配才能好看又平衡呢？我们可以从色盘里寻找灵感。 ![色卡](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E8%89%B2%E7%9B%98.jpg) |互补色搭配|冷暖色搭配|深浅色搭配| |--|--|--| |![](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E4%BA%92%E8%A1%A5%E8%89%B2.jpg)|![](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E5%86%B7%E6%9A%96%E8%89%B2.jpg)|![](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E6%B7%B1%E6%B5%85%E8%89%B2.jpg)| * 总结： 明确配色目标 确定主色精简明确 创新颜色搭配 提升质感（投影 渐变色 …参考Apple） * 配色网站： 1.[mycolor.space](https://mycolor.space/) 2.[colorhunt](https://colorhunt.co/) 3.[coolhue](https://webkul.github.io/coolhue/) * [产品配色风格探讨：UI设计中“黑”与“白” ](http://www.woshipm.com/pd/646602.html) * **明确定位产品的目标** 1.产品的存在意义就在于可以**满足用户的特定需求**。比如美食外卖类app解决了用户希望足不出户又同时享有美食的需求；微信则解决了用户在相隔万里却又想亲密沟通彼此的交流需求；微博满足了平凡的用户同明星在同一个平台却也可以享有明星般关注的社交心理需求。我们产品的**核心价值**就是为用户解决特定的需求，也可以理解为产品的核心竞争力就是满足用户的特定需求。 反过来说，如果你的产品需要在视觉上做到具有很强的吸引力，那么深色调背景更加适合。因为深色调背景虽然显得很厚重，但是因为其吸收了页面中其他元素的光，更有利于其表现非文字形式的内容。因为产品的内容不仅仅只和文字相关，还有图标、图像、符号和数字等都属于内容的范畴。此外，深色背景会给产品营造出一种特有的神秘感和奢华感，可以从更加深的层次来反映内容。 * **定义和分析目标用户群** 知道你的用户将会是哪些人，了解他们期望从你的产品中获得什么，这会对你接下来产品的界面风格定位有一个大方向上的指导。中老年用户喜欢浅色背景的界面，因为内容更加的直观，导航清晰。年轻人更倾向于深色背景的界面，因为其更加的自然与时尚。而青少年用户对于欢快明亮界面是没有任何抵抗力的，一些有趣的细节设置也可以很好的吸引低年龄段用户的关注。 * **调研竞争对手** 市场上不是只有你这一款产品，你必须要面对许多同类型产品的竞争。所以我们要对市场上同类型的产品进行调研，通过调研我们可以知道哪些设计方案已经被竞争者所使用，我们应该放弃。否则最坏的结果就是，等到产品已经进入了测试阶段，即将上线，你才发现市场上已经有了一个极其类似的产品。所以说对市场进行调研在产品研发早期阶段就可以放弃一些过时无用的设计方案，避免无用功。 ## 用户与视觉界面设计Week_06 * 衬线字体和非衬线字体 ![衬线字体和非衬线字体](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E8%A1%AC%E7%BA%BF%E5%AD%97%E4%BD%93%E4%B8%8E%E6%97%A0%E8%A1%AC%E7%BA%BF%E5%AD%97%E4%BD%93.png) * [Apple字体](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography) 旧金山（SF）。旧金山是一个无衬线类型的系列，;纽约（NY）。纽约是一种衬线字体，提供独特的色调以补充SF字体. * [Google字体](https://www.mdui.org/design/style/typography.html#) * 什么是[字重](https://baijiahao.baidu.com/s?id=1620913765031329013&wfr=spider&for=pc) 我们经常都会看到很多字体带着如：思源黑体regular、思源黑体light、思源黑体heavy、思源黑体W1、思源黑体W2、思源黑体W3、思源黑体W4、思源黑体bold......等等这些字体的后缀名，而这些后缀名就是字体的字重。 * [UI 文字应用指南](https://zhuanlan.zhihu.com/p/85598607) **文字属性-字号 FontSize** 文字的字号，即文字的大小数值，通常使用 pt 作为字号的单位 （安卓是 sp 但是只是称呼的不同）。相信大家还记得小时候学写字时写的田字格，在界面的文字显示中，每个独立的文字实际上都由一个 “田字格” 正方形包裹，字号即这个正方形的边长。 ![字号01](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/字号01.jpg) 因为文字的一些特性，这个矩形通常会比实际的文字图形更高更宽，比如中文 “一” 它的字形高度肯定不会和字号等同，而英文字母不是等宽的比如 “i” 和 “m”，字号就是——比文字更大的矩形容器的高度值。 字号的设置需要根据实际场景决定，但首先要了解它在界面中的限制。在中文中，字号如果小于10pt，那么就会因为太小无法被正常识别，而英文和数字的最小字号约为 9pt。最大的字号通常为iOS 的大标题 34pt，如果是类似闹钟、计数等大号文字，则根据设计风格制定。 **文字属性-字重 FontWeight** 字重是文字笔画粗细的设定，因为在排版中，不同的字段类型对字重的要求不同，比如标题往往需要比较粗的笔画，注释文字需要比较细的笔画等等，所以我们要通过更改字体字重的方式来实现。 ![字重01](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/字重01.jpg) 绝大多数人对字重更改的理解都来自学习 Office Word 的 “B” 加粗按钮。但在 UI 设计软件中，这个加粗按钮并不存在，且加粗也不是真正的字重调节。加粗按钮 “B“ 只是对当前字体进行类似描边的轮廓放大渲染，效果非常粗糙。 软件都有为字体提供字重调节的菜单，只要点击就可以查看和选择对应的字重。如果选项中只有一个，那么证明该字体并没有包含其它字重，无法进行更改。当然，主流的 UI 设计字体都会包含丰富的字重，不用担心想要的效果找不到。 常见的字重通常分为三个等级，粗 (Blod)、常规 (Regular)、细 (Light)，如果字重较为丰富的字体则会在每个等级中包含更丰富的字重。例如，苹方字体中，从细到粗包含了极细、纤细、细体、常规体、中黑体、中粗体等七种。 **文字的应用实例- 字色应用** 面向所有色彩的情况先不谈，先从白和黑两种背景色系开始讲起。在调色板中，我们都可以将色彩数值模式调节成 HSB，而 B 值（灰度）就是我们来控制字色的关键属性。 ![字色01](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/字色01.jpg) 在 HS 值为 0 的时候，B 值越高颜色越亮，100 为纯白，0 为纯黑。在不同背景下它们的显示效果。 ![字色02](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/字色02.jpg) 在面向浅色和深色背景中，我们可以将 B 值控制在以下范围内： | |标题|正文|注释| |--|--|--|--| 白色背景| 0-20|0-20|60-80| 深色背景|100-90|90-70|70-30| **文字排版步骤** 1.先在原型阶段（开始设置细节前），将所有文字内容填充到画布中去。这么做的目的是在调节细节前能对整体有一个宏观的认识，否则我们无法对文字的角色作出定义。 2.开始对页面的角色权重和定位做出梳理，构建文字的层级关系，例如下方的列表。这么看做起来是挺麻烦的，但如果对文字本身权重的考虑已经适应以后，是不需要再额外记录的，直接上手即可。 | | | |-|-| |**大标题**|商家名| |**次标题**|模块名称| |**正文**|主介绍文字| |**次文本**|简介、价格| |**注释**|演出时间、地址、电话| 3.有了对应角色的定义以后，就可以开始下一步，为它们分配字重、字号和基础字色了。大标题使用 18pt 的中粗体，次标题使用 16pt 的中粗体，正文使用 14pt 的常规体，次文本使用 12pt 常规体，注释也使用 12pt 的常规题。然后为他们分别分配 B 值为 10、10、40、40、60 的灰度，这样字体就具备了初级的层次感。 4.只依靠灰度值是不足以满足真实界面设计需要的，所以这个过程中，我们要对一些比较特殊的文字类型使用一些其它色相进行突出。例如标题下方的小字用赭石色，地址和电话这些可以点击的文字使用主色绿色（根据其它页面设计用过的色彩，因地制宜了），进一步丰富了文字的展示样式。 5.到这里，当然还没结束，前面花了大篇幅讲的文本区域与行高，这时候就要隆重登场了！故意留到后面再讲，是因为对于新手来说，先做样式再排版会比较友好一点，等到适应以后就不用在意顺序了。文本的设置难题主要来自于行高的制定，我们前面已经说过，最稳妥的做法就是为所有文本设置可以直接支持合理多行显示的行高。比如简介和详细介绍部分的文字，行高明显需要我们做出调整。简介使用 20pt 行高，介绍使用 26pt 行高，且因为是多段文字设置段间距为 10pt。 6.除了这种显而易见的多行文本以外，再看商家名大标题，实际上这个区域是支持两行显示的，虽然我们只做了一行，所以我们也要为它设置对应多行的行高，这样这个字体无论在任何情况下都可以正常显示。 ## 用户与视觉界面设计Week_07 * 版式设计的[四大基本原则](https://www.sohu.com/a/390056268_675996)分别是：对比、重复、对齐、亲密性 ![设计四大基本原则](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E6%8E%92%E7%89%88%E5%9B%9B%E5%A4%A7%E5%9F%BA%E6%9C%AC%E5%8E%9F%E5%88%99.jpg) * **亲密性（proximity）** 亲密性原则是：将相关的项组织在一起，移动这些项，使它们的物理位置相互靠近，这样一来，相关的项将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。 举个栗子：当你在琳琅满目的超市闲逛，首先寻找你所需物品的分类区域。当你需要一支牙刷时，应当前往生活区，然后再在生活区中寻找洗漱用品专柜，接着再寻找牙刷货架…… 这就是你脑海中自动浮现出的亲密性原则，它可以是以类别、色彩、功能等进行归类整理组块。生活区为标题，洗漱用品专柜为子标题，而牙刷货架则为内容。这是生活中对于某些选择大脑以亲密性原则来进行目的筛选。 * **对齐（alignment）** 对齐原则是指：任何元素都不能在页面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。 对联要对仗工整，诗词歌赋也以各自的规律著作等。对齐可以制造出一个安静的中心，它的表达则更清晰。 * **重复（Repetition）** 重复原则是指：设计的某些方面需要在整个作品中重复。重复元素可能是一种粗体字、一条粗线、某个项目元素、颜色、设计要素、某种格式、空间关系等。 每四年一次的奥运会开幕式中，我们都能够看到各国代表队的穿着各有特色，如此一来，便能够从他们的穿着得知是哪个国家。重复原则在生活中我们经常运用，为了清晰和统一，从而进行区分。 重复并不表示必须重复完全一致的元素。在上方的图片中，每页元素都不同，但他们的配色一致，构图一致，元素一致，字体大小与排版一致，因而显得统一，规范。重复原则还会给作品一种专业性和权威性，它是经过深思熟虑的设计决策。 * **对比（Contrast）** 对比原则：页面上的不同元素之间要有对比效果，达到吸引读者的对比效果。对比是为页面增加视觉效果最有效的途径，也是在不同元素之间建立一种有组织的层次结构中最有效方法。要实现有效的对比，对比就必须强烈。如果两个项不完全相同，就应当使之不同。 对比不仅可以用来吸引眼球，还可以用来组织信息、清晰层级、在页面上指引读者，并且制造焦点。 相信你们在阅读的时候，发现为将文章中重点的内容用了一种粗体来进行区分。这样阅读起来是不是会更容易吸引阅读，更容易阅读。 * [平面中的版式与用户界面中的版式区别在哪里？](http://www.yidianzixun.com/article/0KMm5K4D?s=&appid=)页面布局及其作用 * [界面布局样式]((https://www.sohu.com/a/241127300_612927)):分以下三种 * **卡片式设计** 利用「卡」设计界面，对应的是现在流行的「卡片式设计」，比如：APP Store 的 Today 页面。 | |title|image| |--|--|--| |灵活性|Instagram的「推荐用户」模块，知乎的「知乎书店」模块，微博的「问答」模块，都利用了可以横向滑动的卡片设计，打破了订阅流信息垂直展示的限制，从而展示更多的信息|![灵活性](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E7%81%B5%E6%B4%BB%E6%80%A7.jpeg)| |信息区分|这三个「个人中心」的设计，都利用卡片设计，对不同类型的信息进行了区分和归整。|![信息区分](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/信息区分.jpeg)| |操作性和趣味性|卡片是一种模拟物理世界的设计形式，拥有可操作隐喻，可以被覆盖、堆叠、移动、划去。|![信息区分](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/操作性和趣味性.jpeg )| * **分割线** ||title|image| |--|--|--| |贯穿式|是指，线长度贯穿屏幕，左右边距为零。贯穿式分割线可以让被分割的信息的独立性变强。|![信息区分](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/贯穿式.jpeg )| |内嵌式|是指，线的左右边距留有空隙。内嵌式分割线，可以有助于信息阅读的流畅性。|![内嵌式](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/内嵌式.jpeg )| * **无框设计** 利用「间距」设计界面，对应的是现在流行的「无框设计」，不用分割线，纯粹用间距实现信息的排版。 ||title|image| |--|--|--| |图片为主|示例如下：分别是 Instagram，爱彼迎，红板报的界面截图。这些页面中，均以图片为主。图片本身的边缘具备分隔作用。|![图片为主](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/图片为主.jpeg )| |内容少且有规律|分类页只有一种板式，并横向排版展示。类别首页只有一屏信息。|![内嵌式](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/%E5%86%85%E5%AE%B9%E5%B0%91%E4%B8%94%E8%A7%84%E5%BE%8B.jpeg)| ## 用户与视觉界面设计Week_07 * [图片比例](https://www.uisdc.com/picture-design-guide) |scale|title|image| |--|--|--| |**1:1**强调主体的存在感|是比较常见的一种设计比例，利用此长宽比更容易将构图归整得简单，突出**主体的存在感**。常用于产品展示、头像、特写展示等场景，在电商类产品中尤为常见，如：淘宝、网易严选、网易考拉等。|![1:1](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/1：1.jpg)| |**4:3** 图像紧凑、更易构图|可以使图像更紧凑，更易构图，方便设计师进行发挥。由于手机屏幕容量较小，作为全屏展示时，该比例在产品设计布局上面占用空间较大，通常我们作为**分栏来进行界面布局。**|![4:3](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/4：3.jpg)| |**16:9**电影场景般的效果图|可以呈现电影场景般的效果，多用于横向构图，是应用非常广泛的尺寸比例之一，能给用户一种视野开阔的体验。在很多**影视娱乐类产品设计**中运用广泛，如腾讯视频、网易云音乐等。|![16:9](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/16：9.jpg)| |**16:10**拥抱黄金比例|黄金比例就像**金字塔上的明珠**，越接近她越有魅力，16:10的图片比例最为接近。设计没有绝对的标准，我们可以遵循一些优秀的规则，但是也要敢于突破规则，尝试更多的可能性。|![16:10](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/16：10.jpg)| |**X:≤Y**瀑布流设计|代表宽度固定，高度在最大值之间自定义的瀑布流设计，在一些用户没有很明确的目的，只是**喜欢获取尽量多的信息的情况**下采用这种设计方式。X:≤Y的图片比例要注意高度的控制，最大值不要超出屏幕可显示区域的范围。|![16:10](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/X：《Y.jpg)| * [**logo设计**](https://www.sohu.com/a/151796786_99914024) * 1.**提取关键词** 在接到LOGO设计需求时，首先要跟需求方沟通并确认，能够达成共识的设计关键词。方面提取。 * 2.**头脑风爆LOGO形式** ![logo来源](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/logo%E6%9D%A5%E6%BA%90.gif) ||title|image| |--|--|--| |a.产品名字的首字母|一个字一个文字或者一个首字母作为LOGO主元素的优点是：能够准确地表达APP的应用属性及其核心业务，更简单实用，易于推广。|![产品名字](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/文字做logo.jpg)| |b.产品全称LOGO也可以是产品名字的全称|优点是：简单粗暴，加深用户对产品名称的记忆，不需要对抽象符号二次加工。|![产品全称](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/产品全称.jpg)| |c.体现产品核心功能的图形／符号|以体现产品核心功能的图形为LOGO主要元素，优点是：用户第一次使用时，通过图形能够预判这个产品是干嘛的。d.产品名称的形象|![产品核心功能](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/产品核心功能.jpg)| |d.产品名称的形象|每一个LOGO的背后都有自己的故事和原因，而不是拍脑袋得出的方案。|![产品名称的形象](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/产品名称的形象.jpg)| * 3.**确认配色** 颜色对于一个LOGO来说也相当重要，它承载着针对**用户群体的情感传递，以及品牌认知**。设计师在LOGO配色环节围绕着前期确认的设计关键词进行，会使自己的设计更有说服力。而不是根据个人喜好去定义LOGO的颜色。 * 4.**打磨细节** 确定了LOGO的形式和配色后，接下来就应该“陷入细节”了。LOGO巧妙的**细节处理，会让人对他们的产品提升好感度**。 在LOGO设计中，常用的协助精确图形轮廓和细节的工具，是黄金比例。从公元前的古希腊，黄金比例就开始被广泛应用，无论雕像和建筑，而记载资料中最早应用这个比例的人是古希腊学者建筑家维特鲁威。现在这种方式更多的运用到LOGO设计，版式设计或者工业产品设计上。 ![打磨细节](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/打磨细节.jpg) * [图标风格](https://www.ui.cn/detail/522092.html) ||title|image| |--|--|--| |面性图标|稳定、安全、**分量感**、体量较重使用时需考虑信息层级与其他元素的体量比例请登录后查看原图|![面性图标](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/面性图标.png)| |线性图标|轻盈、连贯、优雅、体量轻常用语整体气质偏有人**简洁**页面，但不宜大面使用，可能会造成页面的轻浮，没有重心的感觉。|![线性图标](https://gitee.com/ewvue/user-and-visual-interface-design/raw/master/img/线性图标.png)| ## 用户与视觉界面设计Week_11 * **网格系统** 包含了**水平和垂直方向的参考线**，用来合理排列内容。 最基本的网格系统由一系列水平和垂直的、彼此交叉参考线构成，这些格线让**内容布局变得简单起来，让内容更具可读性。** 网格系统在纸媒中广泛应用，有着悠长的历史，引入到网页设计后，出现了很多CSS网格框架，几乎成了网页设计的标准。 利用网格系统可以更好的驾驭内容，保持一致性。**均匀化的布局，一致性自然就有了**，这样导航功能就能更易于使用，好的用户体验也有了。——当然你也可以打破网格系统，用更好的布局取而代之，也可从网格系统中衍生出自己的布局方式。 ![栅格系统](https://images.gitee.com/uploads/images/2020/0525/164842_4184e4d6_2229685.jpeg) [科普一下960px网格系统](http://960.gs/) , 也称 960栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局. 。该无疑是非常好的网格系统, 因为相当灵活. 它帮助网页设计者快速地构造以下栏栅数目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用。如新浪、网易、搜狐等。 使用栅格系统让页面看上去更加舒适也有条理性，最重要的是它给整个页面结构定义了一个标准更有设计感。 ![栅格系统原理](https://images.gitee.com/uploads/images/2020/0525/164842_0466ee7d_2229685.png) ||网格系统| |--|--| |优点|设计、开发、管理网站都用得到。网格系统的好处之一是，允许按比例设计，可以组织不同元素之间的**平衡感**。网格系统一般都很灵活，这样就可以在需要时自由调整。使用网格系统，让你的设计具有**正式感和规范感**，还具有一种结构分明的**设计感**。这让你设计起来更轻松，对于开发者来说，同样如此。| |缺点|首先，很多人，尤其是对于新手来说——网格系统会**阻碍他们的发挥创造**。如果出现这种状况，我建议你从网格系统中跳出来，用自己的创意去设计，**按照自己的经验来排布元素，然后再切出网格系统，想出一个二者结合的两全其美的办法，稍做调整，如果网格系统和你的原创设计出入过大，不能有效协调，那么建议换一个网格系统**，或者自己设计一个。其次，网格系统用起来比较困难，有一定的学习成本，需要有一定的数学基础，你得懂比例，会计算。对于那些数学不好的人来说，网格系统真的是太复杂了。但是我认为，刚开始虽然比较难以上手，但是习惯之后，你会得心应手，设计也将会更加出彩。| * [布局规范](https://www.sohu.com/a/392047216_114819) ## 用户与视觉界面设计Week_12 ||理解| |--|--| |DPI 是英文 Dots（点） Per Inch 的缩写|在最早的时候，这个单位是用来描述打印机的性能的，意思就是这台打印机最多能用多少个墨点来打印一寸的内容。目前市面上常见的家用黑白打印机普遍都去到了 600*600 dpi 而家用彩色照片打印机则能去到 5760*1440 dpi。DPI 越高，**每英寸内的墨点就越多，你打印出来的东西就会越清晰锐利**。| |PPI 是英文 Pixels Per Inch 的缩写|意味每寸能容纳多少颗像素，用于描述屏幕的像素密度。我们上面提到的印刷物以无数多的墨点来构成图像，而屏幕同样也是以一定数量的发光点来构成图像。见过街上那些走红字的 LED 显示屏么？上面的那一颗颗的 LED 灯就是这块屏幕的发光点，对于屏幕来说 PPI 是用于描述每英寸发光点数量的，**它表明了一块屏幕发光点密度的高低，这些发光点我们更常称之为像素**，一块屏幕宽高有几寸是在生产的时候就被定好的，而宽高各能容纳下多少颗像素，也是在生产的时候就被定好的，所以我们所说的 PPI 可以说是一个物理单位。| #### 总结： * 像素本身没有尺寸，你可以将1920px * 1080px 颗像素放到一台 40 寸的小米电视机里面，也可以将同样多的像素全部塞到一台 5.5 寸的 iPhone7 Plus 手机里面去。 * 只有跟屏幕尺寸一起的时候，谈论像素才有意义，因为我们能够算出该屏幕的 PPI。 * DPI 跟 PPI 虽然概念相近，但是我奉劝你还是不要拿着他们俩混用，虽然可能好多人告诉你这样没啥关系。 * 在设计过程中，我们并不见得真的要去计算各种东西的实际尺寸，但是对于原理的把握能让你心里有个低，或许就是我们常说的“意识”。别以为每个人的屏幕上显示的都会跟你屏幕上显示的是一样的。 ||理解| |--|--| |DP /DiP |是 Device independent Pixel 的缩写，DP 用于安卓系统开发| |PT |是 Point 的缩写， PT 用于 iOS 系统开发。| * [设备屏幕全解：设计师，你不该对你的屏幕一无所知](http://www.woshipm.com/pd/659731.html)