小莫

小編:市場對UI設計師的要求是越來越高了,產品交互什么的都要懂,一些開發的實現邏輯也要懂,不過這也是必然的發展趨勢,只有不斷充電才能跟得上市場變化呀~

最近在看《移動設計》這本書,書中關于框架(frame)部分的內容寫的蠻好的,在此分享一下。

框架對于產品來說很重要,小到影響一位用戶是否留存,大到影響產品的穩定和發展。


框架的深度和廣度

主要有深度優先和廣度優先兩種結構,各有優劣。

深度優先的框架

優點:深度優先的框架結構優點是可以留出更多頁面空間,用戶使用時注意力會更聚焦于內容,以最快的速度獲取需要的信息。

缺點:用戶獲取信息的路徑變長,常常需要點擊三四下才可以尋找到目標,熟悉產品的老用戶可能還好,但對于新用戶來說獲取信息過程中需要學習、記憶、試錯,而移動產品的特性也決定了它碎片化的使用時間,比如在地鐵上,公交上,用戶沒有耐心去學習試錯,使用的進程隨時可能被打斷,這個過程極可能流失用戶。

 

廣度優先的框架

優點:同一層級入口較多,用戶很容易知道產品是用來做什么的,路徑較短,用戶使用過程中不容易迷路,更快捷獲取到有價值信息。

缺點:入口越多,占用屏幕空間也越多,用戶也需要時間來篩選自己的目標入口,對產品提供的核心價值也會感到迷惑(很容易忘掉,和其它競品應用搞混等),一個應用一旦失去核心價值是一件很可怕的事情。

最簡單流暢的產品框架面對的是淺而窄的方式,無論是獲取信息的路徑還是體現產品核心價值都能更好的進行設計。

 

產品框架的移動化要注意的問題

從PC遷移到APP,從手機屏幕尺寸考慮,手機屏幕比電腦屏幕小很多,展示信息能力有限,不能將所有信息像電腦一樣平鋪到手機屏幕上,那會讓人瘋掉,因為在大量的信息中無法找到自己需要的信息,在這里需要根據內容的優先級來進行精簡、隱藏、刪除,使原本廣而淺的框架變為核心內容窄而淺,次要內容窄而深,層次分明。

拉鉤招聘網頁版搜索欄下方緊跟熱門搜索,由于電腦屏幕大,產品框架比較廣。

移動化之后,由于手機屏幕尺寸有限,將產品框架變窄,點擊搜索欄之后二級頁面才展示熱門搜索。

路徑扁平化

使核心路徑扁平化。說白了就是縮短核心功能的路徑,使核心的功能得以更高的曝光,同時提升其使用效率,比如映客、抖音標簽欄導航中間的重點突出的按鈕。

層級信息合并

當路徑較深時,把兩個層級的信息合并為一個是比較好的方法,將下一個路徑的信息提前展示出來,不管是以入口還是標簽的形式,這樣用戶想要獲取的信息或者我們要用戶獲取的信息就可以提前展示,例如淘寶將紅包、砸蛋信息提現展示;淘寶人生將內部營銷文案提前展示,可以大幅度提高轉化。


隱藏

移動設備展示內容有限,也為了用戶可以更聚焦于內容,就要考慮將次要內容折疊隱藏起來甚至刪除,微信、QQ、支付寶右上角的加號還有很多APP的面包屑圖標都屬于移動化之后的隱藏。


移動應用框架中導航的設計模式

優秀的框架是產品可持續發展的重要基礎,可以減少用戶迷路的幾率,導航是路牌,引導用戶在框架中左拐還是右拐,前進還是后退,導航無論是在生活中還是各種產品應用中都是必不可少的。

 

接下來列舉各種常見導航樣式

 

標簽式導航

市面上最常見的,將產品最主要的功能歸類于五個標簽中(正常情況最多放五個),用戶可以快速通過五個標簽知道產品核心功能,還可以在不同分類標簽中快速跳轉達到目的,簡單高效。

標簽欄的擴展樣式

為了讓用戶更便捷的提交內容,很多需要用戶填充內容的移動應用進一步強化標簽導航的入口,這個例子和路徑扁平化類似。

輻射式導航

通常用于工具類應用導航,各個入口內信息相互獨立,不相互干擾。在內容交叉的應用中不適用。

列表式導航

也是一種很常見的導航樣式,幾乎每個應用中都有使用,適用于層次分明的等級結構,通常位于列表最上方的條目優先級更高。一般最多保持15個以下條目,超過15個最好再分一級,或者視覺上加以區分。條目太多框架就會過寬,用戶需要不停辨識,影響瀏覽效率,前面有提到。

列表的擴展樣式

列表到達一定數量后要進行分組,形成樹狀樣式,例如QQ聊天列表,點擊后展開。

 

平鋪式導航

適用于整體性較強的內容,少而精的內容,一個版塊可以完全展示一塊內容,且內容之間是并列關系,比如手機里常見的天氣應用,“想去”APP也是一個例子。

抽屜式導航

一種常見的導航樣式,以展示當前內容為主要目的。抽屜式導航的呼出最好搭配適當的手勢。在這里可以將手機屏幕想象成上下左右都可以無限延伸。各種方向導航都有可能出現。

點聚式導航

常規應用中相對少見,將功能收縮進一個點內,缺點是相對于標簽欄來說多了一步操作,不能像標簽欄一樣直接展示給用戶,需要引導用戶學習。優點是降低標簽欄干擾,更優先展示內容,交互方式更新穎。咸魚APP中間的加號也是點聚式導航。

最后再說明一個概念“拇指操作熱區”相信很多朋友都知道。如下圖,以左手拇指操作為例,最為核心的功能應該放在手指夠到的區域,更利于用戶直接操作。

好啦到此結束,分享一下就是對我最大的鼓勵。

以上,如有不足還請指正

 

原文地址:24設計筆記(公眾號)

作者:西湖魚

轉載請注明:學UI網 » 移動應用框架部分的學習思考

登錄收藏
 
你可能喜歡的:
關于評論,你應該知道這些關于評論,你應該知道這些
百度AR小游戲設計過程全揭秘——《砸金豬積福氣》百度AR小游戲設計過程全揭秘——《砸金豬積福氣》
交互設計師量化體驗的“方法寶典”-上交互設計師量化體驗的“方法寶典”-上
細節篇:兒童APP中的圓角設計細節篇:兒童APP中的圓角設計
交互設計師的輸出文檔撰寫方法交互設計師的輸出文檔撰寫方法
UI設計組件-文本框/輸入框(下)UI設計組件-文本框/輸入框(下)
為什么你的登錄頁看起來和別人一樣?為什么你的登錄頁看起來和別人一樣?
2019最佳彈窗/彈出框設計20例【附教程】2019最佳彈窗/彈出框設計20例【附教程】
4px網格設計方法,讓設計還原更精準4px網格設計方法,讓設計還原更精準
職前通App視覺設計規范(附完整規范文檔)職前通App視覺設計規范(附完整規范文檔)
?
陕西快乐10分