App產品設計中的可拓展性原則

可拓展性原則是我自己瞎起的一個名字,高興的話你說彈性原則也行。主要意思是指

界面設計要足夠的靈活,具有彈性,以滿足將來可能出現的場景 。我第一次考慮這個問題是從去年7月份開始,當時接到領導的一個臨時需求,要給直投項目增加一個到期查詢的功能。因為原來的界面設計比較死板,所以突然加一個新功能導致整個佈局都被打亂了,結果做的很不理想。當時我就希望可以找到一個方法來應對領導這種突如其來的需求。

產品設計的可拓展性就是為了應對將來未知的改變。改變來自於功能的改變,因為產品是由一個個功能組成的。功能的改變可以分為兩類: 數量的改變狀態的改變 。當然這裡不涉及到具體的功能設計,只是探討功能入口的展示。

數量

數量的改變指的是功能的 增加刪減合併 。多數是指新功能的增加,這就要求我們在界面(佈局)設計中要給將來可能添加的新功能預留坑位。在哪裡預留坑位?又給哪些功能預留呢?這裡我就例舉最常見的兩種界面佈局(導航)樣式來說:

宮格式佈局列表式佈局

App產品設計中的可拓展性原則

不知道大家有沒有注意到一個現象: 一級頁面中主要用宮格式佈局,而二級,三級頁面多數用列表式佈局。 這主要是因為一級頁面是產品的門戶和臉面,而且又多屬於功能的聚合頁,特別是首頁,這就要求 一級頁面在展示足夠多入口的同時還要兼顧視覺吸引力 。而以icon,插畫,圖像為主要表現形式的宮格式佈局在視覺設計上更容易出彩。特別是icon,在相同的空間裡,可以展示更多的入口。

App產品設計中的可拓展性原則

但是其缺點就是可拓展性差,不管是2*5還是3*4,你如果想單獨新增一個功能,界面就會失衡。當然我們可以給用戶提供分頁,這就意味著有些功能需要用戶滑動才能看到,具有一定的風險。

App產品設計中的可拓展性原則

還有一種方法就是提供全部按鈕,用戶點擊可以查看全部功能。

App產品設計中的可拓展性原則

列表式佈局就沒有這方面的顧慮,它可以在不打破界面佈局的情況下增加新功能入口,但是它的缺點在於可展示的入口太少了。宮格式佈局一屏可以展示20多個入口,而列表式佈局只能達到其一半的水平。

App產品設計中的可拓展性原則

這也是經常困擾設計師的一個問題,因為數據反饋 一個頁面超過一屏往下內容的點擊量是急劇下滑的, 所以一般的一級頁面都不會設計的很長。

如何在有限的空間裡展示足夠多的入口呢

沒有什麼是可以難倒我們設計師的,最近我看到一些產品在底部欄tab裡動起了心思。以蘇寧易購為例,當你點擊進入“發現”,tab會變成“直播大廳”;點擊進入“首頁”,tab會變成“猜你喜歡”。所以雖然只有5個坑位但是塞進了7個tab,這是一個很好的思路。

App產品設計中的可拓展性原則

App產品設計中的可拓展性原則

App產品設計中的可拓展性原則

對於一級頁面我還有一個建議: 千萬不要隨意把功能入口放在頂部欄上 。因為對於一些小功能的迭代,入口放在哪裡都一樣,用戶看得到很好,看不到也無所謂。但是如果要上線一些層級比較高的功能,又不想打亂界面的原有佈局,最好放到頂部欄上。特別是你的界面中如果還沒有 搜索、城市定位、分享、篩選、通知

等全局功能,一定要把頂部欄的位置空出來。文章開頭我說的“到期查詢”其實就屬於篩選功能。

狀態

上面也說了,本文所提到的可拓展性指的是入口的可拓展性。那麼入口在狀態上的變化可以分為 外部狀態變化內部狀態變化

外部狀態變化主要說的產品層面的變化,針對的是C端產品。對C端產品來說,定期組織營銷活動來拉新肯定是必不可少的。這種情況下我們需要對界面的元素進行處理使其來適應不同的活動氛圍。從這個方面來說,我們可以發現為什麼宮格式佈局更容易受到各大電商平臺的青睞。因為它可以根據不同的活動配置一套完全不同的icon,靈活多變。這種狀態上的百變來打造營銷氛圍的能力是列表式佈局所不具備的。

App產品設計中的可拓展性原則

列表式佈局可以向用戶傳遞更多的信息,更能表現內部狀態的變化。以下圖為例,用戶可以知道自己還有一張優惠券沒有使用,知道自己本月還有126元沒還。而宮格式佈局礙於空間,很難向用戶展示過多的信息。

App產品設計中的可拓展性原則

以上方的日曆為例,近期做了一個拆紅包活動,用以icon為主的宮格佈局只能加一個“拆紅包”的角標。如果採用了列表式佈局,可以直接展示金額,更能起到刺激用戶的作用。

寫分析總結寫到現在讀者越來越多,所以愈發擔心自己寫的不好會誤導別人。對於設計來說,無所謂對錯,只有合適和不合適。就像上面提到的兩種佈局方式,在列表式佈局中你可以隨意添加新功能,但是礙於空間,可添加的功能數目也不會太多;宮格式佈局倒是不怕入口放不下,但是會引起界面的失衡。設計師的能力就體現在 收集用戶數據,分析具體場景,去思考得出最合理佈局樣式 。不要拘泥於解決方案,因為解決方案有很多,我們要學習的是解決方案中所體現的思維方式和過程。

總結

以上就是我針對產品設計中可拓展性原則的一個簡單分析總結,歡迎大家留言討論。


分享到:


相關文章: