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

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

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

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

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

 如果迎合趨向?qū)〉贸晒Σ皇菃幔窟@個基本就是抓住客戶動向的變動，有必要完全了解這一變動。因此這篇文章是PC網(wǎng)頁 UI設(shè)計的最新動向，基于那些背景下的推測匯聚。

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

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

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

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

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

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

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

2.1欄部署

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

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

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

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

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

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

3.中對齊

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6.液態(tài)部署

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

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

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

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

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

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

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

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

8. 滾動和聯(lián)動的機關(guān)

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

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

這里是Javas cript庫的普及，由于Canvsa和css動畫的廣泛操作，讓UI動起來變?yōu)橄鄬喴祝非髣討B(tài)UI的心情也應(yīng)當(dāng)被思考進去。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

11. SVG的操作

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

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

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

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

12. 視頻的活用

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

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

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

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

總括

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

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

趨向固然能理解，卻也不是必操作，對于設(shè)計師來講是一個可選取項。