上海网页设计培训实战班

移动端网页知识-简单实用的移动端网页知识-丝路设计网

[导读] 简单实用的移动端UI姿势 永远别把规范奉为圣旨，设计的核心依旧是体验和创意，多提升自己的思想才是正确的道路，别在规范上死磕。 工作习惯的养成 1.对于总监给你安排的工作你最

永远别把规范奉为圣旨，设计的核心依旧是体验和创意，多提升自己的思想才是正确的道路，别在规范上死磕。

工作习惯的养成

1.对于总监给你安排的工作你最好拿本子或者备忘录之类的东西记好，因为往往事情多了就会混乱。有时候因为你忘了一件事情会拖慢整个项目的进度，这时你就会被你的总监吊起来打！

2.每个项目都要建一个单独的文件夹(不要把你收集的资料和设计稿放在桌面或者C盘里)，然后再下分各个部分，比如切图、标注、效果图、PSD等等，这个分类不一定每个人都要一样，关键在于你能第一时间找到你要的文件，别让你的总监在后面傻看着你找文件。

3. 在放大和缩小图片文件的时候，我们最好右键图层将图片转换为智能对象，这样就能避免图片变糊了。

4.保存一个设置好参考线的文档作为空白模板，我觉得是个很好的工作习惯。

上下的参考线根据IPhone自身系统的规范设置，左右的参考线按个人习惯设置为24px-30px，即左右参考线内为显示内容的区域，左右参考线的设置不是规范，此举一是为了避免按钮过于贴边导致点击热区减小，二来是因为两边留有空白会更加美观，不至于造成拥挤的感觉。

Android端

Android没有明确的尺寸规范，以上的算是作为参考吧，理论上是你想设置多大都可以。

通常我的做法是手机上截一张大公司做的app的图，看下人家的高度设置的是多少。嗯，要活学活用的说。

关于要用到的软件

Photoshop和Illustrator：这个不多说，是设计师就会接触的软件，最好是下CC2015的版本，因为这个版本针对UI设计进行了一系列的改动。

Skech： Skech在UI设计上更加轻量，而且是矢量的工具，意味着放大缩小不会让像素变低，不过目前只支持Mac的系统。(这个不是必学的，如果你有Mac又是有追求的人可以考虑)

标注工具：Markman，基本能满足标注的需求了。（网上很多标注工具，视个人习惯而定，功能都是相同的）

切图工具：Cutterman（切图工具也很多，当然工具不是必须的，因为你用Ps一样可以切，只是说这样可能高效点）

Android DP/PX换算网站：http://pixplicity.com/dp-px-converter/

用于DP/PX单位之间的换算，不过这个网站有时会炸了，最好还是自己记住换算公式。

实时显示工具：Ps play，在PS上做的效果图实时显示在手机上方便你把握做出来的东西显示在移动端的效果。

需要了解的移动端尺寸姿势（前方烧脑预警）

先从IOS说起

问题一：做IOS设计稿的时候Ps画布要调多大尺寸的？

答：推荐使用750px*1334px（特别注意的是由于需要向下适配4，5的机子，向上适配6plus的机子，在做设计稿的时候尽量使用能被2整除的像素值，因为会涉及到放大缩小产生的轮廓发虚，后面会详细说明）

常规的新建文档数据这样设置就可以了。但也有碰到有些小白说，iphone6的PPI不是326嘛，我们分辨率不需要设置成326吗？好吧...小伙子你研究的太深入搞错了，这两者特么没什么卵关系，这里只要记得按上图那样设置就可以了。

详解：现在常用的几种设计尺寸

1.  640*960    iphone4

2.  640*1136    iphone5/5S/5C

3.  750*1334    iphone6 目前做设计稿的主流设计尺寸，向下可以适配4，5，向上可以适配6 plus，切出来就是@2x。

再来说说Android

同样问题一：做Android设计稿的时候Ps画布要调多大尺寸的？

答：推荐使用&*……%￥#@！对，Android的碎片化太TM严重了，太多的奇葩尺寸。当然如果一定要定一个尺寸的话，建议使用320px*480px或者720px*1280px。下面PO一张来自25学堂的截图。

看完一脸握草的说这特么是什么鬼，px、dp、mdpi什么的是条毛啊

容我喝口水压压惊

首先来说说px和dp。px我们都不陌生，我们Photoshop的基本单位就是px，而IOS端的基本单位也是px，那dp是什么？dp就是Android的基本单位，设计人员的px和安卓开发人员的dp本是生活在同一楼层的人（即mdpi分辨率下），但是随着安卓碎片大楼越盖越高，设计人员只能爬上梯子（即使用换算公式）跟开发大大说话，那为了避免麻烦大家一起站在mdpi下说话就不累了。所以在mdpi（即320px*480px）分辨率下，px和dp是1：1的关系。

再来说说mdpi、hdpi、xhdpi，随着Android碎片化的加剧，我们人为的将他们划分了等级。就像拳击比赛分为60公斤级、70公斤级、80公斤级一样，70公斤级的选手体重得在61~70里面。人们将xx分辨率的屏幕尺寸划分成了某个dpi。

此图竖列为Android各dpi下包含的分辨率

（此为各dpi下的代表分辨率即换算关系）

记不住的话可以使用前面给的换算网址http://pixplicity.com/dp-px-converter/

比如我们在做设计稿的时候用的是1080px*1920px的大小去做的，那对应表格里这个尺寸就属于xxhdpi。这时你拿着设计稿交给了程序大大。程序大大为了将px换算成dp，他需要将所有尺寸除以3才能得到他想要的dp值，所以这是个很麻烦的过程，所以我们设计的时候用320px*480px的尺寸去做就可以省去这样的换算麻烦。

让我吃包辣条总结一下Android端，为了方便我们尽量使用320px*480px的尺寸大小去做效果图。但是需要注意两点，一是所有图片大小或者文字尽量能被4整除（当然这不是必须的，一切以美观为前提）；二是我们用320px*480px做图的时候，希望能考虑到放大三倍后一些线条是否会太粗之类的细节问题，当然还有最重要的一点就是保证我们使用的图片在放大三倍后是否还是清晰的。

等一哈！！！这里补充一点，有小伙伴跟我说她都是拿720*1280px的尺寸去做的效果图，其实我自己做的时候也是用720*1280px的做的，因为这个尺寸比较容易把握向下或者向上适配的显示效果，但是后面标注的时候记得在Markman里右键变换长度单位（Markman的使用在后面会说到）。比如用720px*1280px的大小做效果图，放到Markman里长度单位切换成HDPI，这样标出来的dp值可以直接等于px。

以上就是UI设计最最基本的姿势，了解这些以后就可以去做图了，然后在实践中慢慢了解一些更加深入的姿势。

------------------------------------------------华丽丽的分割线------------------------------------------------

了解了最最基本的一些姿势以后，我们再来深入点咳咳...再来了解一些可能会用到的切图、标注和在做效果图时候需要注意的一些细节。

做一个有追求的设计师

轮廓发虚

让我们继续装逼，哦不是，继续来看下面两张图，仔细观察会发现前一张图的轮廓发虚，这就是常说的虚边。

轮廓发虚的问题在资深的设计师眼中一眼就可以看出来，有人认为这个icon那么小一般人看不出来，但是如果这个icon适配到ipad等大屏设备上后，虚边的问题就会显现出来。其实虚边就是矢量边缘模糊产生的问题，一般是个人不良的绘制习惯造成的，我们有时会直接用ctrl+T来放大缩小图标，这样导致的结果就是路径的锚点有时无法对齐到网格，而产生0.1~0.9px的多余或不满的像素。所以我们在绘图时应该尽量保证锚点对齐在1px的网格上，即使放大缩小icon后也应该调整路径的锚点来保证对齐了1px的网格。

像绘制一些常规的形状时我们可以通过AI和PS上面的面板是否为整数来判断锚点是否对齐了网格。

关于字体的选择

IOS端：

简单来说：Mac用苹果黑体，Windows用黑体-简(IOS8时期)

iOS9使用的西文字体由Helvetica Neue变更为 San Francisco, 中文字体由黑体-简变更为苹方黑体

Android端

安卓4.0之后用的英文字体是Roboto，中文字体是方正兰亭黑体。

5.0之后用的中文字体好像是思源黑体（没有实际用过不确定）

关于字体大小的问题

IOS端

ios的字体大小都以px为基本单位，包括图片大小及距离的标注

Android端

安卓的字体大小一定要用sp来表示，虽然sp和dp在数值上是相等的，但是一定要用sp！！！

文字大小只是一个参考，具体要根据设计的视觉效果来决定，不要死记硬背，但是字体大小一定要用偶数。

关于切图

首先说明一下什么是切图。第一天上班的时候总监问我：“知道怎么切图吗？”我顿了一下，尼玛切图是什么啊！！“就是那个切片工具”总监补充道。哦~~~~~~~知道知道事实证明我错了，在过后的一个星期里我被各种规范无情的鞭挞，画出来的icon有虚边，切出来的icon图标大小不符合规范。还出现了什么点9切图法（心里一万只草泥马狂奔而过）赶紧微信了工作的基友，结果基友说：“哦，我们这切图和标注都是程序大大做的”（握...草...）所以切图和标注是看公司而定的，有些公司需要设计师来做而有些不需要。

但是被蹂躏后才能站出来装个逼，仰望45度若有所思的说：其实切图也不是很难（呵呵...）

切图的方法

惯例还是先从IOS开始说起

切图的方式有很多种，可以选择适合自己的方法去使用。

1.常规切图

首先来看首页的导航栏如何切图

我习惯将调成50%的红色块把需要切图的区域划分出来，这样把参考线在贴近色块边缘的时候就会自动吸附上去，保证了切图尺寸的准确性。那色块的大小如何设置呢？首先来看中间特殊字体的部分，这里通常是LOGO所在的地方，而LOGO通常是特殊的字体或者图片，所以程序那里靠代码是敲不出来的，这里我们需要将它作为图片资源切给程序。再来看左右的色块，由于这里是导航栏，所以左右正方块的大小为44px*44px，因为他们属于工具栏的icon图标。

比如搜索按钮切出来就是一个44*44px背景为透明的图片资源（这里为了看的清晰点，我把图标换成了黑色，并表上了尺寸）

下面PO出各个位置icon的切图大小规范，这里注意iphone6是@2x（即2倍图）。

再来一张英文的，涵盖了ipad的系列的规范

那是不是所有资源都要贴边切呢？-----------------当然不是，要视情况而定！

这里要先引入一个点击热区的问题

什么是最小点击区域?

官方推荐的最小可点击元素的尺寸是44*44像素，换算成物理尺寸大概是7mm（人机工效学研究中得出的结论：用食指操作，触击范围在7mm左右合适；用拇指操作，范围在9mm左右合适)。在这个尺寸下，不容易出现误操作，误点击；小于这个尺寸，点击就会变的有些不太准确(5mm是最低限制了，这个标准下已经容易出现误操作，所有不是特殊情况尽量大于等于7mm)

但是我们做设计时往往为了图标的精致会把图标做的小于44*44px，但是切图输出的时候，要考虑用户点击难易度的问题，所以，切图的时候，涉及到需要点击的小图标的时候，不够的地方用透明区域补全，否则用户点击时会比较困难。

比如同样是搜索的图标，如果我们为了一些美观上的考虑，把图标做成了30px*30px的大小，那我们切图的时候也需要按44*44px的大小去切这张图，这样做的目的就是为了考虑最小点击热区。（保存切图图片的时候一定要保存透明背景的PNG）

2.软件切图

Cutterman，官网有使用教程，自己随便琢磨一下也就会了，本来也想详细写，但是感觉自己要不行了...

Android端：

Android也有自己的最小点击热区，所谓的48dp法则（参考ios方面的解释）年轻人！让我们动点脑子！

Android特有的一种切图方法：点9切图法

点9适用于什么情况：（多用于圆角矩形）

1.“点9”图片拉伸1个像素与拉伸10个像素效果上是没有区别的，所以尽量缩小图片的尺寸。

2.当我们遇到有纹理的背景或有纹理的按钮时，找到纹理的规律，用最小的切图去平铺，就是图案叠加的原理。

何为点9切图？

因为其切出来的图需要命名为xx.9PNG，所以得名点9切图。其实相当于把一张png图分成了9个部分(图一)，分别为4个角，4条边，以及一个中间区域，4个角是不做拉升的，所以还能一直保持圆角的清晰状态，而2条水平边和垂直边分别只做水平和垂直拉伸，所以不会出现边会被拉粗的情况，只有被裁掉的部分做拉伸（图二）。这样的处理的界面显示结果才是最完美的。使用9.png图片的好处在于一个几KB或者几十KB的图片，变得非常的小，一般只有几百个字节那么大， 让安卓系统加载起来当然会更加的流畅。

这里特别要注意的是制作.9的时候一定得用1px纯黑的画笔去话直线，千万别把有透明度的地方也划进去，因为这样会导致拉伸后的圆角大小出现问题。原则上.9的画法是左边和上边的中间各点一个1px的点，下边和右边各划一条黑线，黑线覆盖的长度必须是100%透明度的区域。

工具切图

如果你的黑线怕手工画错的话，可以考虑使用Cutterman。

首先你还是得4边各留1px的透明区域出来，然后点击点9就可以切出来了

仔细观察手工切出来的和工具切出来的图黑线的长度似乎不太一样，这里我也不知道是否两种都行，你们可以问下程序大大。

在保证圆角大小不变的情况下，尽可能的减少图片的长宽！

切图尺寸应该提供几套？

IOS端

理论上，为了达到最好的视觉效果，推荐输出三种尺寸的切片资源。

但是如果进度很赶的话，只输出一套@2x尺寸也是可以的。如果想要输出三种尺寸的话，输出的优先级为@2x>@3x>@1x,具体要输出几套最好还是事先和程序沟通好，这样才是最有效率的。

这是说的@1x  @2x  @3x是开发工具Xcode软件需要的UI资源，命名后，IOS设备会自动的选取合适尺寸。

本来想解释一下什么是@1x@2x@3x，但是感觉这个理不理解都没有太大的影响，反正记得是1倍2倍3倍的关系就可以了。

Android端

理论上每个尺寸最好都切一套资源，一般情况下切一套最大尺寸的就可以了。

共用资源的图片，输出一张就可以

类似下一步、完成或者评论之类重复的按钮，只要告诉程序大大统一的尺寸大小和色值以及字体的大小,程序可以用代码把效果敲出来。这是我和程序配合的工作习惯，不一定适应于每个人，方法需要设计师去和程序磨合。

个人习惯是共用的资源或者尺寸我会在ppt里统一说明。

图片图标的不同状态

每种图标或者图片如果有不同状态，每一种不同的状态都需要告诉程序大大形状数值、色值以及字体大小。

比如按钮有正常(normal)，按下(pressed)，选中(selected)，禁用(disabled)等多种状态，

切图的命名方法

不要用中文！不要用中文！不要用中文！重要的事情说三遍。

一般的命名方法是：切片种类+功能+状态+倍率.png

举个栗子：btn_download_nor@2x.png

切图种类是按钮（btn）；功能是下载(download)；状态是正常 (normal)，倍率是2倍图（@2x）

养成良好的命名习惯能让你在需要时快速找到你做好的图标，虽然名义上如果你不知道下载的英文怎么拼的话也可以使用xiazai来命名，但即使不懂我也要查字典装逼。

下面PO一张常用的功能命名规范

下图是一张首页需要切的图我都用50%透明度的红色色块划分出来了，总的来说一个首页需要切的图大体是导航栏的icon和特殊字体或图形的LOGO(因为这里用了系统字体“首页”所以不需要切)、banner、各种头像图标以及TAB上的icon。

切图的原则就是一切程序代码敲不出来的图片以及特殊文字我们都需要切图。

页面标注

标注是程序大大能否完整的还原设计稿最重要的一步。

由于每位程序大大的实现方式不同，这里说下我和程序配合的习惯，算是做个参照。由于习惯以及使用情景的不同，需要在标注上举一反三，自己慢慢的去养成一些习惯。

标注工具Markman

使用Markman进行标注的时候，先右键调整长度单位，如果是标注ios的就使用px，如果是Android的就选择需要标注的分辨率对应的DPI。

虽然Markman可以自动读取颜色，但是如果你用了透明色，建议用文字标注直接写出来原色值以及透明度。

你需要标注的内容有：

1.文字需要提供：字体大小（ios的单位是px，Android的单位是sp）,字体颜色；

2.顶部标题栏的背景色值，透明度；

3.标题栏下方、list菜单以及Tab bar上方其实有一条分割线，需要提供色值（分割线是一个设计细节）；

4.内容显示区域的背景色(如果是全部页面白色，那就和程序大大沟通，沟通，沟通，重要的事我又说了三遍)；

5.底部Tab bar的背景色值。

标注的情况太多，没法全部列出来，每个人都需要经历和程序大大的磨合期，总之献出你的菊花就对了。

举个栗子

页面标注你需要注意的地方：

1.导航栏：icon切图给程序大大了，不需要标注尺寸和距离（ios导航栏上的icon距离两边的距离是默认的）中间由于我没有用LOGO或者特殊字，用的是系统的字体，所以标出了字体大小和色值，最后让程序大大默认居中就可以了。

2.分割线的问题：虽然这张图的分割线都是2px，这里我都标出来了。但是平常我如果遇到一些全局性的问题，可能会把图放到ppt里面，然后在里面写明这张图的哪里有分割线或者色值统一用多少之类的。因为标注的图整洁能让程序大大不至于眼花或者漏看。

3.Banner：所有撑满横屏的大图，不需要横向尺寸，把高度标出了就可以了。比如你用750*1334的尺寸做图，再限定了横向尺寸为750的话，那适配到iphone6 plus上图片就会铺不满屏幕，切记。

4.图文的表格：比如“今日颜值”这个的标注，我们限定距离左边屏幕的间距为22px，就不要再去限定它距离右边的间距了，有句话叫“定左不定右”或者“定右不定左”，你左右都定了距离的话就把这个距离定死了，这样就不利于去适配了。（哦，其实这句话是我自己说的，你打我呀）反正道理是这样没错。

5．流行推荐：六个圆定好上下圆的间距以及左边和右边圆距离屏幕的边距，横向三个圆的间距程序大大会自己设置等分排列的。

6.不是满屏的图片：除了横屏撑满的图，基本上所有的图片都要标注宽高以及图片距离旁边的距离。

7.Tab Bar：你可以单独标注图标大小+文字大小；还可以图标文字算作一个控件，整个切出来。

总之呢，所有的页面标注总结起来就是：标文字，标图片，标间距，标区域。

基本上能说的我都说了，不能说的我也说了，基本也就差不多这样了。其实看完以后并没什么卵用，你还是要被程序用皮鞭抽以及拿蜡烛烫，这样你就会变成一个抖M，让你的抖M作为完善自己的动力吧。

以上就是我实习三个月总结出来的经验，拖了很久才决定写出来

而且写到切图和标注的时候一度崩溃不过还是理了一下发型继续写下来了。

写完了以后自我感觉十分良好，感觉自己瞬间帅了几个档次。