設(shè)計(jì)規(guī)范概念及主流平臺(tái)設(shè)計(jì)規(guī)范
一、什么是設(shè)計(jì)規(guī)范？
1.概念
概念
2.為誰(shuí)服務(wù)？
服務(wù)
3.好處
（1）控制設(shè)計(jì)質(zhì)量
（2）提高設(shè)計(jì)效率
二、主流系統(tǒng)平臺(tái)IOS的設(shè)計(jì)規(guī)范
1、IOS系統(tǒng)中ICON的設(shè)計(jì)規(guī)范
2、IOS系統(tǒng)中文字的設(shè)計(jì)規(guī)范
3、IOS系統(tǒng)中配色的設(shè)計(jì)規(guī)范?
4、點(diǎn)擊區(qū)域
【1】狀態(tài)欄目和導(dǎo)航欄
【2】?jī)?nèi)容視圖
【3】產(chǎn)品行為或顯示的信息按鈕、輸入框
【4】臨時(shí)視圖：臨時(shí)向用戶提供重要信息，提供額外功能和選項(xiàng)
5、UI交互手勢(shì)概述
6、UI的動(dòng)畫概述
UI動(dòng)畫的用途是傳遞狀態(tài)
通過視覺化方式向用戶呈現(xiàn)操作結(jié)果
三、主流系統(tǒng)平臺(tái)
Android
的設(shè)計(jì)規(guī)范
【計(jì)量單位】
1、安卓系統(tǒng)中ICON的設(shè)計(jì)規(guī)范
安卓是開源的系統(tǒng)ICON更多元化
2、安卓系統(tǒng)中字體的設(shè)計(jì)規(guī)范
3、安卓系統(tǒng)中配色的設(shè)計(jì)規(guī)范
相似色的漸變（基礎(chǔ)色）
強(qiáng)調(diào)色
主題色
主題色
4、點(diǎn)擊區(qū)域
視覺設(shè)計(jì)可以小于48DP，但點(diǎn)擊范圍圍48DP
5、交互手勢(shì)
6、動(dòng)畫規(guī)范
四、Web&H5頁(yè)面設(shè)計(jì)規(guī)范
1、網(wǎng)頁(yè)Web尺寸
分析：網(wǎng)易和騰訊作為門戶類網(wǎng)站，以及淘寶、知乎主頁(yè)996像素
結(jié)論：過大大多網(wǎng)頁(yè)以1000像素為界限，為了在小屏幕上也可以瀏覽
2、網(wǎng)頁(yè)Web主流瀏覽器
3、網(wǎng)頁(yè)Web手勢(shì)操作
4、Html5頁(yè)面（手機(jī)頁(yè)面）
【1】H5頁(yè)面的界面尺寸非常多，如何解決屏幕適配問題？
答：以響應(yīng)式網(wǎng)站的方法，增加不同屏幕的兼容性
【響應(yīng)式設(shè)計(jì)】
列如Behance，歲屏幕尺寸變化適配屏幕
【臨界點(diǎn)】
頁(yè)面尺寸發(fā)生的變化范圍就是臨界點(diǎn)
已知寬度范圍，可得出臨界點(diǎn)，知道寬度范圍處于某一個(gè)點(diǎn)時(shí)，頁(yè)面信息如何清晰展示
寬度變寬——展示信息變多
寬度變窄——展示信息縮減
【柵格】
將頁(yè)面變成幾欄、幾塊——頁(yè)面占比
12柵格在各類頁(yè)面下的展示：
【2】h5頁(yè)面動(dòng)效設(shè)計(jì)
H5界面要少用與瀏覽器頁(yè)面本身有沖突的操作
【3】使用Naive App的UI控件
facebook的Naive App的UI控件（左）和webUI控件（右）
五、移動(dòng)端設(shè)計(jì)規(guī)范
1、主流操作軟件
【1】ps
【2】AI
【3】Sketch
2、如何做設(shè)計(jì)規(guī)范？
（1）制定規(guī)范的時(shí)機(jī)
（2）規(guī)范文檔分為哪幾部分？
【UI規(guī)范例子】——網(wǎng)易考拉
1.色彩規(guī)范
控制輔助色數(shù)量
2.控件規(guī)范
3.文字和排版的規(guī)范
點(diǎn)擊色為客戶端主色調(diào)
字體小更精致
一般文字規(guī)范
一般文字配色規(guī)范（統(tǒng)一)
快速標(biāo)注工具：MARKMAN
六、切圖的基本規(guī)范
1、概念
2、哪些內(nèi)容需要切圖？
3、切圖圖片輸出要求
4、切圖尺寸
5、快速切圖方法
6、切圖命名規(guī)范
導(dǎo)航欄下按鈕的命名各式
7、安卓設(shè)計(jì)中如何做.9.png切圖？
用于安卓開發(fā)的一種特殊的圖片格式
可以設(shè)定圖形中可拉伸和不可拉伸區(qū)域
1、2標(biāo)識(shí)了可以拉伸的區(qū)域
3、4標(biāo)識(shí)了內(nèi)容區(qū)域
拉伸后的效果
修改內(nèi)容的橫向尺寸后，文字不再貼邊
將拉伸的點(diǎn)點(diǎn)在透明區(qū)域，這樣拉伸就不會(huì)再拉伸icon，而是透明背景
8、如何做.9.png切圖？
(1)可使用Draw9-patch
(2)用PS存為普通PNG格式
畫布大小上下左右各留出一個(gè)像素
用像素鉛筆工具，顏色純黑
上下左右分別畫點(diǎn)
保存時(shí)把后綴名改為.9.png
9、.9.png切圖注意事項(xiàng)
七、如何做Web端設(shè)計(jì)規(guī)范？
1、色彩規(guī)范
2、圖標(biāo)規(guī)范
3、控件規(guī)范
4、排版規(guī)范
先標(biāo)注一下文字上下和左右間距
5、字體規(guī)范
八、設(shè)計(jì)規(guī)范注意事項(xiàng)
1、規(guī)范設(shè)計(jì)的詳盡程度
2、實(shí)際工作中UI規(guī)范的使用
3、UI規(guī)范的更新和拓展
