UI設計的趨勢

2015年5月,Googleblog發布了Google移動端搜索數超過PC端的新聞。近來,我們在大量使用移動端搜索。伴隨著這個趨勢,目前大多數的企業都希望擁有一個最合適的移動端網站。
我們這些網頁制作者在這個趨勢的初期,以PC端網頁制作的技術為基礎,探索著移動端的制作方法,這幾年間也積累了一定的經驗。

然而隨著移動端設備的日趨多樣化,移動端網頁的UI做法也在日漸發生著變化。對于我們這些網頁制作者來說,不能固守于反復使用一定的技術,要時常關注流行趨勢,更新自己的知識,并應用于實際的工作當中是十分重要的。

所以閑話少敘,這次以時下流行的移動端網頁的UI規則、手法、共同點等為重點,以設計的視點,重新調查了各個行業的移動端網頁(包括16個行業45種150個網站)。調查對象皆選擇了行業當中歷史悠久知名度高的企業。

01

調查過程中制作的表格

? 1、全域導航
? 2、區域導航
? 3、面包屑導航
? 4、移動導航
? 5、按鈕的固定
? 6、滑動導航
? 7、下拉式菜單
? 8、表單
? 9、標簽
? 10、細節的注重
01) 全域導航欄

1-1)各要素的比例

首先將調查結果總結成圖表。63%的網站使用“漢堡菜單”??梢運翟詬鞲魴幸檔畝嗍貧送徑際褂么雍罕con打開菜單的方式。雖然對于有無標簽和icon的樣式的探討時有發生,但在此次調查中發現沒有標簽的三條線icon使用最多。和預想的一樣,為了考慮不明白只有三條線的圖標是什么意思的用戶,在icon上加入“菜單”兩個字的情況是第二多的。位置在右上角的占了一半。展開方法則是下拉和XX各占一半。
02

1-2)右上角為優先要素的放置位置

“漢堡菜單”半數以上都會放置在右上角,反過來放在左上角的情況,可想而知是因為右上角放置了比全域導航欄更重要的內容。根據網站的不同,優先要素也有著很大的區別,有登錄、搜索、購物車、語言選擇、服務網站的鏈接、節目表等。

03
1-3)跳板式菜單
有些網站是沒有“漢堡菜單”的,這樣的網站中,將利用頻率高的菜單用跳板的形式展現出來。節省了點擊菜單按鈕的時間,提升了使用的便利性。

04

1-4)可折疊式組合提升檢索效率

抽屜式和下拉式展開的菜單中,更多的是和風琴式開合菜單搭配使用。這大大提高了不用跳轉頁面就能夠找到想去頁面的入口的便利性。

05

1-5)其他

作為表現的變化,將三條線的icon加入企業logo的精髓的創意,更新的內容加入易于發現的標志的創意都是經??醇?。

06

02)區域導航

不同于全域導航有固定的位置的區域導航,布置的方式大概有以下四種。有必要根據使用的情況決定表現形式,調查中只有SUNTORI使用的是橫向滑動的樣式。別的??樵諍竺娼步?,橫向滑動很容易讓人感覺不到可以滑動,因此在使用的時候需要十分注意。

07
03)面包屑導航

調查顯示61%的移動端網站都沒有面包屑導航。和PC端不同,在這么小的屏幕上,與現在的位置相比,其他的要素更加重要。

08

在PC端一般式從左到右按層次橫向排列,而在移動端網頁通常將要素縱向排列,或者使其可以滑動,這樣很好地調和了面積小的問題。
09

04)移動導航

和PC相比較,手機的屏幕小,一屏能展示的要素有限,因此多采用輔助目標內容的移動導航。

10
返回頂部按鈕在最下方設置的網站占42%。有在右下角采用半透明的方式,我推測是因為,當返回頂部不是重要的功能時,會擋住重要內容而暫時隱藏。

11
05) 按鈕的固定

我們可以看到很多網站為了方便用戶隨時點擊,固定顯示了各種各樣的按鈕。在很多信息中有目的篩選的網站會固定顯示一個搜索按鈕。

12
并且在詳情頁面為了喚起購買和咨詢的動作,經常把CTA按鈕固定顯示。

13

此外還有各種各樣的網站,在瀏覽當前頁面的時候就考慮好接下來的動作,將與之相應的按鈕固定顯示。

14
06)滑動導航
6-1)擴大使用范圍的滑動導航
滑動導航能在狹小的區域內將多個項目的目錄很好的顯示出來,本來將包含圖片等圖形化元素的目錄進行滑動處理的趨勢就很明顯,最近這種表現手法的使用范圍正在進一步擴大。首先看一下表現滑動范圍的方法和補充搜索的多個關鍵詞的例子。

15
而且,像雅虎新聞評論和展示google搜索結果的AMP一樣,將文本做為目錄主題進行滑動處理的例子也越來越多。

16
6-2)滑動導航使用時要注意什么

最然滑動導航能節省空間地將眾多目錄方便的表現出來,但在使用過程中也有必須注意的地方。那就是橫向滑動的時候是否能夠一下子看出可以滑動。舉個例子,2015年開始蘋果音樂的移動端網站采用了滑動導航,2016年就改版為風琴式菜單了。應該就是因為菜單的橫向滑動不容易被用戶察覺。

17

下面兩個網站邊緣部分的位置讓人能夠意識到這是可以滑動的。對于重要的選項,很有必要為了讓用戶意識到這種滑動的交互方式而下功夫。相反的情況,對于網站目的達成并沒有那么強的關系的時候,也最好能夠體現出來。

18

07)下拉式菜單
下拉菜單可以將眾多選項高效地容納在一小塊區域內,當選擇項目沒有點擊菜單后彈出選擇器時那么多的時候,經常使用下拉式菜單??梢運翟諮∠畋冉仙俚氖焙蚴嗆鼙憷姆椒?。

19
08)表單
本來在智能手機的檢索中,將想要搜索的文字全部輸入之前,就會出現建議結果從而節省輸入時間的趨勢已經很強烈。立足于這一特征,可以看到很多具備建議功能的站內檢索表單。并且像郵政編碼和電話號碼等需要先限定數字的情況,需要考慮數字專用的關鍵詞??梢運當淼ナ橇⒆閿謚悄蓯只奶匭?,一種重要的輸入輔助手段。

20
09)標簽

在小屏幕中,尤其是必須表現出來的承載眾多信息的標簽,其表達方法是UI令人頭疼的一件事。表示方法有同移動端網頁一起再次排版的,也有使用滾動條或者提示“請放大確認”的情況。

21

10)細節的注重

為了達到舒適的操作和閱覽體驗,追求細節的高質量網站越來越多。表示需要等待的時候會設置加載,為了使操作方法更易理解采用小動效,為了APP能夠有更好的用戶體驗,追求各種細節的表現。

22

總結
多看多積累,隨時了解流行趨勢,對于UI設計相關的工作者來說是非常必要的。不是只看網站,要培養能看出來變化的視點,就能在實際工作中靈活使用這些知識了。

原文地址:TomoyukiArasuna & 學U網

上一篇: 有了前蘋果創意總監Abigail的加盟,華為的UI可能有救了

下一篇: 牢記這6點,你也能做出極具感染力的UI設計!

分享到: 更多
pk10计划专家在线计划 谁买过真的棋牌辅助 nba投注比 押龙虎破解公式打法 ag动物狂欢怎么压分技巧 欢乐生肖走势图 pk10一期必中计划 七乐彩开奖 腾讯分分彩组三预测 欢乐二八杠外挂 新时时数据遗漏 5分pk10计划软件 11夺金任7稳赚 重庆肘时彩五星走势图 双色球最新开奖结 规律与现象