《UI设计》课件-2. 界面基础之页面

`INTERFACE

DESIGN`界面设计基础课程：页面设计Ⅱ界面模式网站（WEB）与应用程序(APP)都是为了“表达某些内容”，通过“链接”可以把不同的元素相互串接起来，并能够往返于各个元素之间。“链接”产生了信息的相关性，即无论在网站还是应用程序中，必须让用户时刻了解从何处来，到何处去。因此设计的关键必须放在一个重点上，就是:

“如何让每个元素彼此相连”必须在各个信息的页面之间建立关联性，理解空间位置关系

分析智能物联界面（工具类）：1、垂直：代表路径深入，如一级→二级→三级目标逐步聚焦.从“大类别”聚焦到“小个体”，如“home-livingroom-light”2、水平：代表功能平行、不同类别之间。信息级别等同。在二维空间中理解的“垂直”和“水平”，在三维空间中理解“前后”关系通过“视觉化”体现页面的前后关系通过“视觉化”体现

页面的前后关系

直接方式：显示“从何而来”，如“返回”“返回上一页”按钮间接方式：网页产生的“变化量”。

*变化量越大，用户就觉得移动的页面与前面的页面关联性不强；*变化量越小时，页面的相似度越高，用户觉得只是移动到了附近的页面，页面之间的关联性较强。通过视觉差异(变化量)

判断当前位置用户知道“身在何处”，也可以明白自己能“移动到哪个页面”。视觉差异大致分为四种:(1)字体加粗（2）文字颜色变换（3）背景颜色，背景铺色块,如一些菜单（4）特殊符号，加注符号。用户想要知道：

身在何处→想要去的地方→目的地用户必须知道以下4点

才可轻松移动现在位于哪个页面？→页面的标题或者导航栏能说明这个页面的内容是什么？→标题与内容能说明从哪里来到这个页面的?从这个页面可以前往哪个页面？→导航栏与内容能说明/gp/product/B00AMAI1AO/ref=as_li_ss_tl?ie=UTF8&camp=536&creative=3132&creativeASIN=B00AMAI1AO&linkCode=as2&tag=book0a-23界面模式原型图资料请查看wire_phoneAPP页面设计与临摹布局layout01WEB:三栏→两栏→一栏PHONE:一栏(通过控件，出现2和3个页面。正常情况是隐藏起来)/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179px是相对单位（类似一个范围内，可容纳越多的px，成像越清晰）pt为绝对单位（类似单位为厘米，毫米等等，是固定的单位不可变）。在不确定屏幕像素密度（ppi）的情况下，px与pt没有任何可比性。/mobile-ui-measurement-guideline1PT等于1/72英寸1英寸是一个固定长度，等于2.54厘米750x1334pxiPhone(6~7)屏幕宽（每行）有750个像素（发光点），高（每竖）有1334颗像素（发光点）。在PS等设计视觉图，用该尺寸iPhoneX：Artboard渲染到屏幕对于iPhoneX，画板的渲染速度是原来的3倍，因为它的SuperRetina显示屏的画素比是3倍。最小尺寸的设计使我们能够将资产缩放到不同设备所需的不同尺寸，同时保持像素完美的渲染。因此，可以将@1x，@2x和@3x大小的1pt分别转换为1、4或9像素。1倍：1pt=1dp=1px（mdpi、iPhone3gs）1.5倍：1pt=1dp=1.5px（hdpi）2倍：1pt=1dp=2px（xhdpi、iPhone4s/5/6）3倍：1pt=1dp=3px（xxhdpi、iPhone6）4倍：1pt=1dp=4px（xxxhdpi）iphone6plus单位真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位为pt，Android的尺寸单位为dp,两者其实是一回事。单位之间的换算关系随倍率变化：网络上的网格不仅是布局的设计准则，而且是限制和执行跨视口和断点放置元素的实际代码。960GridSystem网页设计60px20px960整除12列，每等分为80px，页面的内容区域由N个列和（N-1）个水槽（即间距）组成。在WEB端设计中，N的数值一般会采用12列、16列、24列80INTERFACEDESIGNOVERVIEW2018https://960.gs/如分辨率1920x1080。如果你用常用的12分栏，1920÷12=160（包括列宽和间隔，按照一般列宽：水槽=3：1,我们就可以定列宽为120，间隔为40。页两边安全边距是间隔的一半，就是20。这样一个1920的栅格系统就基本出来了为自己设定一个“网格系统”的设计规范了解概念单元格/外边距/水槽/列02网格系统里面最基本的元素“单元格”，即图中黄颜色的区域。移动端以8pt为最小单位，1单元格=8ptINTERFACEDESIGNOVERVIEW2018网格系统的概念网格系统的概念：列是存放内容，水槽（间距）间开内容（间距）1、外边距（安全距离）数值越大页面越宽松，反之亦然。2、列数越多，分割越多，移动端不宜分割过多以750px为例Pinterest单元格为8pt那么所有用到的间距(横的、竖的)尺寸将会是8px、16px、24px、32px、40px……IPHONE61334X750因此每个设计师都会有对网格理解及定义，团队协作需要的是统一格式，右边是更符合程序规范的假如单元格为8px，那么所有用到的间距(横的、竖的用黄色标注出来)尺寸将会是8px、16px、24px、32px、40px、48px、56px、64px、72px、80px、88px、96px、104px图片来自文章《如何用网格系统设计出大师般的APP界面》出处：人人都是产品经理作者：Tony练习layout网格03（1）新建IPHONEX尺寸（2）确定自己的产品与网格在移动端设计中，列的数量不宜过多，列的数量越多，页面就会被分割的越「碎」，在页面设计时就会越难把控。外边距：一般可设置24px(12pt)，32px(16pt)，64px(32pt)列：一般可设置4列，6列，8列，12列水槽：8的倍数*在WEB端设计中，列数一般会采用12、16、24这些数值iPhoneX的尺寸：右图链接来自/design/142395.html尺寸：1125（宽）*2436（高）上(264px)：状态栏132px

导航栏132px下(249px)：标签栏147px

虚拟HOME102px中：2436-264-249=1923px（3）设置网格（可利用插件GuideGuide）（也可利用网格分割方法）插件GuideGuide切换”可见“与”隐藏“参考线快捷键：ctrl+;（3）设置网格（可利用插件GuideGuide）（也可利用网格分割方法）网格分割方法：1、经过计算，新建一个图层。创建一个矩形（矩形的数值997*2436px,参考左图【例】，选用64px为例）2、选择矩形、填色。”对象——路径——分割为网格“，设置同份文件内设计多个界面创建画板1、在“画板”的面板中进行“新建”——空白的画布2、shift+o（这个是英文字母O）,进入“面板”编辑模式，再点“ALT”复制面板——复制了前一块面板。如何批量导出界面1、导出前需先修改好画板名称2、文件——导出——导出为——/news/ultimate-guide-to-iphone-resolutionsiPhone分辨率终极指南规范参考APPLE人机界面准则/design/human-interface-guidelines/materiadesign界面准则https://material.io/design/foundation-overview#spacing学UI网/优设网/design/rule/design/142395.html/screen/ios.htm大作业界面临摹

临摹一组界面（每个类型临摹1页），熟悉界面模式及在AI中如何运用网格设置