在網(wǎng)頁設(shè)計(jì)中使用更多的視頻，被認(rèn)為是2014年的一大設(shè)計(jì)趨勢(shì)。當(dāng)然有一些人會(huì)堅(jiān)持大量使用文本/內(nèi)容，他們認(rèn)為內(nèi)容是網(wǎng)站的根基，其他人則認(rèn)為需要打破傳統(tǒng)，因?yàn)樵L客的好奇心是不會(huì)滿足于單一的內(nèi)容鋪陳的，需要為訪客的好奇心制造驚喜。

無論如何，視頻增多文本減少的網(wǎng)站的界面設(shè)計(jì)在過去的幾個(gè)月里層出不窮。這樣的解決方案有其優(yōu)缺點(diǎn)，但是至少它引爆了人們的激情。只有時(shí)間能證明一切。

藍(lán)藍(lán)設(shè)計(jì)這里收集了一些新的網(wǎng)頁設(shè)計(jì)的例子，它們帶來了更多的視覺沖擊，感受下。

案例合輯 

Manaz Productions

該網(wǎng)站毫不猶豫地提供了大量視頻而故意削弱了文本量，其實(shí)并不奇怪，因?yàn)檫@個(gè)公司就是視頻制作商，著陸頁凸顯自己視頻制作技巧是很有必要的。

關(guān)于英文字體，對(duì)我們網(wǎng)頁設(shè)計(jì)師朋友們來說一定并不陌生，即使我們很少做英文語系的網(wǎng)站，但在瀏覽國(guó)外

網(wǎng)站設(shè)計(jì)的時(shí)候，大家一定都會(huì)有或多或少的認(rèn)識(shí)。其實(shí)不單單是在網(wǎng)頁界面設(shè)計(jì)中，很多移動(dòng)操作系統(tǒng)和瀏覽器中都廣泛使用了今天藍(lán)藍(lán)設(shè)計(jì)即將介紹的這些字體。

想必大家也都能猜出來像 Arial、Helvetica 這種大名鼎鼎的字體肯定在里面了，那么還有什么呢？一起來詳細(xì)了解一下吧！

相關(guān)推薦：
《平面排版時(shí)，教你突出中文美感的幾種方法第二集（基礎(chǔ)篇）》
《那些年，我們一起追過的字體》
《快速上手！制作ICON FONT》

首先，補(bǔ)充個(gè)小知識(shí)：

1.網(wǎng)頁設(shè)計(jì)中的英文字體，一般有以下五類：

serif（襯線）
sans-serif（無襯線）
monospace（等寬）
fantasy（夢(mèng)幻）
cuisive（花體）

網(wǎng)頁設(shè)計(jì)中最常見的無襯線字體

在常見的兩種字體風(fēng)格中，襯線體的筆劃感太”過”，不是特別的商業(yè)。隨著瑞士設(shè)計(jì)風(fēng)格的大力推廣，無襯線字體變得愈發(fā)流行起來。

建議: 個(gè)人認(rèn)為 Tahoma 以及 Verdana 字符編碼效果最好 ，適用于多種環(huán)境

Arial

字體族科：Arial, “Helvetica Neue”, Helvetica

變體:

Arial：有時(shí)稱為Arial Regular以便與Arial Narrow區(qū)別，其包括Arial、Arial Italic（斜體）、Arial Bold（粗體）、Arial Bold Italic（粗斜體）和Arial Unicode MS
Arial Black：此字體的特色在于其筆畫相當(dāng)?shù)拇?，包含Arial Black、Arial Black Italic（斜體）
Arial Narrow：為Arial的細(xì)瘦版本，包含Arial Narrow Regular、Arial Narrow Bold（粗體）、Arial Narrow Italic（斜體）和Arial Narrow Bold Italic（粗斜體）
Arial Rounded：包含Arial Rounded Bold（粗體），此字體可在微軟韓文字體Gulim找到
——以上來自百度百科

藍(lán)藍(lán)設(shè)計(jì)無意中發(fā)現(xiàn)這些原型素材，小小地顫抖了一下，感謝網(wǎng)友的無私分享，如果你的作品需要包裝并在iPhone上展示，來這兒挑個(gè)夠吧！

無論哪種角度、哪款樣式，都可以在這原型素材中找到，收藏下來，今后就不用到處找咯。

iPhone 5s

作為一名設(shè)計(jì)師，每年都會(huì)沉浸在一些新的界面設(shè)計(jì)趨勢(shì)中興奮不已。接下來，我們將探尋2013年的設(shè)計(jì)趨勢(shì)，這絕對(duì)是意義非凡的事情。Web設(shè)計(jì)師必須洞悉所有相關(guān)領(lǐng)域的新趨勢(shì)，緊跟時(shí)尚潮流。

這些新趨勢(shì)讓設(shè)計(jì)變得妙趣橫生。但是很多專家還會(huì)倡導(dǎo)那些并非最時(shí)髦、最震撼世界的設(shè)計(jì)。當(dāng)然，響應(yīng)式設(shè)計(jì)不僅去年是熱點(diǎn)，今年依然還會(huì)被人們重視。同樣，柵格化設(shè)計(jì)作為最基本的設(shè)計(jì)，也會(huì)被繼續(xù)延續(xù)下去。

這次，藍(lán)藍(lán)設(shè)計(jì)想探索一下那些逐漸發(fā)展起來的設(shè)計(jì)潮流。也許過去我們只是偶爾嘗試一下這些設(shè)計(jì)風(fēng)格，但是今年我們會(huì)真正關(guān)注它們。

更多留白/負(fù)空間

現(xiàn)在全屏背景的網(wǎng)站界面設(shè)計(jì)非常流行，如果有同學(xué)想要做類似的網(wǎng)站設(shè)計(jì)，那圖片與文字就很關(guān)鍵咯，特別是圖片上的文字，從字體選擇到配色、排版都需要同學(xué)們好好斟酌。
今天藍(lán)藍(lán)設(shè)計(jì)帶來10個(gè)小技巧，同學(xué)們閱讀完可以小試牛刀，說不定加上文字就成了點(diǎn)睛之筆，學(xué)起來吧！

你必須首先要有合適的圖片，好的排版，知道如何充分利用現(xiàn)有資源整合出最佳效果。如果你覺得你已經(jīng)做好接受挑戰(zhàn)的準(zhǔn)備了，那么下面的10個(gè)小貼士對(duì)你會(huì)很有幫助的：

1、添加對(duì)比

Pack

當(dāng)你在計(jì)劃設(shè)計(jì)一個(gè)網(wǎng)頁設(shè)計(jì)的時(shí)候，不一定要完全依賴電子設(shè)備。學(xué)會(huì)如何手繪可以幫助提高網(wǎng)頁設(shè)計(jì)的效率，給你更多的靈感。
ui設(shè)計(jì)學(xué)院里都會(huì)給學(xué)生們教授很多基礎(chǔ)課程。毫無疑問，很多大型機(jī)構(gòu)或者創(chuàng)業(yè)公司都在使用返璞歸真的方法來進(jìn)行界面設(shè)計(jì)創(chuàng)作。無論你是長(zhǎng)期涂鴉的骨灰級(jí)高手，還是剛剛起步的素描小菜鳥，能夠使用紙張與畫筆來進(jìn)行創(chuàng)作是非常重要的設(shè)計(jì)技能。不用擔(dān)心。模仿鉛筆功能的一些工具也不是蓋的。在這個(gè)以設(shè)備為主打的時(shí)代，還是很大的空間來進(jìn)行簡(jiǎn)單又能被認(rèn)可的設(shè)計(jì)創(chuàng)作。
實(shí)際上，我常常聽到很多人埋怨設(shè)計(jì)師們浪費(fèi)太多時(shí)間與成本在使用PS制作精致的方案草圖。手繪則具備更大的靈活性，它可以幫助你在縮減成本的同時(shí)發(fā)展更具原創(chuàng)性的方案草圖。

無論你是在一個(gè)大公司工作，或是一位自由職業(yè)設(shè)計(jì)師，通過手繪草圖來與顧客交流都是必不可少的。

為什么要繪制草圖？

手繪草圖相對(duì)數(shù)字線框圖或者電子繪畫更有優(yōu)勢(shì)。它方便攜帶，簡(jiǎn)單易懂，更具創(chuàng)造力，屢試不爽。沒有什么比使用筆和紙更簡(jiǎn)單直接的表達(dá)方式了。
我發(fā)現(xiàn)，客戶更喜歡在獲得信息的同時(shí)能夠提出建議和進(jìn)行更改。使用電子設(shè)備制作出來的圖紙看起來接近成品，這樣會(huì)讓客戶失去建議和修改的欲望。手繪草圖則非常隨意，你可以隨意修改。

關(guān)注人類心理學(xué)的一些研究是非常有意義的。通過對(duì)人類心理的推敲，藍(lán)藍(lán)設(shè)計(jì)討論人社會(huì)心理，這能夠幫助創(chuàng)業(yè)公司開拓市場(chǎng)，因 為受歡迎的內(nèi)容和大眾心理有著最直接的關(guān)系。問題的關(guān)鍵是，很多心理學(xué)對(duì)于網(wǎng)站設(shè)計(jì)者有著很強(qiáng)的啟發(fā)性。心理學(xué)幫助網(wǎng)站界面設(shè)計(jì)開發(fā)者看清人們的思維如何運(yùn)作。今 天，我們和大家分享幾條對(duì)網(wǎng)站ui設(shè)計(jì)師非常有益的建議。

1.太多的選擇等于沒有選擇。

根據(jù)Sheeya Iyengar教授的心理學(xué)研究，我們能夠洞察人們處理多重選擇時(shí)的心理變化?！斑x擇就是放棄”，Iyengar教授，《選擇的藝術(shù)》的作者這樣總結(jié)說。 社會(huì)心理學(xué)發(fā)現(xiàn)，當(dāng)人們面多過多選擇的時(shí)候，他們的表現(xiàn)非常相似：他們不會(huì)做任何選擇。這就是所謂的“安全選擇”。

結(jié)合到網(wǎng)站設(shè)計(jì)中：

太多需要用戶去點(diǎn)擊的東西，會(huì)讓人覺得混亂。就拿我自己的網(wǎng)站來說，當(dāng)我把兩側(cè)的工具欄撤掉一半之后，注冊(cè)的用戶大大增加。思考你的網(wǎng)站最終、最核心的目的，關(guān)注集中一點(diǎn)，刪掉無關(guān)緊要的點(diǎn)綴和內(nèi)容，直到你的內(nèi)容只剩下最本質(zhì)最重要的內(nèi)容，這樣你的用戶才愿意呆在這里。

2.網(wǎng)站訪問者讀寬屏文字更快，但他們喜歡短屏文字。

大多的網(wǎng)頁設(shè)計(jì)組成都是明亮的背景（通常是白色的）以及黑色的內(nèi)文，但也有少數(shù)的網(wǎng)站設(shè)計(jì)是屬于暗色系的、或是色彩鮮艷的網(wǎng)頁界面設(shè)計(jì)。

但你曾想過為什么有些網(wǎng)頁用鮮明顏色、有些則選用白色當(dāng)背景嗎？

這跟使用者的“動(dòng)機(jī)”有很強(qiáng)的關(guān)聯(lián)性。如果把使用者用某個(gè)服務(wù)的動(dòng)機(jī)，簡(jiǎn)單用二分法來說，一個(gè)是“功利”動(dòng)機(jī)、而另一個(gè)則是“享樂”動(dòng)機(jī)，那么：

• 功利動(dòng)機(jī)適合低喚起、高亮度設(shè)計(jì)
• 功效被定義為有用的特征或是狀態(tài)，使用者尋求功效。例如，當(dāng)你每次在使用計(jì)算機(jī)時(shí)，你可能就有一個(gè)功利性的動(dòng)機(jī)在背后，像是協(xié)助你算帳更快。

研究顯示，屬于功利動(dòng)機(jī)的消費(fèi)者在低喚起環(huán)境，會(huì)比起高喚醒環(huán)境，更容易產(chǎn)生正向認(rèn)知。喚起程度是指外界環(huán)境如何刺激引發(fā)我們的感覺，像白色較容易營(yíng)造低喚起環(huán)（較不會(huì)刺激我們的感覺）、而紅色則容易營(yíng)造出高喚起環(huán)境（刺激性較強(qiáng)）。

舉例來說，使用 Google 的使用者許多是因?yàn)楣麆?dòng)機(jī)，像是搜尋資料、觀察信件……。所以 Google 網(wǎng)站和應(yīng)用程式主要以白色為主，對(duì)使用者而言，身處于低喚起環(huán)境，不容易刺激人們的感知，使用 Google 服務(wù)時(shí)會(huì)比較輕松自在。

在2014年涌現(xiàn)了許多有視覺吸引和創(chuàng)造性的導(dǎo)航界面設(shè)計(jì)，她們不僅身段妙曼富有美感，而且傳承了整個(gè)網(wǎng)站設(shè)計(jì)的導(dǎo)航指引，讓瀏覽者輕松愉悅的訪問網(wǎng)站。她們會(huì)溫馨的提醒你在哪兒，還會(huì)體貼的帶你獲取到想要的東西。別等了，現(xiàn)在就去尋找你喜歡的導(dǎo)航下載它吧。下面請(qǐng)欣賞藍(lán)藍(lán)設(shè)計(jì)精心收集的華麗麗的導(dǎo)航設(shè)計(jì)PSD，希望對(duì)朋友們的ui設(shè)計(jì)能力有所幫助！

Simple Navigation Menu

最近，一個(gè)朋友建議我寫點(diǎn)關(guān)于新聞?lì)惥W(wǎng)站界面設(shè)計(jì)的分析：什么是正確的新聞?lì)?strong>網(wǎng)頁設(shè)計(jì)，什么是錯(cuò)誤的。他認(rèn)為現(xiàn)今的線上新聞?dòng)脩趔w驗(yàn)非常落后，讓人感到厭倦無比，而且只是他們不用心做罷了，采用AJAX或者類似的技術(shù)就能把內(nèi)容呈遞的完善，而且導(dǎo)航做得十足精美。

一開始我非常贊同他的觀點(diǎn)。藍(lán)藍(lán)設(shè)計(jì)認(rèn)為新聞?lì)惥W(wǎng)站的約束在于：過去傳統(tǒng)的報(bào)紙以及雜志均為紙媒，動(dòng)輒就在頁面里融入了那些根深蒂固的慣例。因此用戶在瀏覽時(shí)會(huì)發(fā)現(xiàn)，這類網(wǎng)站的感覺很熟悉，但是卻限制了視覺表現(xiàn)。與此同時(shí)大部分新聞?lì)惥W(wǎng)站的用戶體驗(yàn)設(shè)計(jì)非常差，經(jīng)常會(huì)出現(xiàn)令人閱讀困難的小文本。

從《互聯(lián)網(wǎng)設(shè)計(jì)之道》開始，我知道這句話已經(jīng)別人重復(fù)無數(shù)次了，如果把網(wǎng)絡(luò)比作一種媒介的話，那么網(wǎng)絡(luò)是流動(dòng)的，是復(fù)雜的，也是美麗的。而且網(wǎng)絡(luò)的威力超出了大多數(shù)人的意料。
所以我們一起來看一下這些國(guó)際知名的新聞?lì)惥W(wǎng)站，看看他們的優(yōu)點(diǎn)與缺點(diǎn)。

歸根結(jié)底是移動(dòng)端的用戶體驗(yàn)

其實(shí)，主要還得是移動(dòng)端用戶的體驗(yàn)。然而很多新聞?lì)惥W(wǎng)站并沒有將此類用戶納入考慮。當(dāng)然，確實(shí)很多新聞網(wǎng)站已經(jīng)出了iOS或者Android版本的原生應(yīng)用，可惜效果并不理想，大部分的用戶下載完之后，用幾次就基本廢置到一旁了。

我們獲取信息的途徑是什么？因?yàn)樘^官方，內(nèi)容太過常規(guī)，現(xiàn)在的用戶很少主動(dòng)瀏覽新聞?lì)惥W(wǎng)站。他們通常是通過點(diǎn)擊朋友、親戚、網(wǎng)友的分享來得到信息。通過社交網(wǎng)絡(luò)，E-Mail，RSS Feed以及新聞源中的鏈接來得到信息。而鏈接導(dǎo)向的往往是網(wǎng)站，而不可能是應(yīng)用。因此，每個(gè)新聞?lì)惥W(wǎng)站都必須要注重移動(dòng)端的用戶體驗(yàn)?，F(xiàn)在用手機(jī)瀏覽消息的人實(shí)在是太多了。

那么問題又是什么？為什么新聞?lì)惥W(wǎng)站不改進(jìn)呢？
路很漫長(zhǎng)，前方有兩塊絆腳石有待清除。