模板建站動態

因為智能手機的普及，用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就可以解決問題的這個規律變得難以通用。對於分辨率多用化的一個回答就是，符合畫面寬度的佈局也就是液態佈局。

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

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

7. 回歸立體表現

Microsoft的Windows8和Apple的iOS7中所提倡扁平化設計，對以前占有支配地位，裝飾過多的擬物化有很強的沖擊。扁平化在APP UI的世界瞬間被普及瞭，這股潮流也波及到PC網站，在2013年之後更新網站中有很多使用瞭扁平化設計。

另一方面，扁平化設計的問題也表現瞭出來。扁平化認為設計側面會帶來是很大的累贅。特別是頁面元素很多的網站，不用表現立體，因此導致瞭點擊元素與非點擊元素之間很難區別，重要的信息和關聯性之間也很難區分。扁平化設計表面上更簡潔和親切，與之相反卻是一種難度較高的設計。

對扁平化的反思，最近立體的表現形式開始再次被拿出使用。Google所提倡的material設計可以說就是一個典型。material設計是指用圖層和影子等來表現現實世界中的三次元，所說的UI會再次回歸立體的消息是可以理解的。

因為UI是沒有流行的這一說法，說是符合流行的扁平化設計或是擬物化設計這種判斷都是錯誤的。所以，重新考慮制作網頁UI的目的時，扁平設計的制約性很大，並且很難考慮全面，再度回歸立體表現的潮流應該是很妥當的。

8. 滾動和聯動的機關

網頁變長在滾動的行為中，可以多在滾動時的反響上下功夫。

使用多年前就流行的視覺滾動差效果來表現，這也算一個流行。不過現在的視覺差花費的制作成本正在減少，有時是菜單跟隨滾動、有時是某個位置彈出窗口的展開、有時是淡入的文字，像這樣少量的機關可以讓網站特別顯眼。

這裡是Javas cript庫的普及，因為Canvsa和css動畫的廣泛使用，讓UI動起來變得相對簡單，追求動態UI的心情也應該被考慮進去。

但是動態UI是人類眼睛對運動物體本能反應的需求。因此，沒有計劃且過剩的動態，會讓眼睛得不到休息，讓人感覺到不穩定，原本的信息也沒有被記住。不能不計後果的使用動畫，在個別的地方使用動畫可以得到不錯的效果，最小限度的使用才是上策吧!

9. 無縫的畫面跳轉和過渡

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

然而，通過Pjax實現瞭像APP那樣的頁面跳轉，就像插入JQuery一樣，即使是PC網站也可以作到無縫的頁面跳轉。

Pjax維持瞭網站的結構，在頁面跳轉時隻是替換瞭特定的代碼。總之，想讓頁面整潔的存在，而去使用Flash和曾經的Ajax的網站都會有避免不瞭“不利於SEO”的缺點。

最近隨著技術的進一步發展，頁面跳轉時的過渡和多樣性會變得更加豐富。

現在這樣的技術作為設計情感的一個側面得以強化。網站構建時也有效果展現不合適的情況，關於使用的效果有必要充分的考慮一下。

10. 網頁字體的活用

要是使用網頁字體的話，在OS上可能會顯示沒有字體。必須要把文字制作成圖片格式。

在國外Google等公司免費提供瞭高品質的英文網頁字體。英文因為隻有26X2種(大寫、小寫)+符號，所以字體比較豐富，可選項多，被迅速普及。

日本國內受此影響，也能在網站上看到一些日文的網頁字體。

但是，網頁字體確實是當今PC網站的趨勢。日語網頁字體沒有像英文那樣很容易被普及。

日文與英文的不同，必須要上萬的文字字符。為此，必須要構建適合文字伸縮的服務器，根據這個，即能看到一瞬間的顯示延時，也能看到怪異的情況(譯者註：本人沒開發過字庫對相關知識不太瞭解，這句沒太看懂，隻能直譯，還請見諒!)。

另外，圖像失真的也很多，特別是Windows環境下文字輪廓很難看也是一個大問題。與英文有所不同，有文字多，字間距規范化難，文字末尾處理等等問題，所以必須得放棄使用。也就是說，因為使用瞭外觀受限的網頁字體而使美觀度降低所引起的矛盾，就是現在日文網頁字體的現狀。

盡管認為網頁字體是今後的潮流，日文受到的制約和缺點也有很多，可以說普及是一個很大的課題。

11. SVG的使用

在網頁上的主流圖片格式很長一段時間都是JPEG、GIF和PNG。未來將增加SVG格式的圖片。

SVG最大的特征是矢量圖。與其他格式相比，不會依存於尺寸和分辨率。無論什麼樣的使用環境，無論如何的擴大，都能正常顯示。體積也小，有做成動畫的可能，圖片格式適合在移動端和多種設備下閱覽。

在使用SVG格式之後支持的瀏覽器會變少。Internet Explore8以下的瀏覽器，不能支持。因此針對IE8以下的網站需要準備替代手段。另一方面，除瞭IE8以下的瀏覽器，當前主流瀏覽器可以多使用SVG格式。

作為圖片的特點，SVG適合色彩少且簡潔的圖形。另一方面，像照片那樣寫實的表現，SVG是不適合的。因此，不可以全部都SVG化，根據圖片的特點JPEG和PNG要一起並用。

12. 視頻的活用

Flash進入瞭成熟期，是積極嘗試UI與影像融合的時候瞭。伴隨著Flash的衰退，PC網站變得普遍沒有動態，在UI中加入視頻的網站逐漸增多。

為瞭在HTML中插入視頻，必須使用標簽。這個標簽是HTML5之後才提供的,對於不支持HTML5的瀏覽器是不能用的。但是，近些年由於一些提前支持HTML5的主流瀏覽器，使得利用視頻的環境更加容易，這也是加速視頻活用的一個原因。

另外和以前相比，視頻的制作更加容易也不能忘記。曾經的影像制作必須花費高額的費用，出現瞭承包影像制作的公司。如果不是對品質有要求的話，即使是個人也可以用手機等拍攝簡單的視頻，這也是一個加速視頻活用的原因吧。

與智能手機不同，PC網站的網絡速度基本不會有神經質的狀況。要是使用視頻會得到更好的訴求效果。

總結

綜上所述，介紹瞭一些設計趨勢。值得註意的是，“趨勢如此”這樣的簡單理由在設計時是不會被采納的。是否是體現瞭UI的趨勢，並且在網站上去遵循這些趨勢也沒有必要的。

瞭解趨勢是最重要的事，把握這個背景的外部要因和用戶動向的變化。在沒有理解本質的情況下，如果隻是為瞭追求網站的設計趨勢，效果也全然沒有。

趨勢雖然能瞭解，卻也不是必使用，對於設計師來說是一個可選擇項。

培戀網絡原創版權，轉載請註明出處：

培戀網原創版權，網站建設提供網站代運營、模板網站制作轉載請注明出處,本文地址：http://www.gdszrq.com/news/51742.html