iOS設計新手指導
原文：Starter's Guide to iOS Design
由于有些開發者既做開發又做設計，我發現很多設計者們都對UI過渡，或是在iPhone以及iPad設計上的細節不同感到苦惱。在這個新手指導中，我會幫助你理清這些細節問題，介紹iOS和UI設計的概念。
界面
作為一個好的設計師，了解你的界面以及它的細節非常重要。我相信你已經見過不少像素低的圖片被過大的界面拉大的恐怖景象。同樣的，如果你對屏幕上像素的角色有所誤解的話，那么，你的設計就會出現模糊，壓扁，滿是馬賽克格子的情況。
iOS設備主要有兩種形式：iPhone以及iPad。不過由于iPhone 5，iPad mini以及Retina屏的存在，情況有些復雜。最重要的不同在于設備是否是Retina屏。Retina屏的清晰度很高，好的設計在它上面會看上去更 好。但是不幸的是如果設計上存在缺陷的話也會變的更明顯。
Retina屏幕
最新的iPhone和iPad設備都使用了Retina屏幕，超高分辨率屏幕讓人眼無法分辨出像素。Retina顯示屏的像素密度高，比非 Retina顯示屏的像素數量多了4倍。這種高分辨率的顯示讓文字變得更加清晰，可以顯示更清晰的細節。為Retina顯示屏設計比較復雜，所以這一塊非 常重要。
Pixels
一個像素是屏幕上最小的計算單位。它代表了顯示上的一個極小的方塊。如果你一直放大屏幕，你就可以看到它們，以及塊于塊之間的間隔。
絕對沒有寬度低于 1px的線，0.4像素的直線是不存在的。
Points
我們使用Points（pt）作為一個絕對的測量尺寸，1 Point可以代表多個像素。比如以point來測量，iPad的分辨率都是一樣的，iPhone以point來測量寬度也都是一樣的。（編注：像素是相對大小，而point是絕對大小。）
你需要使用Point來思考設計，而不是使用像素。但是有一點很重要，每個Point可以由很多像素組成，所以這里會有一些多出的細節問題。
現在來看看這些設備的分辨率吧。你可以看到iPhone 3GS和iPhone 4像素分辨率上有很大的變化，但涉及到元素尺寸，它們是沒有變化的。使用Point來思考設計在考慮物理尺寸（比如說手指的大小）和屏幕上的元素（比如說 一個按鈕）之間的互動的時候非常有用。
相關資料
Storyboards
很多設計師都選擇創建storyboard來開發高水平的app界面流程。storyboard的第一個版本通常是畫在紙上的，只是簡單地用文 字把box連接在一起。當你在紙上畫出多個屏幕后，你會發現想象在這些屏幕之間切換瀏覽會簡單的多。通常，那些不一致的和復雜的設計會立刻變得非常明顯。 你也有過很多次這樣的時候：我想要做（譯者注：某個功能或者設計）...但當你開始在屏幕上實踐的時候，會發現屏幕上沒有明顯的空間允許你操作自己的想 法。
你可以把最初的粗糙的storyboard作為一個框架來組織和設計一個更為豐滿的概念。草圖出來后，更詳細的storyboard可以方便其 他人與之進行交互，所以你可以花時間讓用戶“嘗試”你的設計，以此來了解他們是否理解產品。測試你的設計是你了解哪些行得通，哪些行不通的好辦法。
相關閱讀：
布局
當開始布局的時候，最好先不要去想裝飾的問題。你需要專注于UI的核心架構。簡單說，就是每個“小物件”放在屏幕上哪個位置。這是草圖和最終產品之間的一步，這時你可以做一個地保真度的版本，不致于花費你太多時間，如果整體布局需要重構時也不會浪費太多時間。
層級
層級有兩個重要任務：它讓用戶了解app的導航結構，讓用戶知道點擊一個按鈕會產生什么樣的效果。app通常都有一塊功能區域被劃分出來，一般 都是在屏幕底部以工具欄的形式呈現。現在許多app不再使用工具欄了，它們在側邊會打開一個"hamburger"菜單或者加載一個"grid" 菜單，app頂部以navigation bar輔助導航，方便用戶發現重要的東西。
UI模板
使用現有的原型工具和模板可以快速畫出一個app原型。現有的iOS模板可以給幫你做出有原生用戶界面感覺的原型，而且不需要花費很多時間。然 而使用這些模板可能會讓客戶帶來困惑，因為他們可能會認為這是完成品。所以很多設計師會使用有“繪畫”感覺的模板來制作原型。使用UI模板的一個缺點就是 你只能使用通用的UI元素，而不會去考慮制作新的，更適合的UI元素。
目標尺寸
選擇UI元素的尺寸大小（比如說按鈕，滑塊，開關等），通常說是在對細節和可用性進行平衡。由于手指觸摸點常常不是很精確，所以觸摸點的大小需 要和手指的大小差不多，蘋果指派的大小是44pt*44pt。如果你的觸摸目標在視覺上比較小，那你需要指派一個比實際視覺展示大點的觸摸區域。
目標位置
當在網上瀏覽時，你可能有過意外點擊的經歷，但這一點很少發生在鼠標點擊上。為了防止這種情況在移動端發生，你要避免讓尺寸較小的觸摸目標擁擠 在一起，特別是在兩種點擊會引發功能差異較大的情況下（比如說“舉報”就不能放置在“喜歡”的旁邊）。類似的，把一些相關的功能分散放置也很讓人討厭。所 以，平衡很重要。
相關閱讀
通用&靈活的設計
給iOS做設計的時候，你不僅僅只是為單一的屏幕尺寸做設計。即使你的app不是通用的，你仍需考慮不同方向和垂直的靈活性。當你考慮布局如何收索和展示時，想想用戶在某個特定方向上使用特定設備的意圖。
豎直vs水平
很多設計師在處理設備豎直以及水平方向放置的布局問題時是采取選擇一種布局，然后無論用戶的設備處于何種方向，app都鎖定這種布局。這確實是 減少工作量的好辦法，但是卻沒有考慮到不同用戶的需求。你可能把app鎖定在豎直方向，但用戶可能會覺得不方便文本輸入。或者你可以把app的布局鎖定在 水平方向上，但用戶有時候希望只用單手來控制設備的。布局方向的靈活性是移動設備的核心功能之一，用戶希望布局可以靈活控制它。
iPad vs iPhone
iPad和iPhone是非常不同的設備。基于你設計的app，用戶可能會希望有通用的解決方案。只限于iPad，只限于iPhone或是兩個 單獨的app。很多限制都是類似的，iPad的屏幕更大，允許用戶進行更有創造性的活動以及更長時間的使用。而iPhone便攜性意味著用戶希望可以盡可 能快地獲取更多信息，以及更快地處理任務，而往往這些活動經常是發生在用戶移動的過程中。
iPhone 5 vs經典款iPhone
經典款iPhone和iPhone 5高度上的不同意味著設計師需要在高度上做一些靈活的變化。這不是說你需要為iPhone 5和經典的iPhone單獨做設計，你可以指定哪些部分的設計可以自動擴展，哪些部分是需要固定尺寸的（寬度和高度都是如此）。
iPad vs iPad Mini
多數情況喜下，你可以認為iPad mini是iPad 2。最大的區別就是iPad mini屏幕更小，但是分辨率是一樣的。這就是說觸摸目標的區域面積會變小（而你對此沒有任何辦法）。所以當處理iPad設計時，要特別謹慎小尺寸的觸摸 目標。如果用戶覺得他們點擊了某些內容（或者某個控件），但是卻點擊到了目標旁邊的按鈕，那他們就會非常沮喪。
你可能會注意到一個普遍的問題，很多情況下觸摸點需要更加靈活，但是那些固定不變的卻能夠幫助我們理解和解決靈活的布局問題。這在iOS系統中 被稱作“布局約束（layout constraints）“。布局約束是iOS系統中“自動布局（Auto Layout）”的一部分。通過使用布局約束美化界面，你可以清楚的告訴開發工程師們你希望界面如何布局。
自動布局的約束表
交互
為iOS做設計并不僅僅只是設計屏幕上元素的擺放位置，還需要考慮界面交互。iOS設備的高分辨率，便攜性以及觸摸屏幕給設計師和開發者提供了 探索更豐富交互方式的機會。每個app都是獨一無二的，但仍有空間和機會引入新奇的概念，為用戶做出有用且讓他們愉快的設計會令他們激動。
直接操作
與鼠標和指針的間接操作不同，在iOS設備上用戶是可以直接觸摸屏幕進行操作的。這樣的直接接觸讓交互有了更多的可能。你可能對滑動解鎖，下拉 刷新，拖動，捏，滑動消失/刪除 等手勢很熟悉。平衡操作以及屏幕上可見的顯示很重要，太敏感或者太遲鈍都會讓用戶難以發現以及學習這些手勢。反之，散落在屏幕上的按鈕創造了界面但同時也 使界面混亂。大部分情況下用戶都希望操作之后，應用即刻會有反應，如果無反應的話用戶則會感到沮喪。
觸摸狀態&反饋
在設計按鈕以及界面元素時，請確保給了用戶足夠的反饋。用戶期望iOS設備有高交互性，這意味著直接交互需要有及時顯現的效果。如果當用戶觸摸 按鈕，而按鈕沒有顯示出被摁下的狀態，或者顯示的不那么明顯的話，用戶就會感到困惑。默認情況下，當按鈕被點擊，iOS會有一個變暗的mask（遮罩）， 通常這種做法并不是十分合適。請記住要處理好這些小細節，這些就是好的app和了不起的app之間的區別所在。
動畫
動畫可以為提供給用戶更多的視覺提示，那是靜態圖片無法給予的。比如說，如果你分享了一個記事表，用戶啟動了同步，刪除、替換或者新增信息。這時如果這兩種狀態之間的過渡很生硬，用戶很難發現哪些地方發生變化。創建一個視覺上的過渡動畫就可以幫助用戶理解這個進程和變化。
segue
iOS中用segue來稱呼整個屏幕的轉換。你應該用segue作為給屏幕層級的一個空間暗示。在iOS中你可能熟悉側滑展示不同的頁面層級， 輕彈改變設置以及從屏幕底部滑出modal view等。如果你決定要設計一個定制的Segue，那你需要創建一個short storyboard或者一個動畫演示。這對開發者理解你的交互，把握好轉換時間非常有用。
相關閱讀
排版
iOS非常擅長支持自定義字體渲染，這一點非常對字體極客的口味。iOS默認的系統字體是Helvetica Neue，但它還有很多內置的字體可供選擇。每次iOS較大的更新都是支持更大的字體。
版式控件
在iOS app中進行自定義追蹤，調整行距，字間距比在網頁上困難的多。盡管iOS6優化了text control，在iOS app中做以上的動作仍然不是很容易。如果你希望能完全控制設計中的這一部分（尤其是dynamic text），你需要事先和開發工程師溝通好細節。
版權
使用定制的版式的時候，購買獨立的使用許可非常重要。這一點可能有點困難，根據銷售方的不同，購買費用可能非常高。我是直接只用foundry 的字體，但有時也不能完全令我滿意。避開版權問題的一個方法是將文字輸出為圖片的形式。但這種方法也有弊端，在進行一些小范圍修改時不夠靈活，并且對一些 視力不好的用戶來說，會破壞app的易用性。
相關閱讀
使用工具
盡管每種圖片處理工具都不一樣，但是無論你用哪種工具你都必須記住以下幾點。
像素調適
最好使用矢量圖工具來創建UI元素（比如說是按鈕和icon），然后某些時候必須將這些矢量圖轉化為位圖。最后將圖片在屏幕中展示的時候，位圖 必須符合一定的像素。如果柵格化的位圖線條不能完美的適配規定的像素，那么圖片會變得模糊。像素調試主要為了確保水平或者垂直方向上的線能夠剛好落在像素 邊界上。通過像素邊界適當地調整圖形可以打造出彩的效果，直到事實證明后你才可能意識到這一點。
顏色
Xcode在打包assets的時候，會去除asset中圖片的顏色。所以在開始的時候你就要避免使用帶顏色的文件，最好完全去掉顏色。帶有顏 色的文件會讓圖片變大，會降低渲染速度。現實是由于屏幕的不一樣，顯示出的色彩也不一樣。與其和現實做斗爭不如接受它，多在真機上進行測試，看看圖片顯示 出來的效果。
設計 @1x
當你開始給屏幕創建畫板的時候，你會想到底要做多大的尺寸。所以我們推薦你創建和屏幕的點分辨率一樣大小的畫板。所以如果你為iPad做設計的 話，你就把畫板的大小設置為1024*786像素（盡管頂部的20像素會被狀態欄占用）。這樣的話，就算最后需要輸出資源的時候，你也需要創建 retina的資源。
幸運的是現在有腳本以及工具可以用來自動創建兩倍大的資源，減少人工的成本。為了使這種擴大縮小的工作完美的完成，你需要全部使用可以擴大縮小的元素，避免在設計的工程中使用位圖。
設計 @2x
現在有需求來為畫板使用像素分辨率。基于工具的不同，難度也會有所變化。但是這么做會有一些危險，對物理尺寸的大小很難有一個很明顯的感覺，縮 小資源比放大資源更難。但是從積極的方面看，按2倍的尺寸進行設計可以讓你在設備更好的處理像素。你可以畫更細的線條，處理更多的細節，而這些細節是無法 在1倍的畫板中表現出來的。你會發現很多的設計師和文章都使用1倍的畫板，所以現在我推薦你使用一倍的，然是由于retina設備的日漸成熟，我相信以后 會有更多的人使用在比設備大2倍的畫板上進行設計。
相關閱讀
設計icon
通常icon的設計是和UI設計不一樣的過程，因為icon設計更多的是畫圖。盡管關于icon設計很多都談到了品牌，隱喻以及風格的連貫性。 關于風格這一點，通過平衡現有的iOS的風格和app的庚哥來保持連貫性非常重要。即使是扁平的icon設計也會包括一些三維的方面來增加視覺效果。
默認情況iOS系統規定icon必須是圓角，加陰影。標準的制作方法將icon制作為一 個矩形，透明度為0，然后iOS系統會自己對他進行加工。但是蘋果并不能保證圓角的連貫性，所以最好還是自己去制作圓角，這樣才能更好的去設計icon。 你還可以通過標明icon是“precomposed”來關閉默認增加的陰影功能。
在上表中你可以找到各式的icon尺寸。如果你只需要制作iPhone app，你就只需要iPhone的資源(iPad同理）。很多人都會對各種尺寸的icon尺寸感到頭疼。但是與其拒絕它，不如擁抱這種設計，把它作為一種 設計約束。比如說iAWriter OS X（點此查看）的icon設計就根據各種icon尺寸大小的不一樣，來調整包圍Writer這個詞的面積。這么做就讓他們可以保持一個清晰容易閱讀的尺 寸，同時不會失去設計構成的平衡。
相關閱讀
測試
盡管很多設計師不愿意市場調查，你還是需要從你的用戶那得到關于設計的反饋。不要問他們想要什么，直接把你的設計展示給他們看，看他們是如何反應的。通過研究這些反饋，你可以知道哪方面的界面需要加強。這是在設計的草圖時期經常做的，這樣你可以根據反饋快速的調整方案。
一旦視覺設計方案出來的時候，記住要在真機上進行測試。在電腦屏幕上的元素和同樣的顏色深度的展示往往和真機上并不一致。某個元素你可能覺得 ok了，但是在真機上可能色調很淺，或是完全看不見。記住要在白天，亮度低的環境下進行測試，同時還要考慮用戶可能是色盲的情況。這么考慮會給你的視覺效 果設計帶來一個新的高度。
相關閱讀
輸出資源
開發的資源準備是設計過程中一個重要但是容易被忽視的部分。最好是設計者來從源設計文件夾來打包以及輸出資源，設計者才能理解設計的最佳部分。準確，完整，具有連貫性，整理良好的資源文件夾可以顯著的減少和開發者的來回溝通成本，設計者也可以得到最接近設計版本的成果。
作為基礎階段，設計者需要提供一套PNG格式的圖片。每個圖片都分別代表UI中單獨的一個部分。比如說，你可能需要一個原生按鈕.png以及icons，還有在按鈕上的圖片比如說addo-note.png以及漢堡包.png。你同時需要處理字體，字號，顏色等東西。
Retina資源（@2x）
每個需要輸出的圖片資源你都需要創建兩張圖片。其中一個是正常一倍分辨率的資源，另一個是兩倍分辨率的資源。retina的資源必須是整的兩倍 大小。所以一個44*88像素的按鈕需要有88*176像素的retina資源。你的資源的retina的版本需要和原文件是一樣的名字，但是需要在后面 增加@2x。以這個按鈕來說，輸出的資源中要有button.png 以及button@2x.png。
啟動畫面
當iOSapp被打開的時候，會首先顯示一張預先設置好的圖片。為了讓app看起來比實際加載的快，你可以使用一張空白的UI圖片作為啟動畫 面，這樣給用戶的感覺是數據正在加載中。你需要給每種設備都創建一張適配它分辨率的圖片（包括iPad的橫屏分辨率），然后需要減去頂部的20像素，頂部 是被狀態欄占去的。避免啟動動畫放入廣告，除非你認為他可以幫助用戶。
Slice Sheet
準備輸出的用戶界面的時候，你需要創建一個單獨的canvas。盡量不要修改一整塊的設計，可以將UI元素的單獨的分離出來，單個的將他們放置 到網格之中。你需要確保所有類似的資源都有相同的尺寸，尺寸大小恰當。比如說所有的tab button的icon都必須要大小一致。資源的一致性和可預測性可以幫助開發者避免出現布局問題，這樣也可以使設計升級變的更容易。
需要Slice Sheet的一個重要原因是有它的話可以更容易升級，替換資源更容易。有單獨的一個地方，所有的輸出都在哪里發生，所有東西都被準確的命名，沒有任何層級 需要隱藏，這樣的話，再次輸出資源就會變得簡單。再次輸出資源這種情況有時候會發生，如果某些特定的icon沒有顯示出來或者某些地方出現了一些變化。有 一個Slice Sheet可以減少輸出的成本，設計如果有所更新，可以及時進行測試。
界面說明文檔
只是簡單的將圖片資源交給開發者之后并不是就此工作就完成了。就就好比玩一個復雜的拼圖游戲，注定會有一些缺失的部分，某些圖片放置的位置也會 有錯誤。為了幫助開發者做出你的設計，你必須要寫一個準確的用戶界面文檔，告訴開發者他們之間是如何進行交互的。這個文檔可以是PDF格式的，也可是是網 頁版本，可以是是Keynote格式，凡是你順手的都可以，只要文件打的開。
通常來說這個文件會一頁一頁的說明app的細節情況，各個地方的UI的不同，他們需要如何顯示。包括以下內容：
尺寸：UI元素的尺寸以及中間的間隔
約束：布局的哪些部分是允許拉大的，哪些不允許
顏色：字體的顏色，邊界，背景等等——給他們一個名字+RGB/HSB值
字體：按鈕，標簽等等的字體——包括重量以及尺寸
資源：在哪使用他們以及它們的名字
這些信息越詳細，最后做出來的東西就越能貼近你的設計。寫文檔這種事情看上去非常麻煩，但是它能夠極大的縮短你和工程師交流的時間。同時還極大 的避免了了做出來的東西部符合你設計，因此惱怒的情緒。請了解所有收到這份文件的人還是可能會有疑問，就好像你偶然的把某些事情給遺忘了。
完成包
為了確保你沒有遺忘什么事情，這里我列出了一些開發者可能 需要了解的東西。
字體：你在設計中用到的所有字體，使用TTF格式
圖片資源：所有的單獨的UI元素圖片，@1x以及@2x版本，png格式
icon：app的所有icon（包括retina版本的），png格式
啟動畫面：所有你支持的設備的啟動畫面版本
Storyboard：一張大的圖標說明界面的交互
尺寸以及約束：用圖表的形式就是UI元素的尺寸以及他們的布局約束
動畫細節：計時，視頻，幀以及圖標來解釋動畫是什么樣的，轉場如何進行
顏色：app中所有使用的顏色的RGB值或是HSB值，采用圖表的形式，如果能夠給這些顏色命名的話會很有幫助
資源圖表：圖表可以幫助解釋資源都是使用在UI上的哪些地方的
字體標簽：將所有的UI元素都做好標簽，標好他們的，重量，樣式，尺寸
輸出的工具以及相關資料推薦
有用的工具推薦
Sketch - 專業的位圖處理工具
Adobe Photoshop- 這個不再多說
Briefs- 講述UI的故事
Flinto - 在瀏覽器上快速創建iOS原型
Slicy - 基于層次的名字來輸出PSD元素
PNG Express -快速準確的PSD輸出工具
Color Snapper - Mac OS X的顏色提取工具
Skala Preview - 查看設計在真機上的效果預覽
Tumult Hype - 創建HTML5動畫（解釋交互效果的時候很有用）
Kaleidoscope - 分辨文件和圖片不同的工具
Red Pen - 獲取設計的反饋
Cloud App - 分享文件非常簡單和快速
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！