因?yàn)橹悄苁謾C(jī)的普及，用PC瀏覽的網(wǎng)站關(guān)注度正在下降。但是，托B2B數(shù)字營銷的福。PC網(wǎng)站今后也變成戰(zhàn)略中心。即使在B2C的領(lǐng)域，PC網(wǎng)站也是不可或缺。

   對(duì)于在硬件方面沒有太大變化PC的網(wǎng)頁設(shè)計(jì)來說，也有技術(shù)被固定化的印象，實(shí)際上現(xiàn)在也正在接受時(shí)代的潮流而發(fā)生著變化。特別是下面那樣的環(huán)境變化，也給與PC網(wǎng)站的UI設(shè)計(jì)帶來很大的影響。

?顯示設(shè)備的多用化。

?智能手機(jī)應(yīng)用的普及化

?電子設(shè)備觸摸屏的普及

   如果迎合趨勢(shì)將會(huì)取得成功不是嗎？這個(gè)基礎(chǔ)就是抓住用戶動(dòng)向的變化，有必要完全理解這一變化。因此這篇文章是PC網(wǎng)頁 UI設(shè)計(jì)的最新動(dòng)向，基于那些背景下的推測(cè)匯總。

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

   舉例說曾經(jīng)的PC網(wǎng)站有很多是在有限的空間內(nèi)填入了大量元素的設(shè)計(jì)。但是現(xiàn)在UI部件變得有：大型化（Big UI）、較低的密度（Low Density）、長頁面（Long Page）的傾向。

   以前是海外以創(chuàng)意型，初創(chuàng)型為中心網(wǎng)站所采用的設(shè)計(jì)，進(jìn)入日本的海外企業(yè)和前衛(wèi)的網(wǎng)頁設(shè)計(jì)師，采用那些理念設(shè)計(jì)的企業(yè)網(wǎng)站，漸漸地在日本也被廣泛應(yīng)用，這個(gè)趨勢(shì)也與扁平化設(shè)計(jì)相呼應(yīng)。2013年以后以Big UI / Low Density / Long Page 為基礎(chǔ)的設(shè)計(jì)理念在網(wǎng)站更新中使用增多了。

   這樣的趨勢(shì)，不能單單看起來時(shí)興，其有合理的存在理由。在開發(fā)的立場(chǎng)，讓響應(yīng)式網(wǎng)站更容易實(shí)現(xiàn)。如果在用戶的立場(chǎng)來看，更容易瀏覽、更容易理解、不再迷茫，除了所說的這些以外，讓網(wǎng)站更好的利用觸摸屏，作為其更大的優(yōu)點(diǎn)。

   近些年不只手寫板，筆記本電腦也安裝了觸屏。對(duì)于在沒有準(zhǔn)備手機(jī)網(wǎng)站的情況，在智能手機(jī)上，網(wǎng)站的頁面也被要求需要有一定程度的瀏覽。

   觸摸屏，因?yàn)橛檬种傅狞c(diǎn)擊，不能進(jìn)行精準(zhǔn)操作。因此用戶界面會(huì)變大。元素之間的必需留出充分的空間。如果用戶界面變大，密度變低，當(dāng)然頁面中表現(xiàn)元素要少，頁面變長，以滾動(dòng)為前提了。

   這篇文章之后要介紹很多趨勢(shì)，都是從Big UI / Low Density / Long Page的潮流中派生出來的。這不是最時(shí)尚的流行，但是現(xiàn)在是最適合用戶行為的設(shè)計(jì)思想。

2.1欄布局

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

   曾經(jīng)左右兩欄布局的PC網(wǎng)站是UI設(shè)計(jì)主流。在電子商務(wù)網(wǎng)站等有大量信息的網(wǎng)站中，3欄布局也很常見。但是現(xiàn)在去掉左右欄，只焦點(diǎn)于內(nèi)容部分，1欄布局正在增加。

   對(duì)于用戶，不再有不必要的雜音映入眼簾，集中真正必要的內(nèi)容。文字更容易閱讀，圖片被展示的更大。

   另一方面，映入眼簾的信息量減少，廣告等會(huì)變得有些分散。因此，對(duì)于用戶活動(dòng)線路的設(shè)計(jì)，必須要更加謹(jǐn)慎。

   另外，在側(cè)邊欄設(shè)置局部的導(dǎo)航條手法，與其他層級(jí)的網(wǎng)站相關(guān)，有讓用戶不再迷茫的突出優(yōu)點(diǎn)。去掉側(cè)邊欄的導(dǎo)航條，讓網(wǎng)站的層級(jí)降低，盡可能減少菜單，不止限于1頁內(nèi)的布局意味著網(wǎng)站全體的設(shè)計(jì)方法需要重新考慮。

   反過來說，多層級(jí)化的前提是與網(wǎng)站的龐大度有關(guān)。有很多的1欄布局不能讓內(nèi)容被準(zhǔn)確的理解，據(jù)此判斷需要謹(jǐn)慎使用。

3.中對(duì)齊

   1欄布局的一個(gè)問題是文字換行吧。文字充滿整個(gè)寬度時(shí)候會(huì)顯的很長，很難保持布局的美觀。如果1行的文字?jǐn)?shù)量超過40個(gè)字，人們就會(huì)覺得難以閱讀。不能因?yàn)槭?欄就什么也都不考慮，寬度被文字占滿，是不可避免的。

   解決這個(gè)問題的一個(gè)思路就是中間對(duì)齊。說到寬度很寬1欄的布局，中對(duì)齊和左對(duì)齊如何很好的組合，變成設(shè)計(jì)的要點(diǎn)。

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

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

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

   固定的頂部也很普遍。在很多的時(shí)候，這里搭載的是導(dǎo)航條。無論能進(jìn)入頁面內(nèi)哪個(gè)位置，都能立即回到主要部分。固定頂部的UI沒有側(cè)邊導(dǎo)航，當(dāng)頁面較長時(shí)，能確保使用的敏捷度。

   但是，固定的頂部沒必要的時(shí)候，會(huì)有占據(jù)一些空間的缺點(diǎn)。因此，頂部只能加工的變薄。像曾經(jīng)PC網(wǎng)站的外觀那樣，采用多段式并且較厚的頂部是很困難的。

   這就意味著必須在頁面內(nèi)限定元素。如果元素容納的多，頁面就會(huì)變厚，很難被固定化。菜單的數(shù)量應(yīng)該被限定，相對(duì)于以前，這方面的意識(shí)必須要加強(qiáng)。

5.固定的左邊導(dǎo)航

   近年可以看到一些布局將導(dǎo)航條設(shè)置在左側(cè)。說起來也與曾經(jīng)2欄布局為主流時(shí)代的左導(dǎo)航在構(gòu)造和功能上有所不同。

   畫面左邊被固定，最近有很多追隨滑動(dòng)的按鈕。另外，內(nèi)容部分基本使用1欄布局，跟隨畫面寬度的進(jìn)行伸縮的液態(tài)布局被使用的數(shù)量也很多。

   這樣的設(shè)計(jì)會(huì)帶來應(yīng)用程序的操作感。另外，有容易應(yīng)對(duì)多設(shè)備的特點(diǎn)。移動(dòng)端優(yōu)先的設(shè)計(jì)，響應(yīng)式網(wǎng)站和液態(tài)布局即是使用PC也能對(duì)應(yīng)多種情況，有采用這樣的構(gòu)造的傾向。

   但是，必須注意的是這樣新式布局，對(duì)于一般的用戶有很難留下第一印象的危險(xiǎn)性。另外，對(duì)于菜單的多層級(jí)化的時(shí)候，連接和鼠標(biāo)經(jīng)過引出下一級(jí)菜單的操作是必要的，因此提高了操作的難易度。

從使用能力，全部的構(gòu)造等固定左導(dǎo)航的缺點(diǎn)來看，有必要搞清導(dǎo)入的妥當(dāng)性。

6.液態(tài)布局

   在設(shè)備多樣化中，畫面的分辨率呈現(xiàn)前所未有的變化。以前，寬度符合960~980px就可以解決問題的這個(gè)規(guī)律變得難以通用。對(duì)于分辨率多用化的一個(gè)回答就是，符合畫面寬度的布局也就是液態(tài)布局。

   液態(tài)布局是，元素和圖片不是用像素而是使用%。因此，無論看到什么樣的尺寸，分辨率的畫面，都會(huì)被布局成有一定的平衡?？梢越鉀Q符合小畫面的時(shí)候的缺點(diǎn)和符合大畫面的時(shí)候的缺點(diǎn)。

   必須留意的是，對(duì)各個(gè)頁面“最合適化”的布局是不存在的。設(shè)想一下各種各樣的分辨率的畫面，匯集了最少破綻并被認(rèn)為是有共同的妥協(xié)點(diǎn)的布局手法。有些特定的尺寸會(huì)感到平衡被打破，有些程度是必須被允許的，意味著會(huì)布局成像網(wǎng)頁的網(wǎng)頁。

   未完待續(xù)...

出典：http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

翻譯：SISENdesign