視覺設計需閱讀的篇章：
iOS設備的各種屏幕尺寸
圖像大小與分辨率
iOS用於在屏幕的分辨率分別有@ 1x，@ 2x和@ 3x。
假設有一個100px×100px的標準分辨率（@ 1x）圖像。該圖像的@ 2x版本為200px×200px，@ 3x版本為300px×300px。
設計高分辨率時應注意：
- 使用8px-by-8px網格。
網格保持線條清晰，確保內容在所有尺寸下盡可能清晰，需要較少的修飾和銳化。將圖像邊界捕捉到網格，以最小化縮小時可能出現的半像素和模糊細節。
- 使用適當的格式製作藝術作品。
通常，對位圖/柵格圖稿使用去隔行PNG文件。PNG支持透明度，因為它是無損的，壓縮工件不會模糊重要細節或改變顏色。對於需要陰影，紋理和高光等效果的複雜藝術品來說，它是一個不錯的選擇。將JPEG用於照片。它的壓縮算法通常比無損格式產生更小的尺寸，並且在照片中更難辨別偽像。但是，照片般逼真的應用程序圖標在PNG中看起來效果最佳。將PDF用於需要高分辨率縮放的字形和其他平面矢量圖稿。
- 將8位調色板用於不需要完整24位顏色的PNG圖形。
使用8位調色板可減小文件大小而不會降低圖像質量。此調色板不適用於照片。 - 優化JPEG文件以在大小和質量之間找到平衡。
可以壓縮大多數JPEG文件，而不會導致生成的圖像明顯降級。即使少量壓縮也可以節省大量磁盤空間。嘗試對每個圖像進行壓縮設置，以找到產生可接受結果的最佳值。
- 為圖像和圖標提供替代文本標籤。
替代文字標籤在屏幕上不可見，但它們讓VoiceOver可以直觀地描述屏幕上的內容，使視力障礙人士更容易導航。
Multitasking Size Classes：
在iPad上，當您的應用程序以多任務配置運行時，大小類也適用。
一般佈局注意事項
- 確保主要內容以其默認大小清除。
除非他們選擇更改大小，否則人們不應該水平滾動來閱讀重要文本，或者縮放以查看主要圖像。
- 在整個應用中保持整體一致的外觀。
通常，具有類似功能的元素應該看起來相似。
- 使用視覺重量和平衡來傳達重要性。
大件物品吸引眼球，看起來比較小物品更重要。較大的物品也更容易點擊，這在應用程序用於分散注意力的環境時尤為重要，例如在廚房或健身房。通常，將主要項目放置在屏幕的上半部分中，並且在從左到右的讀取上下文中 - 靠近屏幕的左側。
- 使用對齊可以簡化掃描並與組織和層次結構進行通信。
對齊使應用程序看起來整潔有序，幫助人們在滾動時集中註意力，並使查找信息變得更加容易。縮進和對齊還可以指示內容組如何相關。
- 如果可能，支持縱向和橫向。
人們更喜歡在不同的方向使用應用程序，因此最好能夠滿足這種期望。
- 為交互式元素提供充足的觸摸目標。
嘗試為所有控件保持44pt x 44pt的最小可點擊區域。
- 在多個設備上預覽您的應用。
您可以使用模擬器（Xcode附帶）來預覽您的應用程序並檢查裁剪和其他佈局問題。如果您的應用支持橫向模式，請確保您的佈局看起來很棒，無論設備是向左還是向右旋轉。全屏iPhone不支持倒置肖像模式。某些功能（如寬彩色圖像）最適合在實際設備上預覽。
- 在較大的設備上顯示文本時應用可讀性邊距。
這些邊距使文本行足夠短，以確保舒適的閱讀體驗。
動畫
在網站中加入動畫會增加活潑度，但動畫不是有加就好，就像一面牆不是有顏色就叫漂亮。IOS 官方Guiildline 在動畫的項目中提到4點建議。
- 明智地使用動畫和動作效果。
不要為了使用動畫而使用動畫。過度或無償的動畫可能會讓人感到脫節或分心，特別是在沒有提供身臨其境體驗的應用中。iOS使用運動效果（例如視差效果）在主屏幕和其他區域創建深度感。這些效果可以增加理解和享受，但過度使用它們會使應用程序感到迷失方向並且難以控制。
動畫會吸引使用者目光與注意力，一個視覺畫面中最好只有一個物件在動作。兩個以上會令人分心，如果動畫是在要操作的按鈕或是連結上，反而會增加使用者判斷時間，甚至操作錯誤。 - 力求現實主義和信譽。
人們傾向於接受藝術許可，但是當運動沒有意義或似乎違背物理定律時，他們會感到迷失方向。例如，如果某人通過從屏幕頂部向下滑動來顯示視圖，則他們應該能夠通過向後滑動來解除視圖。
這段翻譯成白話文的意思就是，創新是好的，但有些約定俗成的操作行為，還是必須貼近的使用者的習慣。
- 使用一致的動畫。
熟悉，流暢的體驗讓用戶保持參與。他們習慣於iOS中使用的微妙動畫，例如平滑過渡，設備方向的流暢變化和基於物理的滾動。除非您正在創建沉浸式體驗，例如游戲，否則自定義動畫應與內置動畫相媲美。
這與設計師在挑選顏色與繪製ICON時需要注意的細節相同，使用者是在IOS系統下進行操作，IOS內建了許多通用APP，所以IOS的使用者每天在使用手機的時候，已經默默地被訓練這些暗示性的操作行為（滑動手勢、快速鍵、動畫暗示...），在設計瀏覽網站與APP，如果使用的動畫與iOS中使用動畫是一致的，使用者就可以更快熟悉介面操作。
- 使動畫可選。
在輔助功能首選項中啟用減少運動的選項時，您的應用應最小化或消除應用程序動畫。有關指導，請參閱Motion。
這項在網頁上能否做到我並不了解，但如果是製作PP的話，這應該要注意，讓使用者可對此進行控制。
顏色
顏色傳遞活力，提供視覺連續性，傳達狀態信息，響應用戶操作提供反饋以及幫助人們將數據可視化。IOS提到了下列注意事項：
- 明智地使用顏色進行交流。
當謹慎使用時，提高注意重要信息的顏色力量會增強。
例如，當出於非關鍵原因在應用程序中的其他地方使用紅色時，警告人們關鍵問題的紅色三角形變得不那麼有效。
這個例子就像是以前遇過的甲方，活動頁面上到處都要強調，強調的方法就是加大、加粗、變紅色，完稿之後設計師絕對堅決否認那是自己的作品啊XDDD。
- 在整個應用中使用補色。應用中的顏色應該很好地協同工作，而不是衝突或分散注意力。例如，如果粉彩對於應用程序的樣式至關重要，請使用一組協調的粉彩。
- 通常，選擇與您的應用徽標協調的有限調色板。微妙地使用顏色是傳達品牌的好方法。
- 考慮選擇色調顏色以指示整個應用程序的交互性。在Notes中，交互元素為黃色。在日曆中，交互式元素為紅色。如果您定義表示交互性的色調顏色，請確保其他顏色不與之競爭。
- 提供兩種版本的色調，以確保它在明暗模式下都很好看。當您使用系統顏色作為色調時，您可以自動支持高對比度。
- 避免對交互式和非交互式元素使用相同的顏色。如果交互式和非交互式元素具有相同的顏色，則人們很難知道在哪裡挖掘。
- 考慮藝術品和半透明度如何影響附近的顏色。藝術品的變化有時需要改變附近的顏色，以保持視覺連續性並防止界面元素變得過於強大或不足。例如，地圖在使用地圖模式時會顯示淺色方案，但在激活衛星模式時會切換為深色方案。放置在半透明元素後面或應用於半透明元素（如工具欄）時，顏色也會顯得不同。
- 在各種照明條件下測試應用程序的配色方案。根據房間的氛圍，時間，天氣等，室內和室外的照明都有很大差異。當您的應用在現實世界中使用時，您在計算機上看到的顏色看起來並不總是一樣。始終在多種光照條件下預覽您的應用，包括在晴天戶外，以查看顏色的顯示方式。如有必要，調整顏色以在大多數用例中提供最佳的觀看體驗。
- 考慮True Tone顯示如何影響顏色。True Tone顯示器使用環境光傳感器自動調整顯示器的白點，以適應當前環境的照明條件。主要關注閱讀，照片，視頻和遊戲的應用可以通過指定白點適應性樣式來增強或削弱此效果。有關開發人員指南，請參閱UIWhitePointAdaptivityStyle。
- 考慮如何在其他國家和文化中看到您對顏色的使用。例如，在某些文化中，紅色表示危險。在其他人看來，紅色具有積極的內涵。確保應用中的顏色發送相應的消息。
避免使用讓人們難以察覺應用內容的顏色。例如，色盲人可能無法區分某些顏色組合，而對比度不足會導致圖標和文本與背景混合併使內容難以閱讀。有關指導，請參閱顏色和對比度。
沒有留言:
張貼留言