十條幫你塑造更好的iOS應用體驗的設計貼士

本文來於Computer Arts(數碼藝術),全球領先的數碼設計雜誌,文章譯者@C7210

文中的圖標出自​​Jamie Jones之手,突出人機交互、用戶界面以及各類設計規範,配合文章給出的十條設計貼士,可以幫你塑造更好的iOS應用整體體驗。

 

1.以規則為基礎進行創新

01-human-interface-guidelines

蘋果的人機界面設計規範給人的感覺有點像枯燥的技術手冊,但它絕不是那種可有可無的產品說明書。通讀之後你會發現,這套規範當中涵蓋的主題非常全面,上至產品方向,下至界面元素的細節,所有這些“規則”都有助於你從基礎層面上更好的理解iOS應用設計的方法和原理。

只有充分的了解平台特性,對自由發揮的空間及局限有清晰的認知,我們才能更合理更有效的落實創新思維。



推薦閱讀:先了解規則,再尋求創新– 關於iOS應用界面自定義

2.正確的使用界面元素

02-ios-interface-elements

人機界面設計規範當中的“iOS用戶界面元素使用規範”一章為你詳細的介紹了應該在何時何處如何使用各種類型的原生界面元素,包括導航欄(navigation bar)、標籤欄(tab bar)、列表、按鈕等等。

要使產品在最基礎的層面上符合用戶的認知、降低學習成本,我們必須吃透這些原生界面元素的使用原理及相關的設計模式。

相關閱讀:移動應用界面設計模式– 搜索、排序、篩選

3.考慮設備的特性、局限及使用環境

03-device-limitation-enviroment

設計iOS應用與設計網站有所不同,我們需要考慮的因素有很多,包括移動設備自身的功能特性、顯示屏的規格局限以及特定的上下文使用環境等。

用戶在使用移動設備的時候,可能身在戶外,或是呆在室內,這類具體情況會對人機交互的會話進程產生相應的影響。在對產品概念及設計方案進行測試驗證時,要盡量將原型部署到實際設備當中,在最貼近實際應用場景的環境當中進行操作。

推薦閱讀:

4.訂製化的應用圖標

04-icon-image-guidelines

應用圖標對於產品能否給用戶留下良好的第一印象起著至關重要的作用,而且通常情況下我們要考慮的不只是一兩個尺寸的圖標。

iOS人機界面設計規範中的“圖標的訂製化及圖片創建規範”一章詳細的列出了使用在不同場景及設備狀況下的圖標規格,另外,你還可以在這裡找到很多關於創建圖標及相關圖片資源的設計規範及建議。

相關閱讀:移動應用的視覺美學– 談三款擁有高收入的應用產品

5.考慮不同的屏幕定向

05-device-screen-orientation

用戶在執行調轉屏幕定向的操作時,通常已經在預期當中做好深入探索內容的準備了。所以,對於具有內容獲取及編輯功能的應用產品來說,特別需要考慮在不同的屏幕定向方式下提供不同的內容操作模式。

另外,不同的定向方式也會產生持機方式轉變的問題,例如從單手變為雙手,所以相關交互模式的切換也是我們需要同時考慮的問題。

推薦閱讀:

6.觸摸,而不是點擊

06-touch

移動應用的界面設計應該以設備特有的輸入方式作為基石。 iPhone和iPad是典型的電容觸屏設備,用戶只需通過手指進行“直接操縱”,而無需借助任何外部輸入設備。

然而,手指的接觸面要比鼠標光標的尺寸大很多,而且用戶在執行操作時是無法看到手指下面的內容的,所以對於某些尺寸很小的交互元素來說,需要將實際的可觸擊區域擴大到其可視邊界之外。

類似這樣的限制因素都是我們在設計過程中需要時刻考慮到的。

推薦閱讀:又是為了觸屏移動設備而設計

7.隱形的網格

07-44-grid-touch

iOS人機界面設計規范建議,界面中的可交互元素在寬度或高度上不要小於44像素(約1/4英寸或7毫米),否則很難保證用戶能夠準確的辨識並觸擊。

另外,在移動應用的上下文環境中,足夠大的按鈕不僅便於操作,而且可以讓用戶維持必要的注意力,避免被周圍的環境所干擾。

與Web設計中的網格系統類似,在iOS應用界面設計過程中,可以試著採用單元規格為44像素的網格作為參考來規劃界面元素的佈局。

8.保持專注

08-focus-funtion

移動應用產品要專注在首要目標與核心任務上,在一​​兩件事情上做到最好,而不是以一般水平同時做很多件事。

對於非遊戲類應用來說,簡短、流暢、能夠在最短時間內不受干擾完成任務的體驗是最重要的,切莫把效率型和實用型的產品做成沉浸型。

相關閱讀:初創型團隊容易在用戶體驗方面犯的十個錯誤

9.界面元素的伸縮性

09-stretchable-view

可伸縮的界面元素的背景圖片製作方法有些類似於Fireworks中的九宮圖方式。

如果你需要實現一個圓角矩形按鈕,並且希望它在任何尺寸規格下都可以保持相同的圓角半徑,那麼必須使用彈性視圖(stretchable view)進行創建;系統會使用圖片中間的部分作為“伸縮”的背景,而四個圓角保持不變。

10.理論基礎

10-basic-guidelines

當你第一次讀到iOS界面設計規範當中的“用戶界面原則”一章時,多半缺乏耐心的略讀過去,因為這章看上去稍顯理論化了一些,好像佈道一樣。不過我還是建議各位花些時間認真閱讀這部分內容,你會發現這裡都是實打實的設計建議,例如保持界面設計的一致性、為用戶的操作提供反饋等。

Via:Computer Arts

作者博客:BeForWeb

 

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.