讀書筆記03-《術與道》下

上篇地址

此書爲一份UI設計基礎指南，雖然說是基礎指南，卻有不少我在UI工做中並不知道的知識盲點，下面開始記錄：

06 創建規範

6.1 組件規範

6.1.1 設計規範目的 統一性、協同性、高效性

6.1.2 規範的組成 全局圖形（相似於App的吉祥物） 調色板：顏色 經常使用控件：圖片、圖標、按鈕、單選、複選、表格、輸入框、下拉框等 經常使用組件：加載動畫、翻頁、加載更多、頁面指示器、浮層反饋、信息提示、選顯卡和導航欄 典型頁面：App一級頁面

6.2 顏色規範

推薦使用HSB模式：設計控件顏色時，保持色值H不變，有規律的調整S和B便可。 經常使用灰度色板

色值	HSB
#333333	HSB:0 0 20
#666666	HSB:0 0 40
#999999	HSB:0 0 60
#cccccc	HSB:0 0 80

（App文字顏色能夠參考以上色值稍做調整）

6.2.2 建立調色板

一個完整的調色板，應包含主色、輔助色和灰度色。主色通常選用App圖標使用的品牌色，輔助色是指主色的近似色和對比色。

方法：先肯定主色的HSB，近似色通常在色環中+-30至50的H值，對比色通常+-180至200的H值。

6.2.3 調色板應用

1.全局色 主要用在文字和表單控件設計上。因爲灰度色的H值和S值沒有變化，因此只觀察B值

6.3 文字規範

6.3.1 iOS系統

iOS 中文：蘋方 英文：SF

6.3.2 Android系統

Android 中文：思源黑體 英文：Roboto

6.3.3 系統字號

iOS和Android的標準單位是PX和SP

字體大小參考：

36px  30px  28px 24px 22px 18px

6.4佈局

省略

---

07 設計組件

7.1 控制元素

7.1.1 活動指示器

不可預測任務進度使用活動指示器（轉菊花）

7.1.2 進度指示器

可預測進度使用進度指示器（進度條）

7.1.3 頁碼控制器

7.1.4 刷新控件

下拉刷新

上拉加載更多

7.1.5 滑動器（Slider）

不適合精確調整

7.1.6 開關（Switch）

切換兩種互斥選擇或狀態

7.1.7 步進器

加減數值的分段選擇器

7.2 篩選器

7.2.1 選擇器（Picker）

選擇器內容須要常見、可預見，若是不是，則不建議使用選擇器

7.2.2 時間日期選擇器（Date Picker）

最多4個獨立的可旋轉滑輪，每一個顯示不一樣的值

7.2.3 分段控件

7.2.4 選項卡

安卓特有的樣式，相似於純文字的分段選控件

7.2.5 排序

相似於下拉選擇器，根據不一樣內容和需求佈局

7.3 表單控件

不少H5頁面可不調用手機系統自己控件，因此能夠自定義不少控件樣式

7.3.1 單選框（Radio）

用於一組相關互斥的選項

7.3.2 複選框 （CheckBox）

用於一組互相關聯單內容不兼顧的選項

7.3.3 文本框

單擊文本框調用鍵盤（tips：若有其它方法，儘可能避免用戶輸入內容）

7.3.4 下拉框 （Drop List）

下拉框又叫下拉菜單，用於從一組互斥值列表中進行選擇。功能相似於Picker

7.4 按鈕規範

根據按鈕顏色的強弱賦予視覺優先級

7.4.2 背景+圖標

7.4.3 圖標+文字

7.4.4 文字

文字規範通常用於頂部導航上

7.5 其餘組件

7.5.1 加載更多

「加載更多」通常用在頁面底部，配合「活動指示器」使用

7.5.2 非模態浮層

相似於toast

7.5.3 模態浮層

模態浮層也叫對話框，模態浮層通常採用透明度90%的黑色或白色。

---

08 導航設計

8.1 扁平導航

標籤導航

駝式導航

宮格式導航

8.2 內容主導式導航

8.2.1 陳列式導航

8.2.2 旋轉木馬式導航

8.3 列表式導航

8.3.1 列表式

8.3.2 抽屜式

8.4 其餘導航

8.4.1 點聚式導航

8.4.2 瀑布式導航

---

09 界面設計

9.1 首頁

9.1.1 搜索欄

全透明導航欄

主色導航欄

9.1.2 標籤欄

標籤欄是全局導航

最多5個標籤

9.1.3卡片式設計

9.2 列表頁

9.2.1 消息列表

9.2.2 橫向卡片

9.2.3 瀑布流

高度須要定製一個極限值

9.3 詳情頁

9.3.1全局按鈕（吸頂/吸底按鈕）

9.3.2 快速通道

當進入到層級比較深的頁面時能夠經過快速通道回到首頁等頁面

9.4我的中心

「我的中心」也叫「個人」

9.5 啓動頁

1.品牌宣傳類

2.首頁樣式類

3.情感故事類

4.節日氣氛類

9.6 引導頁

1.功能介紹類

2.使用說明類

3.情感故事類

---

10 設計適配

10.1 iOS系統適配

10.1.1 設計基準

型號	分辨率	屏幕尺寸	PPI	像素倍率
iPhone 4/4s	640x960	3.5	326	@2x
iPhone 5/5c/5s	640x1336	4.0	320	@2x
iPhone 6/7/8 s	750x1334	4.7	326	@2x
iPhone X	1125x2436	5.8	458	@3x
iPhone 678plus	1242x2208	5.5	401	@3x

10.1.2 設計適配

Step1 設計基準稿

經過設計基準稿，自動上下適配各機型，此時屏幕大的手機，底部留白較多。（以下圖）

Step2 界面調試

對於一些界面應該根據不一樣屏幕從新設計（以下圖）

Step3 切圖輸出

• 若是用Photoshop作（以750x1334爲設計尺寸），標註@2x圖。@3x的標註和開發人員約定好，默認爲@2x的1.5倍，不用再單獨標註。

• 若是用Sketch作，（以375x667爲設計尺寸）標註@1x的圖。@2x和@3x的標註直接乘以2和乘以3便可，也不需單獨標註。

10.1.3 適配規則

• 文字流式：制定好頁面框架，定好模塊間距，文字根據屏幕寬度自適應排布。

• 控件彈性：頂部導航欄、底部標籤欄和底部工具欄等頁面中的模塊，在適配過程當中垂直高度不變，水平方向根據屏幕寬度自適應排布，經過調整元素間距或元素右對齊的方式實現自適應。

• 圖片等比縮放：按照設計倍率計算。

10.2 Android系統適配

10.2.1 密度獨立像素

在Android系統中，規定以160DPI（密度獨立像素Density Independent Pixels）爲基準，1DP=1PX，若是像素密度爲320DPI，則1DP=2PX，以此類推（其實和iOS的@倍率一個道理）

名稱	常見分辨率	像素密度	倍率	換算
MDPI	320x480	160	@1x	1dp=1px
HDPI	480x800	240	@1.5x	1dp=1.5px
XHDPI	720x1280	360	@2x	1dp=2px
XXHDPI	1080x1920	480	@3x	1dp=3px
XXXHDPI	2160x4096	640	@4x	1dp=4px

10.2.2 設計基準

根據熱門手機分辨率的統計數據結果，以XHDPI 720x1280 @2x爲設計尺寸 （PS設計稿爲720x1280px，sketch爲360x640pt）

10.2.3 適配方法

以720x1280爲設計稿 上下適配

10.3 iOS系統適配Android系統

10.3.1目的

快速高效

10.3.2 換算關係

書中內容比較老，我的結合工做中適配方法總結以下：

用sketch設計iOS @x1圖 375x667pt 對應到 360x640dp （XHDPI 720x1280的一半）而後再各自適配本身系統下的不一樣分辨率便可

10.4 標註設計

標註交給工具就是了，很少總結

Sketch用Sketch Measure插件 或者 墨刀

PS用得少，須要時百度

10.6.3 命名

界面或者功能+控件名+狀態+補充描述.png

Btn_submmit_normal_1.png

---

讀書筆記02-《術與道》下篇完