UI/UX 设计规范与资源整理

规范

1. 设计规范

1.1 移动端

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

• 官方设计规范英文版
  iOS Human Interface Guidelines
  Google Material Design

• 官方设计规范中文翻译版
  ios9 人机交互指南
  Material Design 中文版

• [中台]移动设计规范
  根据对官方文档的分析以及我们的产品的页面需求，我们总结出了目前中台系统下移动端的设计规范。该规范主要以IOS的设计为标准，同时根据行业主流APP中的界面交互方式，归纳出通用样式的app所需的设计元素以及典型页面的设计规范。
  →查看规范

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

  weUI组件
  weUI视觉标准 sketch
  weUI实例页面

  weUI手机预览二维码
  

1.2 PC端

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

• bootstrap3 中文文档
  bootstrap的文档中介绍了页面的CSS属性以及各组件的基准样式，在设计时尽量以此为标准。

• antdesign
  当有一些特殊的界面或交互样式bootstrap里没有提及的，可以参照antdesign.

• 中台管理后台web设计规范
  中台的布局规范和基本组件都按照bootstrap的默认参数，特殊页面需求参考了antdesign以及行业其它管理后台的样式。
  查看规范

2. 设计流程以及工具

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

制定流程的过程中，可以使用线框组件，也可以直接截图参考案例，快速的组合出页面流程，从而确定页面需求。

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

2.2 视觉效果图

页面流程确定后开始视觉效果图的设计，PS中我们以750*1334px， 72ppi为设计稿尺寸。（原因详情见中台移动端设计规范-尺寸标准）

• photoshop cc 2015
• sketch
• illustrator

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

2.3 软件下载

windows版本：\192.168.2.242\互动部硬盘\软件分享
Mac版本 百度网盘: http://pan.baidu.com/s/1pLeqptx 密码: 1m5i
Mac Adobe 破解方式

2.4 跨屏预览

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

• photoshop内置Device preview

• sketch内置mirror
  以上两款内置功能都需要下载搭配的app，但是adobe preview在中国区苹果商店是搜不到的，只能切换到美区；而sketch到mirror需要30元付费下载。

• PS play (推荐)
  推荐使用腾讯出品的免费app PS play.

• ICON STRIKE!
  专门用于预览app icon在手机桌面上的效果。

2.5 标记图

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

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

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

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

2.6 资源切图

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

• 切图插件cutterman (推荐)
  windows下的Photoshop切图插件，快速一键导出安卓和ios所需尺寸的资源图片。

• web图标可以使用icon font文件，将图形以类似字体的形式嵌入到页面中. 图标来源如阿里巴巴矢量图标库，fontawesome 等。

  查看：使用阿里巴巴矢量图标库协作管理iconfont库

• 也可以导出svg或pdf格式的矢量图片，程序可以基于一套资源自动适配大小。AI和sketch都可以生成矢量图标，（更新）PS CC 自动切图功能 参考此文章 https://isux.tencent.com/ps-photoshop-cc-fd.html

• 其它切图插件LayerCraft.

3. 资源网站

3.1 图标资源

阿里巴巴矢量图标库 (推荐) 网页常用的基本svg png ai图标，同时方便库管理
fontello (推荐) 库数量大，质量也不错
fontawesome 库也很多，但是图标风格不太适合国内产品
iconfinder
eaysicon
ico moon
Material icons
iconninja可以搜到好看的svg，不仅仅是纯色图标。

Tips:关于阿里巴巴矢量图标库的使用实践

3.2 UI Kit 组件模版资源

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

3.3 图片以及设计资源库

3.3.1 灵感图 参考图

dribbble 图形设计，动效设计

Pinterest 综合图片搜索，灵感图

花瓣网 综合图片搜索

behance 图形，交互，整套设计

shutterstock 高质量图片，图标，图形设计平台，付费使用（贵死人，可供灵感参考）

bannerdesign banner设计欣赏网站

海洛视觉 shutterstock中国版

3.3.2 UI库，界面素材

freepik （买不起shutterstock的就用它吧……）
普通用户下载使用资源需要声明作者，会员用户无需声明作者，并且可以下载会员专属资源。 会员$7.5/mon

(公司已购买freepik年费会员，需要账号私Q我)

uilcound 适合按照UI组件搜索，有很多组件样式的参考

flypixle 网站类似dribbble， 很多设计师分享的UI设计

爱果果 酷站欣赏，UI分享下载

365psd 免费psd，矢量UI素材

subtlepatterns 平铺背景图

3.3.3 无版权图片库

有时候一些设计需要背景图或者气氛图，使用合适的图基本上就完成了一半的工作了~

pixbay 综合免费照片库

unsplash 大图，色调都调过的美大图

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

Jay Mantri 每周更新七张图片，可以随意使用。

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

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

90设计 电商 banner 背景图 每日三张免费下载，成为VIP后可以自由下载

摄图网 类似90设计

foodiesfeed 专注食物类的大图

3.4 配色方案

MD 配色
https://www.materialui.co/colors
color favs
http://www.colorfavs.com/ 基于图片生成配色板
lolcolors
http://www.lolcolors.com/ 简单方便的四色搭配网站，LOGO喜感

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

优设
设计达人
UI中国

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

3.6 图片处理

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