由于智能手機(jī)的普及，用PC瀏覽的網(wǎng)站關(guān)注度正在下滑。但是，托B2B數(shù)字營(yíng)銷的福。電腦網(wǎng)站今后也變成策略中心。即使在B2C的范疇，電腦網(wǎng)站也是必不可少。

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

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

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

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

 如果迎合趨向?qū)?huì)取得成功不是嗎？這個(gè)基本就是抓住客戶動(dòng)向的變動(dòng)，有必要完全了解這一變動(dòng)。因此這篇文章是PC網(wǎng)頁(yè) UI設(shè)計(jì)的最新動(dòng)向，基于那些背景下的推測(cè)匯聚。

1.Big UI / low Density / Long Page流行

舉例說(shuō)曾經(jīng)的電腦網(wǎng)站有許多是在有限的空間內(nèi)填入了大量元素的設(shè)計(jì)。但是當(dāng)前UI部件變?yōu)橛校捍笮突˙ig UI）、較低的密度（Low Density）、長(zhǎng)頁(yè)面（Long Page）的傾向。

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

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

近些年不只手寫板，筆記本電腦也安裝了觸屏。對(duì)于在沒有籌備WAP網(wǎng)站的情形，在智能手機(jī)上，網(wǎng)站的頁(yè)面也被要求需要有務(wù)必程度的瀏覽。

觸摸屏，由于用手指的點(diǎn)擊，不能實(shí)行精準(zhǔn)使用。因此客戶界面會(huì)變大。元素之間的務(wù)必留出充分的空間。如果客戶界面變大，密度變低，當(dāng)然頁(yè)面中表現(xiàn)元素要少，頁(yè)面變長(zhǎng)，以滾動(dòng)為前提了。

這篇文章之后要說(shuō)明許多趨向，都是從Big UI / Low Density / Long Page的流行中派生出來(lái)的。這不是最時(shí)尚的潮流，但是當(dāng)前是最合適客戶行徑的設(shè)計(jì)思想。

2.1欄部署

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

曾經(jīng)左右兩欄部署的電腦網(wǎng)站是UI設(shè)計(jì)主流。在電子商業(yè)網(wǎng)站等有大量信息的網(wǎng)站中，3欄部署也很常見。但是當(dāng)前去掉左右欄，只焦點(diǎn)于內(nèi)容部分，1欄部署正在提升。

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

另一方面，映入眼簾的信息量減輕，廣告等會(huì)變?yōu)橐恍┓稚?。因此，?duì)于客戶活動(dòng)線路的設(shè)計(jì)，必須要更加慎重。

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

反過(guò)來(lái)講，多層級(jí)化的前提是與網(wǎng)站的龐大度有關(guān)。有許多的1欄部署不能讓內(nèi)容被準(zhǔn)確的了解，據(jù)此判定需要慎重操作。

3.中對(duì)齊

1欄部署的一個(gè)問(wèn)題是文字換行吧。文字充滿整個(gè)寬度時(shí)候會(huì)顯的很長(zhǎng)，很難保持部署的美觀。如果1行的文字?jǐn)?shù)量超過(guò)40個(gè)字，人們就會(huì)覺得難以閱讀。不能由于是1欄就什么也都不思考，寬度被文字占滿，是不可防止的。

修復(fù)這個(gè)問(wèn)題的一個(gè)思維就是中間對(duì)齊。說(shuō)到寬度很寬1欄的部署，中對(duì)齊和左對(duì)齊怎樣很好的組合，變成設(shè)計(jì)的要素。

中對(duì)齊的精確操作有有些值得留意的點(diǎn)。首先，必須防止客戶的視線忽略中間。例如，如果長(zhǎng)文本中對(duì)齊，文章的著手點(diǎn)就會(huì)因此改變，變?yōu)殡y以閱讀。如果操作中對(duì)齊，短文章不必要換行，長(zhǎng)文章必須左對(duì)齊。

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

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

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

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

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

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

近年能夠看到有些部署將導(dǎo)航條設(shè)立在左側(cè)。說(shuō)起來(lái)也與曾經(jīng)2欄部署為主流時(shí)代的左導(dǎo)航在構(gòu)造和功能上有所不同。

畫面左邊被固定，近期有許多追隨滑動(dòng)的按鈕。另外，內(nèi)容部分基礎(chǔ)操作1欄部署，跟隨畫面寬度的實(shí)行伸縮的液態(tài)部署被操作的數(shù)量也許多。

這樣的設(shè)計(jì)會(huì)帶來(lái)應(yīng)用程序的使用感。另外，有容易面對(duì)多設(shè)備的特色。手機(jī)端優(yōu)先的設(shè)計(jì)，響應(yīng)式網(wǎng)站和液態(tài)部署即是操作PC也能對(duì)應(yīng)多種情形，有采用這樣的構(gòu)造的傾向。

但是，必須留意的是這樣新式部署，對(duì)于普通的客戶有很難留下第一印象的風(fēng)險(xiǎn)性。另外，對(duì)于菜單的多層級(jí)化的時(shí)候，連接和鼠標(biāo)經(jīng)過(guò)引出下一級(jí)菜單的使用是必要的，因此提升了使用的難易度。

從操作能力，全部的構(gòu)造等固定左導(dǎo)航的劣勢(shì)來(lái)看，有必要搞清導(dǎo)入的妥當(dāng)性。

6.液態(tài)部署

在設(shè)備多樣化中，畫面的分辨率體現(xiàn)前所未有的變動(dòng)。之前，寬度適宜960~980px就能夠修復(fù)問(wèn)題的這個(gè)規(guī)律變?yōu)殡y以通用。對(duì)于分辨率多用化的一個(gè)回答就是，適宜畫面寬度的部署也就是液態(tài)部署。

液態(tài)部署是，元素和圖片不是用像素而是操作%。因此，無(wú)論看到怎樣的尺寸，分辨率的畫面，都會(huì)被部署成有務(wù)必的平衡。能夠修復(fù)適宜小畫面的時(shí)候的劣勢(shì)和適宜大畫面的時(shí)候的劣勢(shì)。

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

7. 回歸立體表現(xiàn)

Microsoft的Windows8和Apple的iOS7中所提倡扁平化設(shè)計(jì)，對(duì)之前占有支配地位，裝飾過(guò)多的擬物化有很強(qiáng)的沖擊。扁平化在APP UI的世界瞬間被普及了，這股流行也波及到電腦網(wǎng)站，在2013年之后更新網(wǎng)站中有許多操作了扁平化設(shè)計(jì)。

另一方面，扁平化設(shè)計(jì)的問(wèn)題也表現(xiàn)了出來(lái)。扁平化認(rèn)為設(shè)計(jì)側(cè)面會(huì)帶來(lái)是很大的累贅。特別是頁(yè)面元素許多的網(wǎng)站，不用表現(xiàn)立體，因此造成了點(diǎn)擊元素與非點(diǎn)擊元素之間很難差別，緊要的信息和關(guān)系性之間也很難區(qū)分。扁平化設(shè)計(jì)表面上更簡(jiǎn)潔和親切，與之相反卻是一種難度較高的設(shè)計(jì)。

對(duì)扁平化的反思，近期立體的表現(xiàn)模式著手再次被拿出操作。Google所提倡的material設(shè)計(jì)能夠說(shuō)就是一個(gè)典型。material設(shè)計(jì)是指用圖層和影子等來(lái)表現(xiàn)現(xiàn)實(shí)世界中的三次元，所說(shuō)的UI會(huì)再次回歸立體的消息是能夠了解的。

由于UI是沒有潮流的這一說(shuō)法，說(shuō)是適宜潮流的扁平化設(shè)計(jì)或是擬物化設(shè)計(jì)這種判定都是謬誤的。所以，重新思考制作網(wǎng)頁(yè)UI的宗旨時(shí)，扁平設(shè)計(jì)的制約性很大，并且很難思考全面，再度回歸立體表現(xiàn)的流行應(yīng)當(dāng)是很妥當(dāng)?shù)摹?/p>

8. 滾動(dòng)和聯(lián)動(dòng)的機(jī)關(guān)

網(wǎng)頁(yè)變長(zhǎng)在滾動(dòng)的行徑中，能夠多在滾動(dòng)時(shí)的反響上下功夫。

操作多年前就潮流的視覺滾動(dòng)差效益來(lái)表現(xiàn)，這也算一個(gè)潮流。不過(guò)當(dāng)前的視覺差花費(fèi)的制作成本正在減輕，有時(shí)是菜單跟隨滾動(dòng)、有時(shí)是某個(gè)位置彈出窗口的展開、有時(shí)是淡入的文字，像這樣少量的機(jī)關(guān)能夠讓網(wǎng)站特別顯眼。

這里是Javas cript庫(kù)的普及，由于Canvsa和css動(dòng)畫的廣泛操作，讓UI動(dòng)起來(lái)變?yōu)橄鄬?duì)簡(jiǎn)易，追求動(dòng)態(tài)UI的心情也應(yīng)當(dāng)被思考進(jìn)去。

但是動(dòng)態(tài)UI是人類眼睛對(duì)運(yùn)動(dòng)物體本能反應(yīng)的需求。因此，沒有方案且過(guò)剩的動(dòng)態(tài)，會(huì)讓眼睛得不到休息，讓人感覺到不穩(wěn)固，原本的信息也沒有被記住。不能不計(jì)后果的操作動(dòng)畫，在個(gè)別的地方操作動(dòng)畫能夠得到不錯(cuò)的效益，最小限度的操作才是上策吧!

9. 無(wú)縫的畫面跳轉(zhuǎn)和過(guò)渡

網(wǎng)站和app在頁(yè)面跳轉(zhuǎn)上是否有接縫這一點(diǎn)上略有不同。隨著Flash的沒落，HTML的網(wǎng)站再次成為主流。頁(yè)面的跳轉(zhuǎn)就是頁(yè)面刷新，變成常識(shí)。

然而，通過(guò)Pjax實(shí)現(xiàn)了像APP那樣的頁(yè)面跳轉(zhuǎn)，就像插入JQuery一樣，即使是電腦網(wǎng)站也能夠作到無(wú)縫的頁(yè)面跳轉(zhuǎn)。

Pjax維持了網(wǎng)站的構(gòu)架，在頁(yè)面跳轉(zhuǎn)時(shí)只是替換了特定的代碼?？傊?，想讓頁(yè)面整潔的存在，而去操作Flash和曾經(jīng)的Ajax的網(wǎng)站都會(huì)有防止不了“不利于SEO”的劣勢(shì)。

近期隨著技術(shù)的進(jìn)一步成長(zhǎng)，頁(yè)面跳轉(zhuǎn)時(shí)的過(guò)渡和多樣性會(huì)變?yōu)楦迂S富。

當(dāng)前這樣的技術(shù)作為設(shè)計(jì)情感的一個(gè)側(cè)面得以強(qiáng)化。網(wǎng)站構(gòu)建時(shí)也靈驗(yàn)果展現(xiàn)不適合的情形，關(guān)于操作的效益有必要充分的思考一下。

10. 網(wǎng)頁(yè)字體的活用

要是操作網(wǎng)頁(yè)字體的話，在OS上可能會(huì)顯示沒有字體。必須要把文字制作成圖片格式。

在國(guó)外Google等企業(yè)免費(fèi)提供了高高端的英文網(wǎng)頁(yè)字體。英文由于只有26X2種(大寫、小寫)+符號(hào)，所以字體對(duì)照豐富，可選項(xiàng)多，被迅速普及。

日本國(guó)內(nèi)受此影響，也能在網(wǎng)站上看到有些日文的網(wǎng)頁(yè)字體。

但是，網(wǎng)頁(yè)字體確實(shí)是當(dāng)今電腦網(wǎng)站的趨向。日語(yǔ)網(wǎng)頁(yè)字體沒有像英文那樣很容易被普及。

日文與英文的不同，必須要上萬(wàn)的文字字符。為此，必須要構(gòu)建合適文字伸縮的服務(wù)器，按照這個(gè)，即能看到一瞬間的顯示延時(shí)，也能看到怪異的情形(譯者注：本人沒開發(fā)過(guò)字庫(kù)對(duì)關(guān)聯(lián)知識(shí)不太理解，這句沒太看懂，只能直譯，還請(qǐng)見諒!)。

另外，圖像失真的也許多，特別是Windows環(huán)境下文字輪廓很難看也是一個(gè)大問(wèn)題。與英文有所不同，有文字多，字間距規(guī)范化難，文字末尾處理等等問(wèn)題，所以必須得放棄操作。也就是說(shuō)，由于操作了外觀受限的網(wǎng)頁(yè)字體而使美觀度降低所引起的矛盾，就是當(dāng)前日文網(wǎng)頁(yè)字體的現(xiàn)狀。

盡管認(rèn)為網(wǎng)頁(yè)字體是今后的流行，日文受到的制約和劣勢(shì)也有許多，能夠說(shuō)普及是一個(gè)很大的課題。

11. SVG的操作

在網(wǎng)頁(yè)上的主流圖片格式很長(zhǎng)一段時(shí)間都是JPEG、GIF和PNG。未來(lái)將提升SVG格式的圖片。

SVG最大的特征是矢量圖。與其他格式相比，不會(huì)依存于尺寸和分辨率。無(wú)論怎樣的操作環(huán)境，無(wú)論怎樣的擴(kuò)大，都能正常顯示。體積也小，有做成動(dòng)畫的可能，圖片格式合適在手機(jī)端和多種設(shè)備下閱覽。

在操作SVG格式之后支持的瀏覽器會(huì)變少。Internet Explore8以下的瀏覽器，不能支持。因此針對(duì)IE8以下的網(wǎng)站需要籌備替代手段。另一方面，除了IE8以下的瀏覽器，現(xiàn)在主流瀏覽器能夠多操作SVG格式。

作為圖片的特色，SVG合適色彩少且簡(jiǎn)潔的圖形。另一方面，像照片那樣寫實(shí)的表現(xiàn)，SVG是不合適的。因此，不能夠全部都SVG化，按照?qǐng)D片的特色JPEG和PNG要一起并用。

12. 視頻的活用

Flash進(jìn)入了成熟期，是積極試試UI與影像融入的時(shí)候了。伴隨著Flash的衰退，電腦網(wǎng)站變?yōu)槠胀]有動(dòng)態(tài)，在UI中加入視頻的網(wǎng)站日益增多。

為了在HTML中插入視頻，必須操作標(biāo)簽。這個(gè)標(biāo)簽是HTML5之后才提供的,對(duì)于不支持HTML5的瀏覽器是不能用的。但是，近些年因?yàn)橛行┨崆爸С諬TML5的主流瀏覽器，使得借助視頻的環(huán)境更加容易，這也是加速視頻活用的一個(gè)因素。

另外和之前相比，視頻的制作更加容易也不能忘記。曾經(jīng)的影像制作必須花費(fèi)高額的費(fèi)用，出現(xiàn)了承包影像制作的企業(yè)。如果不是對(duì)高端有要求的話，即使是個(gè)人也能夠用手機(jī)等拍攝簡(jiǎn)易的視頻，這也是一個(gè)加速視頻活用的因素吧。

與智能手機(jī)不同，電腦網(wǎng)站的網(wǎng)絡(luò)速度基礎(chǔ)不會(huì)有神經(jīng)質(zhì)的狀況。要是操作視頻會(huì)得到更好的訴求效益。

總括

綜上所述，說(shuō)明了有些設(shè)計(jì)趨向。值得留意的是，“趨向如此”這樣的簡(jiǎn)易原因在設(shè)計(jì)時(shí)是不會(huì)被采納的。是否是呈現(xiàn)了UI的趨向，并且在網(wǎng)站上去遵循這些趨向也沒有必要的。

理解趨向是最關(guān)鍵的事，掌握這個(gè)背景的外部要因和客戶動(dòng)向的變動(dòng)。在沒有了解本質(zhì)的情形下，如果只是為了追求網(wǎng)站的設(shè)計(jì)趨向，效益也全然沒有。

趨向固然能理解，卻也不是必操作，對(duì)于設(shè)計(jì)師來(lái)講是一個(gè)可選取項(xiàng)。