設計iOS應用時需要知道的 5 件事

oschina發表於2013-03-24

  根據我們製作優秀的 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. 早期涉及開發人員

  我們相信開發人員在設計過程的早期參與,並繼續參與後期的開發過程中,設計人員和開發人員之間的協作將製作出更好的應用。

  實現任何相當複雜的設計是實現者的挑戰 – 更好的解決方案讓開發人員可以更早的開始思考解決這些問題。

  開發者知道我們的所有設計不一定都能實現,所有讓設計人員與開發人員一起工作,我們可以不用重複一些不必要的工作。

  所以您知道應用程式而不是網站。設計普遍。在裝置上的設計。動畫是很棒的。早期讓開發人員涉及讓您的設計以您的方式實現。

相關文章