UI设计－17-10-23

平面：（空间有限）、排版（静态）
UI：（空间延展性强）、交互（动态）
网站的规范组成：页眉、banner、内容区、页脚
屏幕的尺寸是指看到的大小，分辨率是指从电脑上看到的大小
网站的设计区是画布的大小
浏览器的尺寸：  1. 1920*1080px    2. 1440*900px（常用的中屏）    3. 1366*768px    4. 1024*768px
2K屏幕尺寸：2880*1800px
4K屏幕尺寸：4096*2160px或者3840*2160px
5K屏幕尺寸：5120*2880px
网站设计区域尺寸：1.企业：1176px、1170px   2.电商：1224px、1220px  3.新闻：980px   4.娱乐：1600px
响应式布局： 需要按照百分比给尺寸（有缩放效果），典型网站：Apple官网 （在不同的终端上看到的效果是最好的）
自适应：需要给多个尺寸设计标注图，典型网站：花瓣
适配：弹性控件  文字流
网页的网格系统运用：6列网格（花瓣）／12列网格（淘宝）／24列网格（12列最为常用）
网格系统／删格：是响应式网页设计的推广
网格系统的好处： 视觉：画面的整齐性好于网格系统设计网站（更加整齐）
适配：更加方便做适配
网格系统常用版式：  
1170设计区域：12列网格 单列70px 间距30px（整数）：最小网站是1024*768，为了适配所有的屏幕，避免网站下方出现滑动条；1170可以容纳最小的屏幕。
1176设计区域：12列网格 单列78px 间距20px（左右多10px）
1224设计区域：12列网格 单列52px 间距20px（左右多10px）
1290设计区域：12列网格 单列80px 间距30px（整数）
980设计区域：：12列网格 单列60px 间距20px（整数）
web字号  正文字体：中文14号，英文16号，最小12号
banner+页眉尽量为720px以内，不能超过800px，搜索栏（30）＋导航栏（100）为200px
导航栏字号为20、24
按钮字号为18、20、24（彩色底反白或线框型主色）
字距为行高的1.5倍－2倍之间
采用的字体为微软雅黑
首屏：1920*（1080-浏览器的高度）
运营把文案给设计师，产品经理把网页版式给设计师
建立参考线：视图－新建参考线版面－（1170－－数字12，宽度70，装订线30）
网页设计的潜规则：先整体后布局，画面主次清晰有节奏，便捷性与可行性，网页设计简单为主，以交互为主，用户使用简单为主。
布局的盒子模型工作原理“页面上的每一个元素都是一个矩形的盒子，每个盒子都有宽度和宽度。包含东西的叫盒子。
不包含东西叫内容。（线、图、按钮）
盒子有色彩或与背景有对比时，里面有文字时必须创建内边距。
各个板块之间的距离最小为56px，都是8的倍数。
H:色相  S:饱和度  B:明度
标题：24+4或6或8
内文：16／18/20-2/4  （16-24之间）

屏幕快照 2017-10-23 上午11.27.49.jpg

01.jpg

02.jpg

03.jpg

04.jpg

05.jpg

06.jpg

07.jpg

08.jpg

09.jpg

10.jpg