2018年網頁設計的19種趨勢!

來源:中國設計在線    時間:2018-03-23    站內收藏

    在創意產業中,我們很容易就能從趨勢中獲利,畢竟關注熱點并不需要創意或是創新——除非你是為了不斷地改變趨勢。但創意是一種對話。

    自從我們第一次學會用木炭在洞穴壁上的赭石記錄世界的片段以來,這種對話就一直在進行。我們還學會了把僅僅是用棍子刻在粘土上的抽象符號,變成了承載著充分含義的載體——語言。

    趨勢僅僅只是龐雜而混亂的多方談話中的主音,無論是否應用趨勢,我們的創造都與這些趨勢并存。  

    趨勢為我們提供了大背景,畢竟如果沒有規范,又何從定義創新?如果沒有去年的熱點潮流,又從哪里尋找規范?

    所以和去年一樣,我和webflow優秀的設計團隊一起,預測了2018年的設計趨勢。以下來自Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff,以及我。

    1

    破碎的網格布局

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    設計師總是無盡地去追求更具創意、更引人入勝的布局,但在這個過程中網格布局一直廣受運用,網格布局能帶來和諧和規范的感覺,但網格本身就存在約束。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    有時候我們自己都想逃離網格的規范性,對吧!

    但這并不意味著破碎的網格布局完全忽略了網格的概念,相反,破碎格局允許圖像和文本元素更自由地出現,而在更規范的布局中,元素的排布往往需要按部就班。在這里,圖像和文字的位置開始重疊和匯合,位圖和字體的并置往往都會出現美麗的意外。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    有時候很難說這些效果是故意的,還是只是一個美麗的錯誤…

    2

    將插圖放在中心位置

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    我在數字產品營銷領域所看到的一個比較有趣的挑戰就是選擇合適的圖像。我看到過整個設計團隊針對這一議題進行討論,并且通常結束于兩點之一:

    1.產品UI(用戶界面)截圖及動圖

    2.設計過的或是生活化的攝影

    前者強調產品本身的體驗、特征及功能,而后者則試圖強調產品的人性層面:它對生活的影響。

    進入2018年后,我們可以看到并將繼續看到,在產品的設計和營銷方面,插畫師的工作越來越受重視。

    我對這件事不知所以的著迷,甚至于我都不能確定它到底是什么。也許這和我們在時尚界所看到周期性相同,畢竟插畫在整個60年代后期一直占據著廣告界的主導地位。

    或者,Dropbox的設計團隊可以通過解釋他們的新插畫風格來解決問題:

    我們用鉛筆構建草圖,然后用豐富多彩、抽象的形狀來填充,將創意變為現實。我們的風格的靈感來源于你第一次有想法的瞬間,這種風格也在提醒我們,除非你有所行動,否則畫布上只有空白。

    我想,這就是說,他們必須重新設計一些東西,對吧?

    在Shopify的Polaris網站中可以看到,插圖可以將很多抽象的概念具體化于生活中。僅僅只是一張畫作,Shopify就闡述了Polaris的概念—就像北極星一樣,為團隊中的每一位成員指明方向。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    最后,值得注意的是,插圖也可以巧妙地解決攝影帶來的一些具有代表性的問題。

    我們為大眾提供數字產品,但當我們將一張真人攝影作品放在網站上的顯著位置時,圖片中的真人主角就定義了你的用戶,但這樣就遺漏了其他沒有被定義的用戶。

    相比之下,Shopify Polaris的插畫主角形象僅僅只是個人類,并不能確定諸如種族、性別、國際等屬性,這使得我們更容易地將自己代入這樣的場景中,就像我們自己就是一個獨立地思考者,思考這北極星所照亮的創造的可能性。

    3

    野蠻主義達到主流地位

    2017年初,我們發表了一篇文章,談及野蠻主義的興起,并試圖回答出現新興風格的原因:

    野蠻主義……正在開啟一個設計師想做什么就可以做的空間,這甚至超出了應該做什么的范疇。野蠻主義的作品往往避開了所有的最佳建議和最好實踐列表上的東西,以支持震撼的外觀和效果,有時甚至帶有一些攻擊性。

    所以你可以想象,當這兩個電子商務網站都坐上這股粗獷潮流的列車時,我們有多驚訝。

    Balenciaga

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    Gucci

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    4

    更多有機和傾斜的形狀

    大自然厭惡直線!猈illiam Kent

    近幾年來,無論是網頁端還是移動端的設計都是由卡片式的用戶界面占據主導地位。直到現在,這些卡片幾乎都是銳邊、直角的,可以看出其最基礎的幾何形狀,使得大家去關注網頁設計的基礎材料。

    這在2017年有了很大的改變,現在,從谷歌到推特再到臉書,幾乎每一個應用的卡片都應用了圓角,比如輸入框、頭像框等。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    如果這些框都是圓角的,他們就會是橢圓形的。

    但這并不是有機形狀的主要組成元素,F在的背景設計往往有很多顏色各異的變形斑點,略夸張的對角線,即使是我們平時所用的破折號也會被卡通化。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    但在無盡的探索中,設計師總不能僅僅只是運用靈活的曲線,很多人都會把卡片旋轉一些角度,運用角度來進行設計,就像Stripe的主頁一樣。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    但這并不意味著直角將會在設計中消失。在下圖中,我們可以看到直線和直角的運用,不過是把它們與更多的曲線、球形有機地結合在了一起。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    在許多網站,我們都能看到閃爍或是振動的顏色。雖然這些顏色的組合能夠讓人留下深刻的印象—包括在眼睛中留下殘影—不過值得注意的是,在可訪問性的層面上,顏色組合的使用可能會出現一些問題。

    通常我們都將可訪問性作為為殘障人士所做的用戶友好行為,但不要忘記,即使是不存在色覺障礙的人也可能會遇到令人眼花繚亂的色彩組合。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    不開玩笑,當這些形狀滾動起來,你就會看到你的屏幕上全是這些東西了。

    根據LinkedIn的無障礙工程經理Jennison Asuncion的說法,可訪問性可以定義為:

    設計和開發包括殘疾人在內的每個人都可以獨立使用和互動的用戶界面。

    5

    更普遍的交互和動畫

    媒介就是信息。–Marshall McLuhan

    網頁并不是一個靜態媒介。盡管Justin Jackson的This is a webpage有著持久的美感與真實性,但網頁上還可以有更多靈活的東西。媒介就是信息,McLuhan的這句名言,至少意味著有一些網頁信息在于網頁的變化和交互:網頁不能只是簡單地向我們提供信息,而應該是讓信息生動起來,更重要的是,讓我們與這些信息進行交互并對之產生影響。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    有的信息都在移動,但這并不影響集中注意力。

    漸漸地,當你滾動網頁滑塊時,一塊一塊的信息并不僅僅只是被你接受了,還會影響你的認知,并且企圖得到你更多的關注。

    顯然,我們也不能濫用這種生動,會使得網頁看起來像動畫一樣,要小心這會影響你的用戶體驗,尤其是那些有認知障礙或對運動敏感的人。

但    不能否認,恰當的小動畫能夠在恰當的時間引導用戶注意正確的內容,從而使得他們不會錯過重要的信息,或是訪問其他頁面。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    以Black Sheep的Heco Partners為例,向下滾動時,標黑的當前行幫助用戶集中注意力,然后一系列突出大膽的工具開始爭奪用戶的注意,呼吁停止閱讀并點擊下一頁。這是創建一個內聯導航系統的創造性方案,但這也可能給用戶帶來了不必要的緊張感。

    我們也可以看到很多工具可以簡化復雜動畫和交互的創建—這是數字設計是工具包中的一個缺口—從我們自己的Interaction2.0到Airbnb的Lottie都可以看得出來。

    具體而言,我們期待兩種特定的動畫模式的出現:不尋常的滑動速率和頁面轉換。

    意外的滑動率

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    現在視差可能有些過時了,但這并不意味著設計師們不會以有趣的方式來設計滑動。

    例如網站Anna Eshwood,網站上的每一張照片一開始都是正常的展示,直到用戶下拉滑塊滑過后,照片都會快速上升,比滑塊滑動速度快,營造出一種有趣的飄渺感,可以很好地展現簡樸的黑白照片和嚴肅的模型。

    隨著交互和動畫在在線體驗中更為突出,我們也期望看到更多的設計師設計出更具突破性的作品。

    頁面轉換

    在一個充滿好看動畫的網站中,我們能感知到,網頁上正在發生一些變化,但如果是從一個頁面轉換到另一個頁面,就會比較唐突了,無論是在哪個網站上。

    轉換動畫可能會有所用處,它能將用戶從一個頁面送走,再在另一個新頁面上迎接。不過要謹慎運動轉換動畫,也沒有必要鏈接它們。這個過渡本身就是每一個頁面之間的轉換:頁面突然變為一片空白,然后再有新的頁面加載。

    但我們發現在這一點上,很多網站都搞了一些事情。以網站3drops為例:

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

    在這里,頁面轉換時依舊保證了用戶的體驗,體現了品牌的存在。當用戶想要訪問是視圖庫中的另一視圖時,髕骨是被導航到了新的頁面。這對于以設計為中心的品牌展示來說,是一個不錯的點子。

2018年<a href=http://www.1631283.live/sheji/wangyesheji/ target=_blank class=infotextkey>網頁設計</a>的19種趨勢!

本文來源:中國設計在線

關鍵詞: 網頁設計 趨勢 
編輯:John
相關閱讀
    正在加載...
安卓有什么赚钱app 为什么要发股票 九点期货配资 上海福利彩票选四计算方法 期货配资平台先选金多多联系 安徽11选5一定牛走势图 怎么下载河北十一选5助手 陕西11选5开奖结果 走势图 十一选五的走势图吉林 各种彩票玩法说明 河南快三分布走势图