APP和网页设计必须要会的知识技能

刚起初工作的之后，APP怎么做？网页怎么做？统统不清楚，找这些的网站、手机APP来参考，最后作出似是而非的东西，明明是自己做的临摹的app页面，怎么会和原版页面差别如此大呢？更曾一度看到不了自己的app页面做的不漂亮，沾沾自喜，更认为UI设计只是这么，没什么技术含量。

再度回首以前做的这些页面，常由于不知道字体、图标大小而轻易选择自己偏爱的，这样的后果就是给自己埋了大坑，毕竟工作上的项目，后期是自己要为其负责的。如果早点见到郗鉴老师的这本“UI设计师进阶完全指南”，我必定能提高双倍的工作强度，不必天天苦兮兮的上班，最后做起来的页面还不漂亮！

UI是UserInterfaceDesign(界面设计)的简称，包含一切人机交互可视化的页面设计，UI设计师的职能是设计工人机交互使用的图形化客户界面，并使界面非常易用和友好。1像素的偏差都可能引那些人的不适感，UI设计是一门很细致的职业。我就个人工作中常见到困惑内容整理了书中app、网页设计的基本内容，希望能帮女孩伴们增添收获，节省工作效益。

△图片来自：Rita摄影

1、iPhone设计规范

a、iphone各系列相机规格、尺寸、使用的切图是我们需要知道的（文末附上各类UIKit下载地址）。

手机机型与像素对应表（照片来自：郗鉴）

b、iPhone设计需切记到的宽度设计，包含导航栏设计、大标题导航栏设计、tab栏设计等。大标题导航栏的高度通常为116pt（包括20pt状态栏，返回图标信息，大标题34pt）。滑动页面时大标题会成为正常导航栏的64pt。

△iPhone6/7/8和iPhoneX导航区域的差别（照片来自郗鉴）

△大标题导航栏设计（照片来自：郗鉴）

△图片来自郗鉴

△标签栏的尺寸（照片来自：郗鉴）

c、闪屏资源。闪屏是一张完整的静态照片，尺寸如下：

△图片来自郗鉴

d、字体。IOS中英文使用的是SanFrancisco(SF)字体。（下载地址：）

△HIG对APP的字体建议基于@2x（照片来自：郗鉴）

e、其他。iphone控件设计基本符合44pt（88px）原则，即在手机上大小为7～9mm，适合手指操作。iTunes上传图片必须提供两套照片：1242px*2688px和1125px*2436px两套图片。

f、UI设计师设计界面前必须先做用户研究以知道产品特点，如客户画像、用户调研、用户使用场景分析、设计竞品分析等。若设计稿必须调节为IphoneX的显示效果，可以下载IOS12设计源文件，把图标头尾设计成iPhoneX专用头尾。

△iphone6/7/8尺寸（截图来自郗鉴)

e、视觉规范。一套移动端的视觉规范必须包括如下几点：

主色/辅色/颜色规范：规定APP主要使用的色调种类。文字色彩/大小规范：规定App中主要使用的文字的大小、颜色、应用场景等。ICON规范：规定APP的ICON设计完善。应用界面规范：规定App的应用界面使用规范。按钮和交互态规范：规定App内所有图标和交互态的颜色。间距规范：规定App内所有长度的宽度。

f、切图规范命名。按照“功能_类型_名称_状态@倍数”，如导航栏是那些又一个手术图标，它的命名方式可以为：nav_icon_sarch_default@2x.png(导航_图标_搜索_正常)

△图片来自郗鉴

g、动效。IOS主流的动效设计有四种。第一种：设计师提供研发动效视频或GIF，开发人员根据效果编写代码，调用切图再次做，还原度或许出问题。第二种：序列帧方式推动动效。向研发人员提供按排序命名的PNG，如：1.PNG、2.PNG等，开发人员用代码快速更换，实现动画。第三种，可以给程序员AVI等视频文件直接插入视频。第四种：使用Airbnb开源的Lottie（），用AE完成动效，然后借助BodyMovin插件导出json文件，这种方法还原度很大。最优秀的动效还是必须设计师与研发人员之间好好沟通。

2、MaterialDesign设计

a、安卓是一套与windows类似的操作平台。市场上的安卓屏幕型号大小不一，目前使用率最高的是720P和1080P。MaterialDesign为我们打算了一个网页来查询主流安卓设备的规格（网址：）。切图应该切出5套图

△图片来自郗鉴

b、MaterialDesign不是简洁的扁平设计，而是一种强调卡片式设计、纸张的模拟，使用了强烈对比色调的设计样式。

c、排版。使用栅格系统（列、水槽、边距），好处是完善化、对齐设计。网格尽量使用4的倍数。

△图片来自郗鉴

△图片来自郗鉴

d、文字。MaterialDesign在安卓设备上使用的图标：中文是思源字体、英文使用Roboto，其他免费的google字体都可以在安卓设备上使用。字体带有单独的单位sp。

△图片来自郗鉴

△图片来自郗鉴

e、主题编辑器。MaterialDesign发布了对于Sketch的主题编辑器，可实现取消某个样式即可应用到全局、图标的不同色调随意切换、字体风格随意调整（下载地址：）

3、网页设计

a、网页设计指的是网站的图形图标设计。网站工程步骤：用户研究—撰写需求文档—市场文档—做竞品调研—原型图阶段—视觉稿阶段—设计规范阶段—切图—前端代码—项目走查。

b、网站类型分为ToB端和ToC端。门户网站：国内非常著名的有新浪、腾讯、网易、搜狐等。企业网站：每个企业都有一个网站对外展示自己的能力、介绍自己的产品等，通常有网页首页、公司介绍、产品中心、公司团队、在线商城、联系我们等几个模块。

产品网站：苹果公司的iphone介绍页，小米手机8的介绍页，内容主要包括该产品的工艺、技术、设计、特点、构造、使用场景等。

电商网站：淘宝、天猫、京东等电子商务网站。游戏网页。专题页面：电商、门户网站一般会在节假日设计专题页面增加曝光度，如：儿童节、情人节、母亲节、圣诞节等，专题设计应尽量把握人的眼睛，在背部尽量刺激用户，用刺激对比强的色调、复杂立体的外型、冲击感强的文字吸引用户，避免使用现代主义中的冷淡风格。

视频网站。移动端H5:相当火的H5设计工具备：MAKA、iH5、兔展等。

后台网站：首要需求是显示给操作者其必须把握的数据，通常全屏排版。CRM系统（CustomeerRelationshipManagement），客户关系管理。企业对用户的信息进行汇集、管理、分析，同时对自身的销售、服务、售后进行监控，常见的用途有：员工日程管理、订单管理、发票管理等。

Saas“软件即服务”，其他公司提供SasS服务的公司订制系统，服务公司为用户提供从服务器到设计一体化的服务。企业OA，即OfficeAutomation，办公自动化，通过企业OA可以完成请假、调休、离职、查询公司法规政策、请示、汇报等工作，减少时间成本，提高强度。

△图片来自郗鉴

c、网站设计中基于鼠标的交互。

△图片来自郗鉴

△图片来自郗鉴

d、静态网页多用HTML5编写，辅助CSS、JS等，结尾是html、htm，动态网站会随时调取数据库中的信息，使用了高级网站编程技术，结尾是asp、php、jsp等。

e、网站中的动画实现原理。第一：H5视频播放，缺点是不兼容低端浏览器。第二：FlashPlayer播放器播放，缺点是Flash安全性很低且强度慢。第三：动画使用GIF格式，缺点是动画长度不够，并且格式仅支持透明和不透明。谷歌首页的Doodle的漫画用的是雪碧图，CSS雪碧图，是一种CSS图像合并技术。缺点是帧数不宜过多。

f、视差滚动。通过运动速度不一样，来下实现空间感，原理：代码判断网页滚动，滚动时页面中三层图片运动速度和位移距离不同，给人产生的视觉感受如同现实中的空间感一样。效果参考网站：。

g、通常网页设计规格为1920*1080，每屏高度约为900px（1080减去浏览器头部和顶部高度）。字体需要使用偶数的字号，文字使用斜体12px渲染方法无，稍大用微软雅黑、大小14px～20px渲染模式选择WindowsLCD或锐利，英文和数字使用Arial字体，渲染模式选择无。Banner图尽量满屏，图片按照4:3以及16:9来设计。

好啦，上面就是我看这本书规定自己需要记住的内容了，最后附上书中所提及的各种资源下载地址：

苹果官网提供的iphone各类尺寸规范UIkit资源下载地址：

SanFrancisco(SF)字体：

动效设计用到的Airbnb开源的Lottie网址：

苹果开发者中心网址：

苹果人机交互规范：

安卓设备的型号网址：Design

官方网页网址：

的主题编辑器插件：