兔渣的移动端以及web的UI设计规范与资源整理

2016-07-24 本文已影响1226人 Rab

前阵子在公司负责设计规范的制定，主要是根据官方规范以及公司产品需求制定出一套内部guideline,去掉了公司内部资料相关的文档，在这边仅对通用的规范，收集的资料和工具，先做个简单的纪录和分享吧，会持续更新的（也许）！

1. 设计规范

1.1 移动端

移动端分为原生app设计和移动网页设计，原生app遵循苹果和谷歌的官方文档，在设计时尽可能的使用手机系统自带的组件，保证视觉和操作的统一性。

官方设计规范英文版（Google的要梯子）
iOS Human Interface Guidelines
Google Material Design
官方设计规范中文翻译版
ios9 人机交互指南
 Material Design 中文版

移动网页规范
手机上的移动网页，即不是原生开发的页面，我们以微信团队出品的weUI作为规范参考。设计时可以按照weUI所定义的设计元素进行制作。
weUI组件
 weUI视觉标准 sketch
weUI实例页面

1.2 PC端

pc端的网页设计，基于bootstrap框架设计响应式的网页，以适配不同尺寸的屏幕。设计时尽量使用bootstrap的默认参数和组件，保证视觉和操作的统一性。

bootstrap3 中文文档
bootstrap的文档中介绍了页面的CSS属性以及各组件的基准样式，在设计时尽量以此为标准。
antdesign
当有一些特殊的界面或交互样式bootstrap里没有提及的，可以参照antdesign.

2. 设计流程以及工具

2.1 功能和流程的交互线框图

制定流程的过程中，可以使用线框组件或示例图，快速的组合出页面流程，从而确定页面需求。

墨刀 (推荐)
操作方便快速，适合跳转逻辑比较简单的交互，基本上可以满足移动端的交互和效果预览。
Axure
功能全面，适合比较复杂的页面，以及详细的交互说明。

2.2 视觉效果图

页面流程确定后开始视觉效果图的设计，PS中我们以7501334px*， 72ppi为设计稿尺寸。

photoshop cc 2015
sketch
illustrator

Photoshop推荐使用cc2014 以上的版本，因为新加入的“画板”功能，以及CC以上版本对于矢量图形的编辑功能加强，都利于了移动页面的开发。（请抛弃CC以下的版本）

跨屏预览:
使用app在手机上实时预览电脑工作稿的效果

photoshop内置Device preview
sketch内置mirror
以上两款内置功能都需要下载搭配的app，但是adobe preview在中国区苹果商店是搜不到的，只能切换到美区；而sketch到mirror需要30元付费下载。
PS play (推荐)
推荐使用腾讯出品的免费app PS play.
ICON STRIKE!
专门用于预览app icon在手机桌面上的效果。

2.3 标记图

设计稿完成后，需要给前端交付标记图，以保证设计准确呈现。

标你妹啊 (推荐)
在线自动标注工具，简便。上传psd至网站，分享链接给前端人员，即可自行查看标记信息。

Assistor PS
辅助手动标记工具，ps外挂软件，单独运行，可在图层上生成标记图层。

Zeplin
zeplin和标你妹啊类似，导入文档自动标记，除此之外Zeplin还会生成一份当前文件字体和颜色的style guide，同时可以添加文字评论，并包含切图资源。不过由于Zeplin为境外服务器，注册时需要梯子，注册后使用不需要梯子。

2.4 资源切图

ios需要切@2x和@3x两种的图
安卓需要hdpi,xhdpi,xxdpi三种尺寸的图
界面中的元素都以矢量图形来绘制
sketch和phtoshop cc 2015都有了快速切图功能，可以直接切图。

切图插件cutterman (推荐)
windows下的Photoshop切图插件，快速一键导出安卓和ios所需尺寸的资源图片。
web图标可以使用icon font文件，将图形以类似字体的形式嵌入到页面中. 图标来源如阿里巴巴矢量图标库，fontawesome.
也可以导出svg或pdf格式的矢量图片，程序可以基于一套资源自动适配大小。AI和sketch都可以生成矢量图标，PS则需要借助插件zeick,将ps的文件导出成svg格式.

其它切图插件LayerCraft.

2.5 软件下载

adobe cc2015全家桶下载
http://pan.baidu.com/s/1qYPCEU4
（感谢@vposy）
下载后为ISO格式，win7系统安装虚拟光驱软件deamon tools后打开；
win10系统使用右键“资源管理器”打开;
解压密码@vposy
该全家桶已自动破解，安装完成即可使用.
更新adobe cc 2017版网盘（独立下载）
链接: https://pan.baidu.com/s/1miyPQOC 密码: 9fcg

3. 资源网站

3.1 矢量图标资源

3.2 UI Kit 组件模版资源

iOS9 ui组件
 Android L ui组件
 Material Design
Sketch APP sources

3.3 无版权大图资源（有些需要翻墙）

Gratisography
时尚风格的图片，免费个人，商用

http://jaymantri.com/
每周更新七张图片，可以随意使用。

picjumbo
图片，插画，矢量。免费使用

life of pix
免费高清图片，多为欧洲景观

pixbay
综合免费图片库

3.4 灵感图参考图

花瓣网综合图片搜索
behance 图形，交互，整套设计
dribbble 图形，动效设计
90设计电商 banner
shutterstock 矢量插图，图标
Pinterest 综合图片搜索
365psd 免费psd，矢量UI素材

→→ 更多关于图库的集中整理

3.5 充电网站和行业用户体验团队博客

UI中国
 优设
 腾讯社交用户体验设计团队IXUI
腾讯移动互联网团队
 阿里巴巴国际用户体验团队
 网易用户体验中心

3.6 配色方案

MD 配色
https://www.materialui.co/colors
color favs
http://www.colorfavs.com/ 基于图片生成配色板
Brand Colors
https://brandcolors.net/ 大品牌们的配色参考

3.7 图片处理

TinyPNG 高质量的在先PNG压缩网站
智图腾讯出品的在先压缩PNG，JPG，转化webP网站
Super Tools 在线识别图片上的文字的软件，可以将图片上的文字转换为PDF、Word进行复制粘贴

TBC.. ^_