設計iOS應用時需要知道的 5 件事
根據我們製作優秀的 iOS 應用的經驗,我們認為設計師應該在心裡的牢記適用於 iOS 的 5 件事。雖然本文關注的重點只在 iOS 應用,但大部分的意見也適用於其他移動平臺。
1. 瞭解您的媒體
這似乎是顯而易見的,設計應用而不是網站實際上需要轉變思維方式。應用不是網站,不應該像他們一樣設計。讓我們來談談有關細節。
應用有完全不同與網站的使用者互動模型:敲擊與點選,檢視與頁面,按鈕與連結等。我們相信,討論應用設計語言的變化,可以幫助我們保持正確的心態。
除了不同的互動模型,應用應該有不同的方式。不要在一個檢視放置太多內容;分隔不同功能到不同的檢視。由於螢幕空間更受限制,這在 iPhone 上比 iPad 上更為重要。
使用者使用應用與網站有完全不同的考慮。應用程式的導航層次結構往往比在網站上更窄,更深入。使用者點選幾次為了實現某種目標或訪問某些內容,不要把一次性在螢幕上放置太多內容從而阻止這種自然的鑽井式行為。
iOS 上導航有很大的不同 – 這裡沒有 Chrome 瀏覽器或後退按鈕。由於 iOS 的推出,出現了許多導航方式,哪一個是最適合你的應用程式依賴於您的特定需求。去看看 Pttrns,包括很多優秀應用的介面導航方面。
最後,請記住在 iOS 裝置上執行的 iOS 的應用程式。啊,是吧?但這一點是很重要。呈現半透明內容與圓角和陰影影象與動畫漸變疊加的基礎上可能會導致效能問題。與開發人員在介面中執行棘手的設計工作想出一個方法,而不會導致使用者明顯感覺滯後。
Wikipedia 上有一個 iOS 裝置列表, 但是我們還是將所有執行 iOS 6 的裝置列出來,希望這將有助於您在設計應用時能夠提供優雅的體驗與硬體相容性上做出明智的決定。
裝置 | 螢幕尺寸 | 畫素 | 常見的問題 |
---|---|---|---|
iPhone 3GS | 3.5″ | 320×480 |
|
iPhone 4 | 3.5″ | 640×960 |
|
iPhone 4S | 3.5″ | 640×960 |
|
iPhone 5 | 4″ | 640×1136 |
|
iPod Touch (4th Generation) | 3.5″ | 640×960 |
|
iPod Touch (5th Generation) | 4″ | 640×1136 |
|
iPad (2nd Generation) | 9.7″ | 1024×768 |
|
iPad (3rd Generation) | 9.7″ | 2048×1536 |
|
iPad (4th Generation) | 9.7″ | 2048×1536 |
|
iPad Mini | 7.9″ | 1024×768 |
|
2. 設計的通用性
我們本領最好的應用能通用性的工作。這意味它們能在 Retina 螢幕與非 Retina 螢幕, 加長螢幕與短螢幕,iPad, iPhone 與 iPod touches 等都很好的工作。
這很困難,但我們有幾個簡單的技巧讓您滿足 80%。
避免奇數大小的 Retina 圖形
非 Retina 內容必須準確的為 Retina 內容的一半大小 。 這意味者如果 Retina 內容尺寸為 101 畫素,非 Retina 內容為 50.5 畫素,這是不可能的。不要使用奇數大小的 Retina 圖形讓您和您的開發人員不要為這個問題頭疼了。
讓點選目標足夠大
請記住使用者使用你的應用與 Web 瀏覽器的不同?好了,他們也沒有滑鼠。相反,所有與您的應用互動都是用一個不太精確的儀器:手指。
為了確保使用者可以方便地與您的應用程式的介面進行互動,確定他們可以點選的操作區域至少有44點寬和高。
3. 基於裝置設計
iOS 裝置的畫素密度有一個波動範圍,且對顏色的呈現各不相同。在設計 iOS 應用時,你應該考慮到這點。
為了明確你的應用的顯示情況,你應該在多個裝置上呈現它:視網膜和非視網膜屏、長屏或短屏、iPad或iPhone。你可以使用 LiveView 或 Skala 在你的裝置上模擬顯示你的 photoshop 檔案。最後,不要忘記調整螢幕亮度,以保證在所有情況下,你的應用都能完美展現。
4. 介面動畫
iOS 動畫很簡單 – 蘋果已經為應用可以很容易的建立過渡動畫做了很多工作。您應該充分應用它。
不幸的是,動畫在 PSD 中不是很容易體現和轉換到 iOS 中。最好的方式是和開發人員共同在裝置上設計動畫原型。總之,您可以建立一次性的應用,探索您的動畫想法。這將讓您得到一個準確的動畫實際表現效果的感受。
在設計動畫時,利用使用者已經熟悉的習慣,當他們點選一個專案時新的檢視從右邊滑入,他們希望建立新的內容時從下往上滑動檢視。在自己的自定義檢視中模擬這些運動動畫,不要設計一個使用者不習慣的新動畫。您應該學習使用者習慣的操作方式,讓您的應用程式對使用者更熟悉,更友好。
5. 早期涉及開發人員
我們相信開發人員在設計過程的早期參與,並繼續參與後期的開發過程中,設計人員和開發人員之間的協作將製作出更好的應用。
實現任何相當複雜的設計是實現者的挑戰 – 更好的解決方案讓開發人員可以更早的開始思考解決這些問題。
開發者知道我們的所有設計不一定都能實現,所有讓設計人員與開發人員一起工作,我們可以不用重複一些不必要的工作。
所以您知道應用程式而不是網站。設計普遍。在裝置上的設計。動畫是很棒的。早期讓開發人員涉及讓您的設計以您的方式實現。
相關文章
- 程式設計師應知道的12件事程式設計師
- (轉)程式設計師應知道的12件事程式設計師
- 關於 Unicode 每個程式設計師應該知道的 5 件事Unicode程式設計師
- 程式設計師最應該知道的20件事程式設計師
- iOS 7應用開發者需要注意的五件事iOS
- 成為優秀程式設計師需要知道的 15 件事程式設計師
- 程式設計師應該知道的97件事程式設計師
- 每個程式設計師應該知道12件事程式設計師
- 新手程式設計師應該知道的7件事程式設計師
- 每位網頁設計師新手都應知道的10件事網頁
- Flex開發者需要知道的10件事Flex
- Flash開發者需要知道的10件事
- Windows Container 和 Docker:你需要知道的5件事WindowsAIDocker
- 老程式設計師應該記住的 5 件事程式設計師
- 《深入HTML5》之你應該知道的5件事HTML
- 學習機器學習時需要儘早知道的三件事機器學習
- PM 幫程式設計師提高效率需要做的 5 件事程式設計師
- 關於MongoDB你需要知道的幾件事MongoDB
- 關於 iOS 上的 PWA 應用,你需要知道些什麼?iOS
- 案例學習 – 為Soundwave設計Watch應用時學到的五件事
- 案例學習 - 為Soundwave設計Watch應用時學到的五件事
- 你應該知道的 5 種 TypeScript設計模式TypeScript設計模式
- 商業智慧應用,你需要知道這5個方面!
- docker – 你應該知道的10件事Docker
- 創業前需要知道的5個程式設計謬論創業程式設計
- 關於iOS7,設計師需要了解的十件事iOS
- 關於iOS7 設計師需要了解的十件事iOS
- 開發第一個Android應用前你必須知道的5件事Android
- 學習swoole之前,你需要知道的幾件事
- 新手工程師需要知道的 7 件事工程師
- 有理想的程式設計師必須知道的15件事程式設計師
- 精讀《不再需要 JS 做的 5 件事》JS
- 初來乍到Linux? 你需要知道的5款好應用Linux
- 成為程式設計師前需要做的10件事程式設計師
- 成功部署AIOps需要知道的7件事AI
- 關於遠端辦公,每個企業都需要知道的5件事
- SQL Server DBA需要知道的三件事XTSQLServer
- 讓程式設計師失去程式設計激情的5件事程式設計師