不同尺度場景的博弈-Behance Redisign思考
behance的未註冊用戶登錄頁,對筆記本端用戶並不友好,nav、header、sorts和footer一共佔了屏幕一半,再加上右側filters,很是奢侈,以至於真正作品展示區域不到屏幕的一半。在大屏幕pc端還好,只是filters和sorts是相同的作用現在較分散,同時content區域也壓縮了不少,這個代價不值;
- 解析度寬:1260px
- 解析度寬:2560px
於筆記本端的主要問題:重點不突出,想對用戶說的太多,導致頁面結構混亂,內容擁擠;在登錄用戶界面也有相同問題。下面分未登錄和登錄兩種狀態做分析:
對於未登錄狀態
使用場景:新用戶無意間進來的和好奇是什麼網站然後進來進行瀏覽操作;還有就是註冊用戶打開進行登錄(註冊用戶形成使用習慣,清楚知道登錄入口),所以,對於未登錄狀態,網站的著重點在於吸引新用戶,要解決兩問題:
1,告訴用戶behance能幹嘛? showcase and discover creative work;
2,如何showcase和如何discover creative works,case質量和使用體驗如何?
對未登錄用戶使用流程拆分成如下:
1 剛載入網站,用戶的首要問題是,這個網站可以幹嘛,所以header要突出明顯。考慮小屏幕的顯示,header改成單行顯示,大屏幕保留原做法。考慮到網站功能分區的清晰性以及展示區域更好的體驗,將filters合併到sorts bar中;
2 開始下滑瀏覽網站,此時用戶更關注網站內容,所以在保證header功能(什麼網站、快捷註冊和post work)基礎上弱化它,進而強調內容;
3 上滑/回頂頁;
對於登錄頁狀態
在discover頁面時,用戶使用場景有:
1 有目的性的查找資料
2 無目的性的瀏覽
對於登錄用戶使用流程拆分成如下:
1 對於剛載入時,nav顯示add works和post works以及搜索和個人設置,sorts是針對作品的,不採用單獨bar的做法,會顯得跟作品割裂以及將屏幕分的太碎,此時用戶可以下滑瀏覽以及搜索或者選擇不同分類瀏覽;
2 用戶下滑瀏覽時,不管是有目的還是無目標的瀏覽對於作品的展示變成第一優先順序,sorts次之,此時的nav對於用戶來說,優先順序不高,所以將nav隱藏;又因為對於當前disvover頁面,sorts是最基本的需求功能,需要很強的便捷性,因此sorts置頂;
3 用戶上滑時,可能的目的有回到頁頂進行其他操作或者瀏覽之前作品,此時無法判斷二者,選並集,出於便捷性當用戶上滑時顯示nav;
以上做法對於behance初期以及成長期比較實用,在於突出特色,目的是快速聚集核心用戶,而且在behance早期,從2007年成立到2011年sologan一直是make ideas happen等類似意思,強調它是idea聚集地;可是這種做法對於現在意圖推廣discover works,通過招聘盈利來說只是在nav加個post job明顯是不夠的。
對於這個時期的behance用戶已經變成了設計師和招聘方(在冊以及潛在用戶),
所以,如何在不影響或者最低限度影響showcase的基礎上如何推進discover works 呢?而且推進招聘對於這個社區用戶來說也有了可以找到潛在工作的誘惑,對於整個網站來說是個良性循環。
推進discover works 有兩種直觀的表現形式,
1,實時顯示designer跟jobs匹配成功
2,部分顯示當前jobs
接下來考慮位置,對於discover works ,跟showcase相比仍屬於次優先順序,如果至於頁頂,會打亂showcase的流線;
如果showcase跟discover works並排展示,這種既想表達A又想表達B的會讓展示區域混亂;
如果至於頁底,保證了showcase的優先順序以及完整性,可是現在showcase是採用的瀑布流,是沒有底部一說的。如果不採用瀑布流,採用分頁模式,雖然可以保證底部完整,可是會砍斷瀏覽的流暢性;
如何既保證底部完整又保證瀏覽的流暢性呢?可以在用戶操作流程上做拆解,間斷的砍開瀏覽的時間線:每下拉loading三次變為手動點擊,這樣就為底部留出了空間,同時loading的流暢性也沒有大打折扣(參考dribbble)。
結
設計是定義在何種約束下,某個語義的內容和結構應該如何呈現。@賀師俊
很喜歡這個定義,鋪開來理解也ok,設計是定義在何種場景下某種語義做何種反饋;類似的,在特定語境中某個詞語對於不同的人是呈現不同的意義的。
那麼這裡的場景(語境)是什麼意思?
我理解的場景分為大尺度、小尺度和微尺度上的場景。
- 大尺度場景:涉及從戰略布局上的特定發展階段的大背景,某個運營階段對用戶的定性以及產品的定位;
- 小尺度場景:在一定的時間、空間內發生的一定的任務行動或因人物關係所構成的具體生活畫面(引自戲劇對場景的定義);
- 微尺度場景:特定的小尺度場景中用戶的某個具體行為以及心理;
場景主要用於輔助對使用語境的定性,而採取何種反饋需要基於權衡特定場景下多方面因素的優先順序,同時還需要兼顧場景之間的聯繫。
Refer:
Behance網站歷史:Wayback Mechine
painting by Anna Palm - A game of Lhombre in Br?ndums Hotel
推薦閱讀:
※可變字體,Variable Fonts
※設計技巧之網頁中的字間距
※原來漂亮的網站圖片排版是這麼來的!
※怎樣的圖文混排設計讓你的網頁更具歐美風?
※PS基礎操作小技巧:如何利用PS給衣服更換顏色