《iOS交互指南》閱讀隨筆--設(shè)計基礎(chǔ)

內(nèi)容來自:http://isux.tencent.com/ios8-human-interface-guidelines.html

內(nèi)容始終是iOS的核心。

我喜歡iOS,然而,為其找理由時往往都忽略了內(nèi)容,開口談的幾乎都是明快美觀的界面和流暢的交互效果。如果沒有搜集信息和迅速響應(yīng)的交互能力,失去內(nèi)容作支撐,iOS也只是個框架。

半透明底板。像玻璃拉門上的磨砂紙雕刻的精美圖案一樣,控制中心上拉后巧妙地把原頁作為背景而非隱去,無論是內(nèi)容相關(guān)性還是設(shè)計美感,半透明底板都做到了。

讓顏色簡化UI. 在讀完《寫給大家看的設(shè)計書》后有感。備忘錄中的“新建”,“返回”作為區(qū)別于列表文字的操作符,沒有使用“加粗”,“放大”,“底色”,“字體” 等硬性對比,而是用了“顏色”,其他均不變,增加了趣味,不突兀,而又指向明確。

用深度體現(xiàn)層次。文件夾圖標(biāo)的半透明浮層。備忘錄的層級展示。日歷的年月日層級。

iOS UIKit Framework?視圖類型:控件,內(nèi)容視圖,臨時視圖

不同環(huán)境體驗的可適用性:如果應(yīng)用只在一個方向運行,確保用戶明白如何把持設(shè)備,并且旋轉(zhuǎn)180度后與原先保持一致。

用布局來溝通??梢栽谄聊簧习氩糠植贾弥饕獌?nèi)容,整體從左側(cè)開始。昨天看到一篇文章講到用戶瀏覽模式,主要有F和Z兩種。F模式在以文字為主內(nèi)容的網(wǎng)站出現(xiàn),例如博客。用戶沿左側(cè)垂直向下,尋找每個段落開頭的興趣點,視線呈現(xiàn)F或E型。Z模式則出現(xiàn)在非文字為主題的頁面。用戶首先關(guān)注頂部水平方向的內(nèi)容,視線到達地步后又遵循從左到右的習(xí)慣水平掃視底部內(nèi)容。比如一個附帶產(chǎn)品介紹的注冊頁面,開始有一個注冊按鈕,下拉會出現(xiàn)產(chǎn)品賣點,最下方的支付選項抵達了底部的水平線。

確保用戶在默認界面就能找到首要內(nèi)容。無需滾動和放大就能看到主體圖像。

如果在應(yīng)用中需要修改系統(tǒng)設(shè)置,直接跳轉(zhuǎn)系統(tǒng)設(shè)置頁面好過“設(shè)置>隱私>定位服務(wù)”的描述。

啟動

即時啟動原則:安裝結(jié)束后不用重啟設(shè)備,不要設(shè)置歡迎頁面,讓用戶立即開始使用。

避免要求用戶過多設(shè)置。默認為大多數(shù)所選值。盡可能從系統(tǒng)獲取所需信息而非讓用戶填寫。

盡可能讓用戶遲些登錄,讓用戶在不需登錄時使用大部分功能。這一點不能完全認同,因為在很多情況下用戶已經(jīng)不是第一次接觸應(yīng)用了(不同平臺/二次下載/升級/系統(tǒng)更新),希望迅速找到個人信息,或?qū)?yīng)用功能做定制,同步,等等。最簡單來說登錄頁面需要很容易找到,而登錄信息也應(yīng)在合適的時間出現(xiàn)才好。

按照屏幕默認的定向方式啟動應(yīng)用,比如一個游戲應(yīng)用在橫屏下展示,在豎屏?xí)r打開也應(yīng)是橫屏界面。最好在旋轉(zhuǎn)180度后正常顯示橫屏。

應(yīng)用重啟后恢復(fù)到退出時的狀態(tài)。這個似乎很多應(yīng)用沒有做到。

停止

"iOS應(yīng)用無需關(guān)閉或退出選項。當(dāng)用戶切換應(yīng)用,回到主屏幕或者將設(shè)備調(diào)至睡眠模式的時候,其實就是把其放在后臺停止了使用。在后臺的應(yīng)用隨時有可能被終止或退出,因此需隨時保存用戶信息和當(dāng)前狀態(tài),使用戶可以在回到應(yīng)用時能從中斷之處繼續(xù)使用。"

不要強制退出應(yīng)用,用戶可能誤認為是crash。如果有問題出現(xiàn),告訴用戶當(dāng)前狀況以及解決方法。

保證所有可用功能正常顯示。當(dāng)用戶點擊不可用功能時才顯示提示信息。

導(dǎo)航

三種常見導(dǎo)航結(jié)構(gòu):分層,扁平,內(nèi)容或經(jīng)驗驅(qū)動。

分層:(iOS提供)導(dǎo)航欄 Navigation Bar.?

扁平:標(biāo)簽欄 Tab Bar. 切換子任務(wù),視圖或模式。

? ? ? ? ? 頁面控件 Page Control, 用于同類頁面,展示頁面總數(shù)和當(dāng)前位置。

最好有直接到達每一頁的捷徑,如action sheet,modal view(彈出的另一視圖)。

內(nèi)容或經(jīng)驗驅(qū)動:比如游戲應(yīng)用會根據(jù)具體內(nèi)容來設(shè)置導(dǎo)航和提示。

模態(tài)情景

比如警告框,模態(tài)視圖,分享菜單?!敖o用戶提供一種不脫離主任務(wù)的方式去完成一個任務(wù)或者獲得信息,但是也會臨時性地阻止用戶對應(yīng)用的其他部分進行交互操作?!?/p>

需要盡可能減少模態(tài)情景??梢允褂玫那樾斡校罕仨氁痍P(guān)注;一個任務(wù)明確要被放棄或者完成時,需保存用戶信息。模態(tài)情景要做到:

確保模態(tài)任務(wù)簡單,聚焦。否則用戶會迷失在模態(tài)任務(wù)中,忘記如何回到之前的操作;

提供明顯、安全的退出;

確保點擊“完成”按鈕的效果。模態(tài)有多層時,下一級的“完成”不確定是本級的還是所有層級的完成。

交互性和反饋

用戶所知道的標(biāo)準(zhǔn)手勢:點擊;拖拽;滑動;輕掃;長按;雙擊;縮放;搖晃。

不要改變/增加標(biāo)準(zhǔn)手勢的含義;特定環(huán)境可以用多指手勢,盡量少用。

可交互元素:

區(qū)別于普通文本,可以用藍色表示。如果可交互元素和內(nèi)容混在一起,需要增加邊界(邊框),背景(顏色)。

盡量將反饋內(nèi)容整合到當(dāng)前UI上去,讓用戶感到自然。避免不必要的警告框。

使用戶得到平衡的輸入和反饋結(jié)果。這也是一種心理平衡吧,不能一味付出不求回報不是么。

增加顏色對比度:需要區(qū)分的顏色要存在至少50%亮度差異。一種看對比度的方法是降低頁面飽和度,在灰度模式下看它。

使用自定義的欄顏色時,考慮半透明欄??紤]用基準(zhǔn)色,比如系統(tǒng)應(yīng)用中“返回”,“提交”的顏色。如果自己定義表示交互的基準(zhǔn)色,要和其他應(yīng)用區(qū)分開。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容