【筆記】開源 Icon 字體 - Material icon font 使用方法

這是一套由 Google 設計的開源字型，免費供所有人使用，不得拿來販售。
https://material.io/

【筆記】IOS 切圖注意事項

ios在字體大小、圖片大小、距離標註，都以px為基本單位。

畫布尺寸	750x1334(px)
圖片格式	PDF
圖片感應區	88x88(px)以上
圖片尺寸	長寬必須為雙數
命名原則	全英文，切片種類+功能+狀態+倍率.pdf ex：btn_login_nor@2x.png
按鈕狀態	正常(normal)，按下(pressed)，選中(selected)，禁用(disabled)

需要標註的內容

此次標註工具：cutterman

文字	字體、字級、粗細、色碼 ios單位px，Android單位sp
header（標題欄）	背景色色碼、透明度
內容	單元間距、分格線粗細色碼
ICON	圖片名稱，尺寸，狀態

【筆記】 IOS 人機界面Guideline

視覺設計需閱讀的篇章：

https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/

1. iOS設備的各種屏幕尺寸

2. 圖像大小與分辨率

iOS用於在屏幕的分辨率分別有@ 1x，@ 2x和@ 3x。

假設有一個100px×100px的標準分辨率（@ 1x）圖像。該圖像的@ 2x版本為200px×200px，@ 3x版本為300px×300px。

設計高分辨率時應注意：

1. 使用8px-by-8px網格。
   網格保持線條清晰，確保內容在所有尺寸下盡可能清晰，需要較少的修飾和銳化。將圖像邊界捕捉到網格，以最小化縮小時可能出現的半像素和模糊細節。

2. 使用適當的格式製作藝術作品。
   通常，對位圖/柵格圖稿使用去隔行PNG文件。PNG支持透明度，因為它是無損的，壓縮工件不會模糊重要細節或改變顏色。對於需要陰影，紋理和高光等效果的複雜藝術品來說，它是一個不錯的選擇。將JPEG用於照片。它的壓縮算法通常比無損格式產生更小的尺寸，並且在照片中更難辨別偽像。但是，照片般逼真的應用程序圖標在PNG中看起來效果最佳。將PDF用於需要高分辨率縮放的字形和其他平面矢量圖稿。

3. 將8位調色板用於不需要完整24位顏色的PNG圖形。
   使用8位調色板可減小文件大小而不會降低圖像質量。此調色板不適用於照片。
4. 優化JPEG文件以在大小和質量之間找到平衡。
   可以壓縮大多數JPEG文件，而不會導致生成的圖像明顯降級。即使少量壓縮也可以節省大量磁盤空間。嘗試對每個圖像進行壓縮設置，以找到產生可接受結果的最佳值。

5. 為圖像和圖標提供替代文本標籤。
   替代文字標籤在屏幕上不可見，但它們讓VoiceOver可以直觀地描述屏幕上的內容，使視力障礙人士更容易導航。

Multitasking Size Classes：

在iPad上，當您的應用程序以多任務配置運行時，大小類也適用。

一般佈局注意事項

1. 確保主要內容以其默認大小清除。
   除非他們選擇更改大小，否則人們不應該水平滾動來閱讀重要文本，或者縮放以查看主要圖像。

2. 在整個應用中保持整體一致的外觀。
   通常，具有類似功能的元素應該看起來相似。

3. 使用視覺重量和平衡來傳達重要性。
   大件物品吸引眼球，看起來比較小物品更重要。較大的物品也更容易點擊，這在應用程序用於分散注意力的環境時尤為重要，例如在廚房或健身房。通常，將主要項目放置在屏幕的上半部分中，並且在從左到右的讀取上下文中 - 靠近屏幕的左側。

4. 使用對齊可以簡化掃描並與組織和層次結構進行通信。
   對齊使應用程序看起來整潔有序，幫助人們在滾動時集中註意力，並使查找信息變得更加容易。縮進和對齊還可以指示內容組如何相關。

5. 如果可能，支持縱向和橫向。
   人們更喜歡在不同的方向使用應用程序，因此最好能夠滿足這種期望。

6. 準備好進行文本大小的更改。
   人們期望大多數應用在設置中選擇不同的文字大小時進行響應。要適應某些文本大小的更改，您可能需要調整佈局。有關應用中文本使用情況的詳細信息，請參閱排版。

7. 為交互式元素提供充足的觸摸目標。
   嘗試為所有控件保持44pt x 44pt的最小可點擊區域。
   

8. 在多個設備上預覽您的應用。
   您可以使用模擬器（Xcode附帶）來預覽您的應用程序並檢查裁剪和其他佈局問題。如果您的應用支持橫向模式，請確保您的佈局看起來很棒，無論設備是向左還是向右旋轉。全屏iPhone不支持倒置肖像模式。某些功能（如寬彩色圖像）最適合在實際設備上預覽。

9. 在較大的設備上顯示文本時應用可讀性邊距。
   這些邊距使文本行足夠短，以確保舒適的閱讀體驗。

3. 動畫

在網站中加入動畫會增加活潑度，但動畫不是有加就好，就像一面牆不是有顏色就叫漂亮。IOS  官方Guiildline 在動畫的項目中提到4點建議。

1. 明智地使用動畫和動作效果。
   不要為了使用動畫而使用動畫。過度或無償的動畫可能會讓人感到脫節或分心，特別是在沒有提供身臨其境體驗的應用中。iOS使用運動效果（例如視差效果）在主屏幕和其他區域創建深度感。這些效果可以增加理解和享受，但過度使用它們會使應用程序感到迷失方向並且難以控制。
   
   動畫會吸引使用者目光與注意力，一個視覺畫面中最好只有一個物件在動作。兩個以上會令人分心，如果動畫是在要操作的按鈕或是連結上，反而會增加使用者判斷時間，甚至操作錯誤。
   
2. 力求現實主義和信譽。
   人們傾向於接受藝術許可，但是當運動沒有意義或似乎違背物理定律時，他們會感到迷失方向。例如，如果某人通過從屏幕頂部向下滑動來顯示視圖，則他們應該能夠通過向後滑動來解除視圖。

這段翻譯成白話文的意思就是，創新是好的，但有些約定俗成的操作行為，還是必須貼近的使用者的習慣。

3. 使用一致的動畫。
   熟悉，流暢的體驗讓用戶保持參與。他們習慣於iOS中使用的微妙動畫，例如平滑過渡，設備方向的流暢變化​​和基於物理的滾動。除非您正在創建沉浸式體驗，例如游戲，否則自定義動畫應與內置動畫相媲美。
   
   這與設計師在挑選顏色與繪製ICON時需要注意的細節相同，使用者是在IOS系統下進行操作，IOS內建了許多通用APP，所以IOS的使用者每天在使用手機的時候，已經默默地被訓練這些暗示性的操作行為（滑動手勢、快速鍵、動畫暗示...），在設計瀏覽網站與APP，如果使用的動畫與iOS中使用動畫是一致的，使用者就可以更快熟悉介面操作。

4. 使動畫可選。
   在輔助功能首選項中啟用減少運動的選項時，您的應用應最小化或消除應用程序動畫。有關指導，請參閱Motion。
   
   這項在網頁上能否做到我並不了解，但如果是製作PP的話，這應該要注意，讓使用者可對此進行控制。

4. 顏色

顏色傳遞活力，提供視覺連續性，傳達狀態信息，響應用戶操作提供反饋以及幫助人們將數據可視化。IOS提到了下列注意事項：

1. 明智地使用顏色進行交流。
   當謹慎使用時，提高注意重要信息的顏色力量會增強。
   例如，當出於非關鍵原因在應用程序中的其他地方使用紅色時，警告人們關鍵問題的紅色三角形變得不那麼有效。
   
   這個例子就像是以前遇過的甲方，活動頁面上到處都要強調，強調的方法就是加大、加粗、變紅色，完稿之後設計師絕對堅決否認那是自己的作品啊XDDD。

2. 在整個應用中使用補色。應用中的顏色應該很好地協同工作，而不是衝突或分散注意力。例如，如果粉彩對於應用程序的樣式至關重要，請使用一組協調的粉彩。

3. 通常，選擇與您的應用徽標協調的有限調色板。微妙地使用顏色是傳達品牌的好方法。

4. 考慮選擇色調顏色以指示整個應用程序的交互性。在Notes中，交互元素為黃色。在日曆中，交互式元素為紅色。如果您定義表示交互性的色調顏色，請確保其他顏色不與之競爭。

5. 提供兩種版本的色調，以確保它在明暗模式下都很好看。當您使用系統顏色作為色調時，您可以自動支持高對比度。

6. 避免對交互式和非交互式元素使用相同的顏色。如果交互式和非交互式元素具有相同的顏色，則人們很難知道在哪裡挖掘。

7. 考慮藝術品和半透明度如何影響附近的顏色。藝術品的變化有時需要改變附近的顏色，以保持視覺連續性並防止界面元素變得過於強大或不足。例如，地圖在使用地圖模式時會顯示淺色方案，但在激活衛星模式時會切換為深色方案。放置在半透明元素後面或應用於半透明元素（如工具欄）時，顏色也會顯得不同。

8. 在各種照明條件下測試應用程序的配色方案。根據房間的氛圍，時間，天氣等，室內和室外的照明都有很大差異。當您的應用在現實世界中使用時，您在計算機上看到的顏色看起來並不總是一樣。始終在多種光照條件下預覽您的應用，包括在晴天戶外，以查看顏色的顯示方式。如有必要，調整顏色以在大多數用例中提供最佳的觀看體驗。

9. 考慮True Tone顯示如何影響顏色。True Tone顯示器使用環境光傳感器自動調整顯示器的白點，以適應當前環境的照明條件。主要關注閱讀，照片，視頻和遊戲的應用可以通過指定白點適應性樣式來增強或削弱此效果。有關開發人員指南，請參閱UIWhitePointAdaptivityStyle。

10. 考慮如何在其他國家和文化中看到您對顏色的使用。例如，在某些文化中，紅色表示危險。在其他人看來，紅色具有積極的內涵。確保應用中的顏色發送相應的消息。

避免使用讓人們難以察覺應用內容的顏色。例如，色盲人可能無法區分某些顏色組合，而對比度不足會導致圖標和文本與背景混合併使內容難以閱讀。有關指導，請參閱顏色和對比度。

2018年的19個網頁設計趨勢

原文出處：19 web design trends for 2018
https://webflow.com/blog/19-web-design-trends-for-2018
年底了，照例觀察一下明年的設計趨勢發展，並且記錄心得。

1. 更普遍的互動和動畫
   頁面中加入更多微互動的動畫，但這些動畫並不會分散使用者的注意力。
   在網頁一開始出現的時候，區塊顯示、點選導覽以後跳到頁面下方，這些呈現方式是直接，甚至可說是粗魯的。區塊直接啪一下的出現在面前，完全的功能導向但也完全的沒有美感。
   
   現在使用者習慣看到，本來隱藏的區塊在點選了某個功能之後，緩緩的漸亮然後浮現，或是以滑動的方式呈現， 這造就了一種優雅的節奏，也提升了使用上的舒適感。

2018設計趨勢心得

1. 僅僅完成配色，不代表完成易用性設計
2. 界面漂亮，能增加使用者的耐心，但解決不了基本架構不良的問題
3. PC 與 手機是截然兩種不同的設計模式
   
   以www.agoda.com的表單來說

pc	行動裝置
單元區隔會使用框線 input 會保留框線 不介意左右兩欄	背景有底色，單元區隔用白色塊 input 只剩下底線 一列一欄訊息 input、按鈕有一定高度 input 的輸入，更在意操作時的動態提醒效果（title字體變小，變色，上移）

2017設計時常出現的錯誤

可視化層次結構可能無法幫助用戶理解其內容

1. 有色區塊太多，分散視覺重點
2. 物件太多，分散視覺重點
3. 文字顏色太淺難以閱讀
4. 區塊太緊密，無法閱讀 / 區塊太鬆散，沒有段落性
5. 標題與內容區隔太遠
6. 太多線條，造成畫面混亂
7. 單元區隔不夠
8. 畫面左右不平衡
9. 字體、配圖、間距...太大，造成不精緻，甚至畫面鬆散

缺少能指（解釋1）可能會降低交互性。


來源：維基百科符號學
（解釋1）符號學中，將指示符（sign），即是單一符號或符號系統根據其傳播模式而分類。所傳播之意味以使用的編碼而確定，並且將符號分成能指（Signifier）和所指（Signified）兩部分。廣義上，這種能指可以是一個字符、一個手勢、一段聲音或者是一切所見之物。但是一個能指和所指的對應關係，只有在一個集體共同認可才可以形成，而通常來說，這不僅與語言中的詞彙相關，且聯繫到語法。符號所代表的物事，也可能會因為社會和文化關係而帶有隱意。

2017 18個網站設計趨勢

2016年末，自然要來看一下，明年的設計趨勢發展。
這篇文章提到了18項2017年的設計趨勢：

18 web design trends for 2017

https://webflow.com/blog/18-web-design-trends-for-2017
附上原文出處，方便查看原文。

這裡列出其中幾項，作為自己未來設計時的首要考量：

1. 內容優先

   
   
   任何排版佈局都只是為了讓使用者專注在應該閱讀的項目，而且不影響閱讀速度。
   
   這點在台灣的網頁非常難以實現，客戶與老闆從來沒有在想客戶要看到什麼，在客戶與老闆雙重要求：
   『大一點』
   『紅色』
   『加粗』
   『加閃亮亮』....
   一大堆花俏搶眼各種顏色都上了同一個頁面之下，重點早就不知道被淹沒到哪裡去了。
     

RWD時， font-size 的單位

很久很久以前，web designer 只要考慮IE6 7 8 的時候，字體單位，只要用px就萬事OK。
有一天， 一個叫賈伯斯的人，拿出了一台iPad，從此....

px

優點：PhotoShop與CSS 通用

缺點：在移動裝置無擴充性

em

優點：在移動裝置有彈性

缺點：

1. PhotoShop上沒有em，從PhotoShop 的 px 轉換 em 要用猜的
2. 巢狀結構時具有繼承性（如下圖：第二層變成 2*2 = 4em）
   

rem

優點：

1. CSS3新增的一個相對單位（root em，根em）
2. 移動裝置上有彈性
3. 不繼承
4. 透過設定，能簡易與 px 換算

缺點：

2. PhotoShop上沒有em，從PhotoShop 的 px 轉換 em 要用猜的
3. 巢狀結構時具有繼承性（如下圖：第二層變成 2*2 = 4em）

目前採用rem，寫法如下

html { font-size:62.5%;} /*  相當於 10px*/

body { font-size:1.6rem; line-height: 1.5; font-family: "微軟正黑體", "Microsoft JhengHei";}

h1 { font-size: 4.0rem; } /* = 40px*/

h2 { font-size: 3.6rem; } /* = 36px*/

【筆記】APP UI 製作流程規範

關於置版

1. 如果是共用同樣的UI，先做 Android 再做 IOS
2. 起始製作畫布用2@：
1. Android：720x1134
2. IOS：640x1136
3. 所有單位，全部用偶數
4. 将垂直面和水平面都设置为8dp变量

單位：px

	Android			IOS
	螢幕W x H	nav bg H	切圖bg (不含狀態列)	螢幕W x H	nav bg H	切圖bg (包含狀態列)
1@	360x615	48	360x567	320x480	64	同螢幕高
2@	720x1230	96	720x1134	640x960 750x1334	128	同螢幕高
3@	1080x1845	144	1080x1701	960x1440	192	同螢幕高
4@				1242x2208 (iphone 6plus)	192	同螢幕高

https://apple.stackexchange.com/questions/242614/ios-background-image-height-width-in-xcode-for-1x-2x-3x

https://www.zhihu.com/question/25288571

http://www.ui.cn/detail/25876.html

Photoshop做圖置圖注意事項

1. 起始製作畫布用2@：
1. Android：720x1134(不含狀態列)
2. IOS：640x1136 (包含狀態列)
2. 所有單位，全部用8的倍數
3. 用混合效果產生的陰影、框線，必須為2的倍數

4. 點陣圖必須化為智慧型物件
5. 形狀
1. 必須採用向量，並勾選『對齊邊緣』
2. 為8的倍數

6. 圖層命名方式：
1. 全部採用英文
2. 一個頁面，一個資料夾，資料夾前加 -  (減號)
3. 底線區隔
4. 全部小寫
5. 屬性_頁面_功能_序號_狀態.png(jpg)
6. 例：btn_index_music_00_normal.png

	屬性	頁面/共用區塊	功能	序號	狀態
範例	btn	index	music	00	normal
說明	btn ...按鈕 bg  ...背景 nav...上方選單 pic ...圖片	nav...Navigation Bar tool...tool bar header... 刊頭 footer … 頁尾 index...首頁	music play pause		normal  ...一般 pressed...壓下時 delete

7. 按鈕命名方式有2種

按鈕按下時有變化，要製作兩張圖	按鈕只要製作一張圖

7. 
   

	Android	IOS
PSD解析度	72	72
起始製作畫布	720x1230(扣除上方.狀態列的高度)	640x1136(含狀態列的高度) → 先做android → 再用延展背景的方式拉大到750x1334 → 等比縮放到 640 x 1136 → 調整物件相對位置
各單元高度
物間起算點(x,y)	不含狀態列	包含狀態列
背景圖高度	不含： 狀態列 nav	全螢幕，包含： 狀態列 nav
輸出圖檔命名方式	在同一個資料夾 檔名上增加倍數標示 以背景為例：	4個資料加 檔名相同 以背景為例：
PS外掛 cut and slice me 輸出起始值	1個步驟： 1080直接輸出	2個步驟： 640→1 + 2@ 960→2@→改名3@
使用字體	只使用 24 pt, 28 pt, 32 pt,  40 pt, 68pt google 建議避免使用bold	苹果字体规格： A：导航栏标题：medium 34px； B：按钮和表头：light 34px C：表格标签：Regular 28px； D：Tab页图标标签：Regular 20px
Y軸起始點	從 Navigation Bar 開始	從 The Status Bar  開始
按鈕允許的做法	o 分成文字、背景，2層 o 按下時，改文字樣式 x 按下時，改背景樣式	o 分成文字、背景，2層 o 按下時，改文字樣式 o 按下時，改背景樣式

5. 
   

相關配套(宣傳)圖片

1. Android圖片資源、螢幕擷取畫面和影片 https://support.google.com/googleplay/android-developer/answer/1078870?hl=zh-Hant

2. IOS圖片資源、螢幕擷取畫面和影片

iOS Human Interface Guidelines > Icon and Image Design

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1

3. 列表說明

說明	Android尺寸(px)	IOS尺寸(px)	格式
google play宣傳圖	1024 x 500	無	jpg、png
手機開啟APP時的loading頁	無	640   x 960 750   x 1334 960   x 1440 1242 x 2208(iphone 6plus)	jpg
APP在手機上的icon	接受各種形狀，圓角要自己做 512  x 512→google_play 192  x 192→xxxdpi 144  x 144→xxdpi 96    x 96  →xhdpi 72    x 72  →hdpi 48    x 48  →mdpi	只有正方形，圓角不要做 1024 x 1024→IOS商店用 512   x 512 180   x 180 152   x 152 120   x 120 76     x 76	png
APP操作畫面配貼，數張	1080 x 1845	960   x 1440	jpg

4.