手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

12個PC網(wǎng)頁的UI設(shè)計趨勢(上)

2022-4-13    博博

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


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


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


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

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

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


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



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

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



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



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


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


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


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



2.1欄布局

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


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



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


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


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


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




3.中對齊

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


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



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


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





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

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



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


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



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

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


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



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


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


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



6.液態(tài)布局

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


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



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


   未完待續(xù)...




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

翻譯:SISENdesign



原文鏈接:http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

    分享此文一切功德,皆悉回向給文章原作者及眾讀者.

    免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

    藍(lán)藍(lán)設(shè)計( www.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、
    BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com

存檔