12個PC網頁的UI設計趨勢(上)

來源:科技想法 2018-07-10 10:55:22

實際上所有的網頁設計趨勢都是由:大型化(Big UI)、較低的密度(Low Density)、長頁麵(Long Page)這三個設計思想所衍生出來的。而影響這些設計趨勢的人,不是設計師,不是硬件製造商,而是用戶的行為。

因為智能手機的普及,用PC瀏覽的網站關注度正在下降。但是,托B2B數字營銷的福。PC網站今後也變成戰略中心。即使在B2C的領域,PC網站也是不可或缺。

對於在硬件方麵沒有太大變化PC的網頁設計來說,也有技術被固定化的印象,實際上現在也正在接受時代的潮流而發生著變化。特別是下麵那樣的環境變化,也給與PC網站的UI設計帶來很大的影響。

顯示設備的多用化。

智能手機應用的普及化

電子設備觸摸屏的普及

如果迎合趨勢將會取得成功不是嗎?這個基礎就是抓住用戶動向的變化,有必要完全理解這一變化。因此這篇文章是PC網頁 UI設計的最新動向,基於那些背景下的推測匯總。

1.Big UI / low Density / Long Page的潮流

舉例說曾經的PC網站有很多是在有限的空間內填入了大量元素的設計。但是現在UI部件變得有:大型化(Big UI)、較低的密度(Low Density)、長頁麵(Long Page)的傾向。

以前是海外以創意型,初創型為中心網站所采用的設計,進入日本的海外企業和前衛的網頁設計師,采用那些理念設計的企業網站,漸漸地在日本也被廣泛應用,這個趨勢也與扁平化設計相呼應。2013年以後以Big UI / Low Density / Long Page 為基礎的設計理念在網站更新中使用增多了。

這樣的趨勢,不能單單看起來時興,其有合理的存在理由。在開發的立場,讓響應式網站更容易實現。如果在用戶的立場來看,更容易瀏覽、更容易理解、不再迷茫,除了所說的這些以外,讓網站更好的利用觸摸屏,作為其更大的優點。

近些年不隻手寫板,筆記本電腦也安裝了觸屏。對於在沒有準備手機網站的情況,在智能手機上,網站的頁麵也被要求需要有一定程度的瀏覽。

觸摸屏,因為用手指的點擊,不能進行精準操作。因此用戶界麵會變大。元素之間的必需留出充分的空間。如果用戶界麵變大,密度變低,當然頁麵中表現元素要少,頁麵變長,以滾動為前提了。

這篇文章之後要介紹很多趨勢,都是從Big UI / Low Density / Long Page的潮流中派生出來的。這不是最時尚的流行,但是現在是最適合用戶行為的設計思想。

2.1欄布局

作為Big UI / Low Density / Long Page合適的布局,就是1欄布局。

曾經左右兩欄布局的PC網站是UI設計主流。在電子商務網站等有大量信息的網站中,3欄布局也很常見。但是現在去掉左右欄,隻焦點於內容部分,1欄布局正在增加。

對於用戶,不再有不必要的雜音映入眼簾,集中真正必要的內容。文字更容易閱讀,圖片被展示的更大。

另一方麵,映入眼簾的信息量減少,廣告等會變得有些分散。因此,對於用戶活動線路的設計,必須要更加謹慎。

另外,在側邊欄設置局部的導航條手法,與其他層級的網站相關,有讓用戶不再迷茫的突出優點。去掉側邊欄的導航條,讓網站的層級降低,盡可能減少菜單,不止限於1頁內的布局意味著網站全體的設計方法需要重新考慮。

反過來說,多層級化的前提是與網站的龐大度有關。有很多的1欄布局不能讓內容被準確的理解,據此判斷需要謹慎使用。

3.中對齊

1欄布局的一個問題是文字換行吧。文字充滿整個寬度時候會顯的很長,很難保持布局的美觀。如果1行的文字數量超過40個字,人們就會覺得難以閱讀。不能因為是1欄就什麽也都不考慮,寬度被文字占滿,是不可避免的。

解決這個問題的一個思路就是中間對齊。說到寬度很寬1欄的布局,中對齊和左對齊如何很好的組合,變成設計的要點。

中對齊的正確使用有一些值得注意的點。首先,必須避免用戶的視線忽視中間。例如,如果長文本中對齊,文章的開始點就會因此改變,變得難以閱讀。如果使用中對齊,短文章不必要換行,長文章必須左對齊。

還有,接近元素寬度充滿的時候,雖然用中對齊,也不能很好的解決。但是,寬度被占滿的情況是不存在的,看到中對齊不完整的位置就像懸浮一樣。為此,必須要在運用盒子和邊緣等下功夫,中對齊才不會出現違和感。

4.固定的頂部和頂部的超薄化

固定的頂部也很普遍。在很多的時候,這裏搭載的是導航條。無論能進入頁麵內哪個位置,都能立即回到主要部分。固定頂部的UI沒有側邊導航,當頁麵較長時,能確保使用的敏捷度。

但是,固定的頂部沒必要的時候,會有占據一些空間的缺點。因此,頂部隻能加工的變薄。像曾經PC網站的外觀那樣,采用多段式並且較厚的頂部是很困難的。

這就意味著必須在頁麵內限定元素。如果元素容納的多,頁麵就會變厚,很難被固定化。菜單的數量應該被限定,相對於以前,這方麵的意識必須要加強。

5.固定的左邊導航

近年可以看到一些布局將導航條設置在左側。說起來也與曾經2欄布局為主流時代的左導航在構造和功能上有所不同。

畫麵左邊被固定,最近有很多追隨滑動的按鈕。另外,內容部分基本使用1欄布局,跟隨畫麵寬度的進行伸縮的液態布局被使用的數量也很多。

這樣的設計會帶來應用程序的操作感。另外,有容易應對多設備的特點。移動端優先的設計,響應式網站和液態布局即是使用PC也能對應多種情況,有采用這樣的構造的傾向。

但是,必須注意的是這樣新式布局,對於一般的用戶有很難留下第一印象的危險性。另外,對於菜單的多層級化的時候,連接和鼠標經過引出下一級菜單的操作是必要的,因此提高了操作的難易度。

從使用能力,全部的構造等固定左導航的缺點來看,有必要搞清導入的妥當性。

6.液態布局

在設備多樣化中,畫麵的分辨率呈現前所未有的變化。以前,寬度符合960~980px就可以解決問題的這個規律變得難以通用。對於分辨率多用化的一個回答就是,符合畫麵寬度的布局也就是液態布局。

液態布局是,元素和圖片不是用像素而是使用%。因此,無論看到什麽樣的尺寸,分辨率的畫麵,都會被布局成有一定的平衡。可以解決符合小畫麵的時候的缺點和符合大畫麵的時候的缺點。

必須留意的是,對各個頁麵“最合適化”的布局是不存在的。設想一下各種各樣的分辨率的畫麵,匯集了最少破綻並被認為是有共同的妥協點的布局手法。有些特定的尺寸會感到平衡被打破,有些程度是必須被允許的,意味著會布局成像網頁的網頁。

未完待續...

點擊查看原文

相關鏈接