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

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

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

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

首先，補充個小知識：

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

serif（襯線）
sans-serif（無襯線）
monospace（等寬）
fantasy（夢幻）
cuisive（花體）

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

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

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

Arial

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

變體:

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

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

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

iPhone 5s

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

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

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

更多留白/負空間

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

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

1、添加對比

Pack

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

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

為什么要繪制草圖？

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

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

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

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

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

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

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

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

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

這跟使用者的“動機”有很強的關聯(lián)性。如果把使用者用某個服務的動機，簡單用二分法來說，一個是“功利”動機、而另一個則是“享樂”動機，那么：

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

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

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

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

Simple Navigation Menu

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

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

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

歸根結(jié)底是移動端的用戶體驗

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

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

那么問題又是什么？為什么新聞類網(wǎng)站不改進呢？
路很漫長，前方有兩塊絆腳石有待清除。

在產(chǎn)品設計中，產(chǎn)品界面、使用情景、用戶操作等都會影響用戶對產(chǎn)品的體驗。因此我們在ui設計的過程中應遵循一定的原則，避免設計者片面的根據(jù)自己主觀認識對產(chǎn)品做出抉擇。

原則1：用戶界面設計應該是基于用戶的心里模型，而不是基于工程實現(xiàn)模型

就是把后臺本來很復雜的事情通過設計符合用戶日常生活中常用的瀏覽方式或操作方式。其實這一點是設計師把生活中的細節(jié)和數(shù)據(jù)結(jié)合的凝聚點，用戶的心理模型抓的越準，界面就會越優(yōu)秀。