讀書筆記02-《術與道》上

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

01 基礎知識

1.1什麼是UI設計

1.1.1 UI的相關概念

UI=User Interface UI包括了WUI（Web Uer Interface）和GUI（Graphics User Interface） UCD=User Centered Design以用戶爲中心的設計 UCD強調以用戶爲中心，雖然給用戶體驗設計指出了方向，但產品設計須要考慮BTU( Business+Technique+User)三圈層，畢竟全部的產品，最終都會走向商業化。

1.1.2 UI的學習方法 1.圖形基礎 2.軟件 3.設計規範 4.臨摹 5.參與到項目中

---

1.2 什麼是App

1.2.1 App的概念 App=Application 運行在手機上的應用程序軟件

1.2.2 App的開發流程

UI只是開發流程的一環

---

1.3 智能手機屏幕

1.3.1 英寸（Inch）

3.5英寸表示手機屏幕對角線的長度。爲了得到最高玻璃切割利用率，節約成本，常見屏幕尺寸有：3.5英寸、4.三、4.7和5.5英寸。

1.3.2 像素 （pixel） 1像素=顯示屏的1個物理點

1.3.3 分辨率（Resolution） 屏幕上水平和豎直兩邊的像素點，如：iPhone8的屏幕分辨率爲750x1334（pixel）

---

1.4 網點密度與像素密度

1.4.1 網點密度（DPI） DPI=Dot Per Inch 描述印刷品打印精度

1.4.2 像素密度（PPI） PPI=Pixel Per Inch 表示每英寸像素點數量

1.4.4 物理分辨率與邏輯分辨率 物理分辨率是硬件所支持的分辨率，邏輯分辨率是軟件能夠達到的分辨率。

1.4.5 視網膜屏幕 手機屏幕距離眼睛10-12英寸（25-30釐米）時，分辨率達到300PPI（每英寸300個像素點）以上，眼睛就沒法分辨出像素點了，這樣的屏幕被稱爲"視網膜屏幕」。

1.4.6 熱門手機規格 大部分手機已使用視網膜屏幕，大部分手機屏幕都在4英寸以上（喬布斯堅持認爲3.5英寸是最佳尺寸）。

---

1.5 常見手機屏幕規格

1.5.2 熱門手機分辨率

iOS尺寸	市場佔比
750x1334	34.1%
1242x2208	23.3%
640x1136	22.8%
2048x1536	8.2% （平板電腦）
640x960	5.6%

|安卓尺寸|市場佔比| | :---| |720x1280 | 30.9%| |1080x1920 |29.6%| |480x854 | 9.6%| |540x960 | 6.8%| |720x1184 | 4.1%| （2016年12月數據）

1.6 iPhone 6/7/8plus的尺寸

物理分辨率：1080x1920 設計分辨率：1242x2208 邏輯分辨率：414x736 這是蘋果官方給出的一套適配方案，414x736x@3倍圖=1242x2208(設計分辨率) 1242x2208縮小1.15倍=1080x1920(物理分辨率，也就是硬件的分辨率)

1.7 智能手機傳感器

1.7.1 攝像頭 攝像頭分爲前置與後置攝像頭，後置質量較高

1.7.2 麥克風 聲波傳感器

1.7.3 GPS GPS（全球定位系統）原理：測量出已知位置的衛星到手機傳感器之間的的距離，而後綜合多顆衛星的數據計算出手機的具體位置。民用級GPS偏差爲3米。（導航GPS，在進入無信號區域時，另外一個傳感器：三軸陀螺儀，會測量汽車的偏航或直線運動位移，而繼續導航）

1.7.4 電子羅盤 電子羅盤也叫方位傳感器，利用地磁場定位北極。電子羅盤配合GPS和地圖時，可快速定位方向。

1.7.5 重力感應器 重力感應器由蘋果公司率先開發，經過感知手機重心變化，來獲取數據。 案例：手機橫屏、豎屏自動切換，計步器等。

1.7.6 加速傳感器 加速傳感器能測量手機3個方向的加速度，手機靜止時沒有數據傳輸 案例：微信搖一搖

1.7.7 光線傳感器 光線傳感器能檢測環境的亮度，調節屏幕亮度

1.7.8 距離傳感器 距離傳感器位於手機聽筒附近，經過紅外LED燈發出不可見信號並檢測反射信號。 案例：打電話時，手機屏幕會自動熄滅，而臉離開屏幕時，屏幕會自動開啓（減小手機電力消耗，以及防止誤操做）。

1.7.9 氣壓傳感器 氣壓傳感器經過測量出手機所處海拔高度，測算出氣壓。

1.7.10 三軸陀螺儀 三軸陀螺儀同時定位6個方向的位置、移動軌跡和速度。 案例：手機拍照防抖。按下快門時，陀螺儀記錄手的抖動動做，經過數據處理計算出最佳照片效果 案例：導航GPS，在進入無信號區域時，三軸陀螺儀會測量汽車的偏航或直線運動位移，而繼續導航 案例：戰鬥機遊戲、賽車遊戲

小結：傳感器技術對智能手機的發展起到巨大的推進做用，同時手機應用生態系統不斷創新發展，市場需求又不斷推進硬件技術的進步，相輔相成。

---

02 設計風格

2.1 風格

2.1.1 什麼是設計風格 設計風格是一種視覺感覺，確立設計風格是一個應用程序設計過程的開始。

2.1.2 如何確立設計風格 1尋找產品氣質 2肯定主色 3圖標插圖 4選擇字體 5排版 6文案（這裏補充下，文案風格一樣影響設計風格）

2.2 顏色

2.2.1 認識色彩

1 主色 2 輔色 3 點睛色(輔色2)

2.2.2 RGB與HSB

RGB色彩模式由紅Red、綠Green、藍Blue三色通道的變化相互疊加組成，每一個顏色有255種不一樣色值，因此RBG的色彩總數爲255x255x255=1678萬色。

HSB色彩模式由色相Hues、飽和度Saturation、和明度Brightness組成

2.2.3顏色搭配基礎

1 色環-一般包括12種不一樣顏色，他們收尾連在一塊兒造成了色環 2 互補色-色環中兩個相對的顏色即爲互補色，如紅色和青色就爲互補色 3 三色搭配原則-一個設計做品中，單個頁面顏色儘可能保持在三色之內。這裏的顏色指的是色相，就是HSB色值中的Hues。

2.3 如何選擇顏色

2.3.1 常見的App顏色 數據統計，最多見的App顏色爲：白、藍、紅、綠、黃、橙、粉。白色和藍色App最多，白色背景爲最經常使用背景，因此當你不知道怎麼肯定App顏色時，用白色和藍色不會錯。

2.3.2 顏色的性格 不一樣顏色表示不一樣性格，這裏不作總結

2.4 字體

2.4.1 襯線體和無襯線體 無襯線體更適合長期閱讀

2.4.2 系統內置字體

iOS 11 中文：蘋方 英文：San Fransico （此時iOS 12剛剛發佈，還未上市） Android 8.0 中文：思源黑體 英文：Roboto

2.4.3 何時使用內嵌字體 iOS系統預設了超過180種西文字體，但只有一種中文字體（蘋方），所以只能使用系統默認的中文字體。 Android系統下，用戶有很高的系統權限，能夠自定義字體，但容易形成視覺混亂且中文字體包文件較大，不建議使用。

2.4.4 如何使用內嵌字體 1 內嵌英文字體-在一些有特殊須要的頁面或App（如金融App的金額數字），能夠只考慮置入數字，通常字庫文件很大，包括不少中文字符和字母字符，可使用FontCreator軟件對字庫進行剪裁壓縮。 2 內嵌中文字體-漢儀開發的全新移動App字體，基於Fulltype技術壓縮後的中文中體只有幾百kb（正常是5-10Mb），但此項服務需收費。網易新聞App則使用了漢儀旗黑字體。

---

03 圖標與圖片

3.4 iOS圖標規範

3.4.1 iOS圖標適配 帶@2x、@3x的圖標分別用在2倍率和3倍率的Retina（大於300PPI）屏幕上

設備	邏輯分辨率	像素倍率	物理分辨率	PPI
iPhone 3GS	320x480	@1x	320x480	163
iPhone 4/4s/4c	320x480	@2x	640x960	326
iPhone 5s	320x568	@2x	640x1336	326
iPhone 6/7/8 s	375x667	@2x	320x480	326
iPhone 6/7//8/ s Plus	414x736	@3x	1242x2208	326
iPhone X	375x812	@3x	1125x2436	463

3.4.2 iOS圖標標準 1 App圖標 App圖標指應用圖標，尺寸爲120x120，系統會統一切圓角

圖標尺寸	圓角
57x57	10
114x114	20
120x120	22
180x180	34
512x512	90
1024x1024	160

3.5 Android圖標規範

3.5.1 Android圖標適配 安卓屏幕安卓像素密度

屏幕類型	屏幕簡稱	對應iOS倍率
低密度屏幕	LDPI	@0.75x
中密度屏幕	MDIP	@1x
高密度屏幕	HDPI	@1.5x
超高密度屏幕	XHDPI	@2x
超超高密度屏幕	XXHDPI	@3x
超超超高密度屏幕	XXXHDPI	@4x

3.5.2 圖標視覺統一 採用圖標輪廓圖，iOS也能夠用這種方法

3.5.3 Android圖標標準 App應用圖標，在Android系統裏也叫Launcher圖標，Android圖標產出必須帶圓角：

圖標尺寸	圓角
48x48	8
72x72	12
96x96	16
144x144	24
192x192	32
512x512	90

3.7 像素對齊

使用Photoshop時，圖標邊緣需對齊像素，方法一：屬性面板手動調節數字爲偶數。方法二：直接選擇工具下，勾選路徑邊緣自動對齊。

3.7.3 像素縮放的對齊 Ctrl+T 縮放後，選用路徑選擇工具選中圖形，再用鍵盤上下左右移動，路徑會自動吸附對齊像素網格。

3.8 圖片的使用

3.8.2 圖片的格式 1 JPG=Joint Photographic Experts Group （聯合圖像專家組）一種有損壓縮格式 因爲JPG可壓縮比較大，banner等廣告圖建議用jpg格式再壓縮 儲存文件時，選擇「儲存爲Web全部格式」

2 PNG=Portalbe Network Graphics （可移植網絡圖形) 一種無損壓縮格式 PNG8 256色 支持全透明 PNG8無半透明，設置雜邊與背景一致便可 PNG24 約1600萬色 支持半透明 （適用與應用包裏的圖標）

---

04 iOS系統界面

4.1 欄

4.1.1-4.1.2-4.1.3

控件	尺寸
狀態欄	40px
導航欄	44px
底部導航欄	49px

4.1.4 工具欄 工具欄位於界面底部，不能與底部導航欄同時存在

4.2 內容視圖

4.2.1 表格視圖（table view） 1.平面型表格-在單元表格裏，標題默認左對齊，標題左邊能夠加圖標，表格高度可根據內容變化 2.輔助說明型-主標題下面有副標題 3.內容強調型-主標題在左，副標題在右側

4.2.3 Web視圖 Web view是在應用中嵌入的H5頁面，優勢是無需等待版本更新

4.3 臨時視圖

4.3.1 對話框 如modal彈框

4.3.2 操做列表 以下拉選擇器

---

05 Android系統界面

5.1 導航機制

5.1.1 硬件特性 iOS設備只有一個Home鍵。iOS定義全部App入口爲圖標；全部App出口爲Home鍵；全部前進後退都由App中的虛擬按鍵控制，最大限度下降用戶學習成本； Android設備通常有3個按鍵，分別是返回鍵、Home鍵和菜單鍵。由於Android系統代碼是高度開放的，因此各個品牌手機能夠深度定製本身的UI和功能位置。

5.1.3 Android導航機制 Android導航系統較靈活，底部返回是基於時間軸的，左上角的向上鍵是基於App邏輯的，因此兩個按鈕可能回到的頁面不一樣。

5.2 界面佈局

5.2.1 結構差別 iOS和Android系統最典型的差別是，iOS系統在底部放置標籤，Android則把標籤欄放置在頂部導航欄下面。

5.2.3 多任務 iOS經過雙擊Home鍵進入多任務操做 Android的話，國內手機基本上通過各自廠商的自定義，並無統一的交互方式。

5.3 消息推送

5.3.1 推送方式 1.iOS iOS系統推送（APNS，即Apple Push Notification Service）依託於一個或幾個常駐進程運做，是全局的（接管全部應用的消息推送），因此能夠看作是獨立於應用以外的，並且是設備和蘋果服務器之間的通訊，而非應用的提供商服務器。 例如：咱們收到一條微信通知，事先是由微信的服務器給蘋果公司發出通知，而後再中轉傳送到你的設備上。

2.Android Android系統推送相似於傳統桌面電腦系統。每一個須要後臺推送的應用都有各自的後臺進程，才能和各自的服務器通訊。 因此，iOS系統的消息推送自己沒有常駐的後臺進程，系統的開銷少，內存使用更少，電量消耗也少（把更多的運算和資源開銷放在雲端，而非設備端）。而Android系統的特色是把推送權放在開發者手裏。

5.3.2 通知方式 iOS通知方式：1，條幅式；2，icon右上角；3，彈出式；4，聲音通知。 Android方式：1，通知區域提醒；2，進行中的通知；3，彈出式通知；4，提示條通知。

5.4 操做方式

5.4.1 iOS系統在可編輯頁面中，點擊右上角「編輯」進入編輯模式，若是編輯模式過多，能夠在底部增長操做欄，最後點右上角「完成」完成操做； Android系統經過長按導航條進入選擇模式，導航條隨即變成操做條。（目前國內手機都不多用到Android官方某些交互）

5.4.2 選擇 iOS選擇以底部彈起modal半框選擇器爲主，Android多采用下拉式菜單。

5.4.3 複製粘貼 iOS和安卓都可以長按文字彈出操做框選擇複製或更多功能。

5.4.4 刪除 iOS在列表中向左滑動出現刪除按鈕，Android是1長按浮出層，2選擇條目，3在菜單層上選擇刪除。

5.5 Android系統的插件

5.5.1 桌面插件 Android系統可使用桌面插件，這是Android獨有功能。

5.5.2 設計趨勢 插件逐漸消失

---

讀書筆記-《術與道》上篇完
下篇地址