根據我們制作優秀的 iOS 應用的經驗,我們認為設計師應該在心裡的牢記適用於 iOS 的 5 件事。雖然本文關注的重點只在 iOS 應用,但大部分的意見也適用於其他移動平台。
1. 了解您的媒體
這似乎是顯而易見的,設計應用而不是網站實際上需要轉變思維方式。應用不是網站,不應該像他們一樣設計。讓我們來談談有關細節。
應用有完全不同與網站的用戶交互模型:敲擊與點擊,視圖與頁面,按鈕與鏈接等。我們相信,討論應用設計語言的變化,可以幫助我們保持正確的心態。
除了不同的交互模型,應用應該有不同的方式。不要在一個視圖放置太多內容;分隔不同功能到不同的視圖。由於屏幕空間更受限制,這在 iPhone 上比 iPad 上更為重要。
用戶使用應用與網站有完全不同的考慮。應用程序的導航層次結構往往比在網站上更窄,更深入。用戶點擊幾次為了實現某種目標或訪問某些內容,不要把一次性在屏幕上放置太多內容從而阻止這種自然的鑽井式行為。
iOS 上導航有很大的不同 - 這裡沒有 Chrome 浏覽器或後退按鈕。由於 iOS 的推出,出現了許多導航方式,哪一個是最適合你的應用程序依賴於您的特定需求。去看看 Pttrns,包括很多優秀應用的界面導航方面
最後,請記住在 iOS 設備上運行的 iOS 的應用程序。啊,是吧?但這一點是很重要。呈現半透明內容與圓角和陰影圖像與動畫漸變疊加的基礎上可能會導致性能問題。與開發人員在界面中執行棘手的設計工作想出一個方法,而不會導致用戶明顯感覺滯後。
Wikipedia 上有一個 iOS 設備列表, 但是我們還是將所有運行 iOS 6 的設備列出來,希望這將有助於您在設計應用時能夠提供優雅的體驗與硬件兼容性上做出明智的決定。
設備 屏幕尺寸 像素 常見的問題
iPhone 3GS 3.5″ 320×480 非 Retina 顯示屏 iPhone 慣用語
無陀螺儀
沒有前置攝像頭
iPhone 4 3.5″ 640×960 只有單核心 Retina 屏幕
iPhones 中性能最低的
iPhone 4S 3.5″ 640×960 無
iPhone 5 4″ 640×1136 變長的顯示
iPod Touch (4th Generation) 3.5″ 640×960 只有單核心 Retina 屏幕
iPod Touch (5th Generation) 4″ 640×1136 變長的顯示
盡管和 iPhone 5 同樣的屏幕但只有一半的 RAM
iPad (2nd Generation) 9.7″ 1024×768 像素較低的攝像頭
iPad (3rd Generation) 9.7″ 2048×1536 Retina 屏幕可能會導致性能問題
iPad (4th Generation) 9.7″ 2048×1536 無 (Retina 屏幕可能會導致性能問題已修正)
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. 早期涉及開發人員
我們相信開發人員在設計過程的早期參與,並繼續參與後期的開發過程中,設計人員和開發人員之間的協作將制作出更好的應用。
實現任何相當復雜的設計是實現者的挑戰 - 更好的解決方案讓開發人員可以更早的開始思考解決這些問題。
開發者知道我們的所有設計不一定都能實現,所有讓設計人員與開發人員一起工作,我們可以不用重復一些不必要的工作。
所以您知道應用程序而不是網站。設計普遍。在設備上的設計。動畫是很棒的。早期讓開發人員涉及讓您的設計以您的方式實現。