UI设计课程笔记（一）

1、dpi/ppi的含义及计算方式

dpi/ppi又叫分辨率

dpi是dot per inch，每英寸多少点，ppi是 Pixel per inch，每英寸像素数。

dpi是指每英寸像素尺寸(可以反映屏幕清晰度，用于缩放UI)，是对于输出设备而言的比如打印机，印刷品点密度

ppi是每英寸像素数，是显示设备的点密度

针对显示器的设计时，dpi=ppi

ppi算法（原理勾股定理）：长宽平方之和的开方，除以对角线长度（物理尺寸单位英寸）

因为安卓设备屏幕较多，不可能每个屏幕单独开发，安卓选定的基础值是160ppi，所以用公式px=dp*(ppi/160)计算在不同屏幕上的像素数

举例：HVGA屏320*480，一般是3.5寸，计算点密度为√ (320^2 + 480^2) / 3.5 = 164，约等于160，1pd=1px

WVGA屏480*800，按3.8寸屏算，点密度 √ (480^2 + 800^2) / 3.8 = 245，约等于240，1dp=1.5px。

常见的五种分辨率及相应像素尺寸：

1倍：1pt=1dp=1px  dpi=160  (mdpi，即320x480px)

1.5倍：1pt=1dp=1.5px dpi=240(hdpi，即480x800px等)

2倍：1pt=1dp=2px dpi=320(xhdpi，即720x1280px)

3倍：1pt=1dp=3px dpi=480(xxhdpi，即1080x1920px和1440x2560px)

4倍：1pt=1dp=4px  dpi=640(xxxhdpi，即4K(3840×2160)

2、dp/sp/pt/px是屏幕的物理密度

dp（dip）指屏幕的物理密度（安卓的物理密度尺寸单位），可以理解为1/160英寸的长度单位

160dpi的情况下，1px=1dp，也是安卓最小的开发长度单位。

sp是字体的物理尺寸，sp在dp的基础上相关了使用者的偏好，（当设置为标准时，1sp=1dp,当设置为N倍时，1sp=Ndp）

Pt有两种:第一种来自印刷行业，是绝对物理长度单位point1/72inch，约等于0.35毫米。

另一种是iOS最小的开发长度单位，1pt表示屏幕像素点密度为163ppi时，1px长度=1pt，因此pt也有固定的物理尺寸，约0.156毫米。

（iOS的物理密度尺寸单位？）

px是相对单位，真实的像素

3、适配原则

适配原则？一般根据内容交互来设计适配原则。如：icon及图片等比缩放，避免变形。保证头部底部固定状态下能完整显示，中间内容流的信息滑到底部要避免被遮挡。尚未做详细整理

哪些内容可自适应？文字容器宽度可自适应。尚未做详细整理

4、移动端系统默认字体

iOS字体：

中文-苹方

英文-SanFrancisco

安卓字体：

Droid/Roboto字体家族

closkopia系统默认待机时钟字体

5、文件命名

切图文件包规则：

项目名字+切图+作者名字+日期

例如：蚂蚁金服基金3.5.8.5版本迭代-H5页面设计_切图_李某_20210808

文件包括：切图，蓝湖地址/measure切图，切图简单说明（word）

切图文件命名：

一般包含：模块、类别、功能、状态

例如：foot_icon_home_nor.png

文章来源（侵删）：http://www.ui.cn/detail/285750.html

1.黄金比例

蒙娜丽莎和谷歌的logo有什么共同点？人类历史上最具代表性的画作和成立于1998年的科技巨头之间会有什么关联呢？

答案就是，它们都应用了黄金比例，公认的经典比例。从数学角度来说， 黄金比例约等于1.618。

根据维基百科，两数之和与较大数之比等于较大数与较小数之比时，这两数之比为黄金比例。

众所周知，黄金比例是人眼觉得最舒服的比例，这对于艺术家、建筑师和设计师来说十分有用。最直观的展示形式就是黄金矩形，如下图。

诚然，黄金矩形直接出现的情况并不多见，但是黄金比例的应用十分普及。它无处不在，并时刻吸引人们的目光。它是许多logo、字体和界面布局背后的基本原则。

如上图所示，谷歌logo的两个圆周长之比为黄金比例。不只是谷歌，很多公司也使用黄金比例来优化产品界面。

黄金比例是在设计实践中应用最广泛的数学概念，也是数学影响设计的有力证明。

2.斐波那契数列

斐波那契数列由0和1开始，之后的数字是由前两数相加而得。

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…

这个数列是斐波那契式设计的基础，尤其适用于内容复杂的网站布局（如博客或其他线上出版物）。

上图的博客页面虽然简单，但是细节很好。页面内容结构明确，字体大小比例清晰、可读性强，排版布局干脆整洁。这就是斐波那契式设计的一个很好的例子

举例来说， 页面中三列的宽度比例根据斐波那契序数（2，3和8）确定。前两列宽度比例为3：2，后两列为8：3。

还可以使用斐波那契序数来规范字号大小。在这个示例中，页面大标题字号为55px，文章标题字号为34px，内容字号为21px。最终呈现出信息层级清晰、比例和谐美观的效果。

另一种斐波那契数列在设计中的应用是划分页面模块。如下图的矩形，由边长为斐波那契序数的正方形组合而成。

下图是一个非常常见的网页形式，大家应该经常见到，甚至使用过。可以参考FastCompany的网页。

这个页面中最主要的内容标记为“块1”，是页面中面积最大的模块，搜索功能和其他导航内容的模块组成了“块2”。

关于斐波那契数列还有一个特点：在数列后添加数字，随着数列加长，数列前后两项之比会趋近1.618，也就是黄金比例。

3.三分法则

三分法则被很多人所熟知。就算不是设计界的人，也会对三分法则有所耳闻。这一点不像黄金比例和斐波那契数列。说到 数学法则在网页设计中的应用，就不能不提“三分法则”。

三分法则指的是，使用两条竖线和两条横线将画面均分为9个部分，形成一个基本的网格，从而辅助界面布局。

举例来说， 四条线的交叉点位置是放置关键信息的好位置 ，可以将需要着重显示的元素布局在这些位置。 在网页设计中，左上的交点是最醒目的位置，是用户在浏览网页时，目光最容易注意到的位置。

我们来看一下EQRec的首页。网站的主标题——来自世界上最好录音棚的邀请——位于首页左上的交点处，其他页面元素按照三分法则分布在页面中，特别是页面上下的导航栏。

透过数字做设计

也不能依靠数学来解决全部问题。用户体验终究是要靠创新的思维来提升的。

我这边不给您具体牌子型号，只告诉你如何选择。我买笔记本从来都是看配置再看品牌的。r然后用笔记下来，到实体店一个一个找，几家对比，得出心理价位。 第一，你肯定要买的是近半年内生产的电脑，这样有利于你5年时间甚至更长时间使用第二，你要清楚你能出多少钱，比如2千到3千只能是低端电脑，4千左右价位能买中端的电脑第三，你要考虑自己是否考虑续航时间，考虑续航选择低电压(U)的CPU。另外要清楚自己的笔记本是用来做什么的。如果做设计，视频等那就应该不考虑CPU后面数字上有个U的笔记本。 第四，你应该要考虑比较好的系列，然后再同款系列中考虑型号。比如四代I5和五代i5比较，你肯定要选择五代i5,然后在这个系列里面看型号比较。当然这方法也不全对，毕竟低电压(CPU带U字)的五代i5和标压的五代i3(CPU带M字)性能差不多。. 第五，你要看看纳米数字是多少，纳米数字越小，做工精细第六，你要看看显卡阶梯图，再瞧一瞧显卡的三级缓存，数字越大，越好。对了 如果你只是上网普通娱乐，集成显卡就行，如果要玩3D游戏，设计等。还是主要考虑独立显卡。选择显卡比如，N卡和A卡，A卡发热量大些，作图专用。如果要长时间运行，比如玩游戏，剪辑，那你就考虑N卡。选择N卡，比如。740和840这两个显卡，第一个数字8大，那就是840效果好点，但是840比740性能只高了百分之五，若740和820比较，很多人误以为是8好，那就不对，这个反而是740好。 第七，你也要考虑主频，主频越高，说明电脑处理速度越快当然像CPU是低电压的电脑，你也要关注它的睿频。 第八，就是你考虑硬盘型号是sata三代，是选择固态 还是混合，肯定是固态好，不过很多人买较便宜的混合，还要考虑硬盘转速7200，当然5400也可以第九，就是你考虑内存规格和大小，内存规格现在主流是DDR3，性能是DDR2的两倍；一般32位系统最高支持3.2G内存，64位系统，最好是4G内存。 第十，就是你考虑屏幕选择尺寸，宽屏16比9 还是16比10等。亮度值越大越好。分辨率随你选择。最后你看看中关村在线对比笔记本品牌吧。

UI设计作为互联网行业的重要分工之一，有着巨大的发展潜力。

很多朋友觉得UI设计非常难学，但其实只要感兴趣，愿意学习，掌握UI设计这一门技能还是非常快的。

今天北大青鸟http://www.kmbdqn.cn/就为大家分享学习ui设计必备的四个小技巧，希望对你有所帮助！学习ui设计的小技巧之一：软件学习ui设计要学的东西很多，软件是基础的东西，要想做好出好的ui设计就得先熟练掌握ui设计的基础软件，软件方面有：PS、AI、ID、Firework、Dreamweaver、HTML5、div+css等等不过对于新人，海文ui培训老师认为还是一定要先把Photoshop学扎实。

只有基础扎实了，才能学到更深层次的知识。

学习ui设计的小技巧之二：找灵感找灵感，说白了就是如何培养审美的能力。

首先我们要有自己的美感意识，知道哪些是好看的哪些是不好看的，当你把那些不好看的排除了，那么你的品味自然就上升了。

再者就是多搜集网上的最新设计作品，不断的去学习。

这里推荐一些不错的设计作品网站。

如：UI中国、花瓣网、站酷、Behance、APP截图等等??那么，当我们接到一个设计任务的时候，该如何去快速的执行，快速找到灵感呢?——平时的素材采集和分类至关重要。

一定要整理分好自己的素材文件夹。

对一个设计师来说，素材资源库，就是自己的财富，只有自己整理出来的才有价值。

学习ui设计的小技巧之三：懂分析学会分析好的设计作品，主要从下面的几个方面去分析：1.是配色还是版块设计比较吸引眼球？2.细节处理有新意吗?3.背景烘托有档次吗?4.为什么排版上看着很舒服?然后再换位思考一下，如果是自己，自己会如何设计，设计手法和细节的处理会不会？创意想法上有没有给带来什么灵感......学习ui设计的小技巧之四：做笔记有没有发现一个问题，我们每天都在看各种设计作品，真到自己做的时候，一下子全都忘记了，脑子短路了。

之前看到那么多好的设计作品也都白看了，人家的还是人家的，跟自己一点关系也没有。

所以我建议准备一个小本子，养成做笔记的习惯，坚持完成下面三点：1.看到了什么好设计画一画。

2.想到了什么好点子，写一写。

3.做会了什么或是想要学点什么，都记录下来。

那么半年时间下来，小本子就写的密密麻麻了，没事拿出来翻翻看，学习的时候积累的心得，精益求精。