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

刚开始工作的时候,APP怎么做?网页怎么做?统统不知道,找很多的网站、手机APP来参考,最后做出似是而非的东西,明明是自己做的临摹的app页面,怎么会和原版页面差别那么大呢?更曾一度发现不了自己的app页面做的不好看,沾沾自喜,更觉得UI设计不过如此,没什么技术含量。

再度回首以往做的那些页面,常因为不了解字体、图标大小而随意选择自己喜欢的,这样的后果就是给自己埋了大坑,毕竟工作上的项目,后期是自己要为其负责的。如果早点看到郗鉴老师的这本“UI设计师进阶完全指南”,我一定能提升双倍的工作效率,不必每天苦兮兮的加班,最后做出来的页面还不好看!

UI是User Interface Design(界面设计)的简称,包含一切人机交互可视化的页面设计,UI设计师的职责是设计工人机交互使用的图形化用户界面,并使界面更加易用和友好。1像素的偏差都可能引某些人的不适感,UI设计是一门很严谨的职业。我就个人工作中常遇到困惑内容整理了书中app、网页设计的基本内容,希望能帮小伙伴们带来收获,节省工作效率。

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

△图片来自:Rita摄影

 

 

1、iPhone设计规范

a、iphone各系列手机型号、尺寸、使用的切图是我们必须了解的(文末附上各类UI Kit下载地址)。

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

手机型号与像素对应表(图片来自:郗鉴)

b、iPhone设计需注意到的尺寸设计,包含导航栏设计、大标题导航栏设计、tab栏设计等。大标题导航栏的高度一般为116pt(包含20pt状态栏,返回图标信息,大标题34pt)。滑动页面时大标题会变成正常导航栏的64pt。

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

△iPhone6/7/8和iPhone X导航区域的差别(图片来自郗鉴)

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

△大标题导航栏设计(图片来自:郗鉴)

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

△图片来自郗鉴

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

△标签栏的尺寸(图片来自:郗鉴)

c、闪屏资源。闪屏是一张完整的静态图片,尺寸如下:

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

△图片来自郗鉴

d、字体。IOS中英文使用的是San Francisco (SF)字体。(下载地址:https://developer.apple.com/fonts)

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

△HIG对APP的字体建议基于@2x(图片来自:郗鉴)

e、其他。iphone控件设计基本符合44pt(88px)原则,即在手机上大小为7~9mm,适合手指操作。iTunes上传截图需要提供两套截图:1242px * 2688px 和 1125px * 2436px两套截图。

f、UI设计师设计界面前需要先做用户研究以了解产品特性,如用户画像、用户调研、用户使用场景分析、设计竞品分析等。若设计稿需要调节为Iphone X的显示效果,可以下载IOS 12设计源文件,把界面头尾设计成iPhoneX专用头尾。

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

△iphone6/7/8尺寸(图片来自郗鉴)

e、视觉规范。一套移动端的视觉规范应该包含如下几点:

  1. 主色/辅色/色彩规范:规定APP主要使用的色彩种类。
  2. 文字颜色/大小规范:规定App中主要使用的文字的大小、颜色、应用场景等。
  3. ICON规范:规定APP的ICON设计规范。
  4. 应用图标规范:规定App的应用图标使用规范。
  5. 按钮和交互态规范:规定App内所有按钮和交互态的样式。
  6. 间距规范:规定App内所有间距的尺寸。

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

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

△图片来自郗鉴

g、动效。IOS主流的动效设计有四种。第一种:设计师提供开发动效视频或GIF,开发人员依照效果编写代码,调用切图重新做,还原度可能出问题。第二种:序列帧方式实现动效。向开发人员提供按顺序命名的PNG,如:1.PNG、2.PNG等,开发人员用代码快速替换,实现动画。第三种,可以给程序员AVI等视频文件直接插入视频。第四种:使用Airbnb开源的Lottie(https://airbnb.design/lottie/),用AE完成动效,然后通过BodyMovin插件导出json文件,这种方式还原度很高。最优秀的动效还是需要设计师与开发人员之间好好沟通。

 

2、Material Design设计

a、安卓是一套与windows类似的操作系统。市场上的安卓屏幕尺寸大小不一,目前使用率最高的是720P和1080P。Material Design为我们准备了一个网站来查询主流安卓设备的尺寸(网址:https://material.io/tools/devices/)。切图需要切出5套图

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

△图片来自郗鉴

b、Material Design不是简单的扁平设计,而是一种注重卡片式设计、纸张的模拟,使用了强烈对比色彩的设计风格。

c、排版。使用栅格系统(列、水槽、边距),好处是规范化、对齐设计。网格尽量使用4的倍数。

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

图片来自郗鉴

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

△图片来自郗鉴

d、文字。Material Design在安卓设备上使用的字体:中文是思源字体、英文使用Roboto,其他免费的google字体都可以在安卓设备上使用。字体具有单独的单位sp。

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

△图片来自郗鉴

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

△图片来自郗鉴

e、主题编辑器。Material Design发布了针对Sketch的主题编辑器,可实现更改某个样式即可应用到全局、图标的不同风格随意切换、字体样式随意调整(下载地址:https://material.io/tools/theme-editor)

 

3、网页设计

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

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

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

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

视频网站。移动端H5:比较火的H5设计工具有:MAKA、iH5、兔展等。

后台网站:首要需求是显示给操作者其需要掌握的数据,通常全屏排版。CRM系统(Customeer Relationship Management),客户关系管理。企业对客户的信息进行汇集、管理、分析,同时对自身的销售、服务、售后进行监控,常见的功能有:员工日程管理、订单管理、发票管理等。

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

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

△图片来自郗鉴

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

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

△图片来自郗鉴

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

△图片来自郗鉴

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

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

f、视差滚动。通过运动速率不一样,来下实现空间感,原理:代码判断网页滚动,滚动时页面中三层图片运动速率和位移距离不同,给人造成的视觉体验如同现实中的空间感一样。效果参考网页:https://www.epicurrence.com。

g、通常网页设计尺寸为1920 * 1080,每屏高度约为900px(1080减去浏览器头部和底部高度)。字体必须使用偶数的字号,文字使用宋体 12px 渲染方式无,稍大用微软雅黑、大小14px ~ 20px 渲染方式选择Windows LCD或锐利,英文和数字使用Arial字体,渲染方式选择无。Banner图尽量满屏,图片按照4:3或者16:9来设计。

好啦,上面就是我看这本书要求自己必须记住的内容了,最后附上书中所提到的各类资源下载地址:

苹果官方提供的iphone各类尺寸规范UI kit资源下载地址:https://developer.apple.com/design/resources/

San Francisco (SF)字体:https://developer.apple.com/fonts

动效设计用到的Airbnb开源的Lottie网址:https://airbnb.design/lottie/

苹果开发者中心网址:https://developer.apple.com/

苹果人机交互规范:https://developer.apple.com/design/human-interface-guidelines/

安卓设备的尺寸网址:https://material.io/tools/devices/Material Design

官方网站网址:https://material.ioSketch

的主题编辑器插件:https://material.io/tools/theme-editor