表單的界面設計是由許多細小的元素所組合而成的集合體，標題和輸入框的排列方式有著重要的地位，標題要放在輸入框的左側還是上面？要靠左還是靠右？要怎么排列才能提高表單的完成率呢？藍藍設計表單元素ui設計大揭密!

標題和輸入框常見的排列方式

1. 放在輸入框左邊，而且靠左對齊

圖表是數據圖形化的表示，通過形象的圖表來展示數據，比如條形圖，折線圖，餅圖等等。可視化圖表可以幫助開發者更容易理解復雜的數據，提高生產的效率和Web應用和項目的可靠性。

在這篇文章中，藍藍設計收集了值得網站設計開發者收藏的JavaScript圖形圖表庫，適合各種圖表需求。其中大部分都是免費而且開源的，希望大家能在下面的列表中找到適合自己需求的JavaScript圖表和圖形庫。

1.  JS Charts

在網頁設計中使用更多的視頻，被認為是2014年的一大設計趨勢。當然有一些人會堅持大量使用文本/內容，他們認為內容是網站的根基，其他人則認為需要打破傳統，因為訪客的好奇心是不會滿足于單一的內容鋪陳的，需要為訪客的好奇心制造驚喜。

無論如何，視頻增多文本減少的網站的界面設計在過去的幾個月里層出不窮。這樣的解決方案有其優缺點，但是至少它引爆了人們的激情。只有時間能證明一切。

藍藍設計這里收集了一些新的網頁設計的例子，它們帶來了更多的視覺沖擊，感受下。

案例合輯 

Manaz Productions

該網站毫不猶豫地提供了大量視頻而故意削弱了文本量，其實并不奇怪，因為這個公司就是視頻制作商，著陸頁凸顯自己視頻制作技巧是很有必要的。

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

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

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

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

首先，補充個小知識：

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

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

網頁設計中最常見的無襯線字體

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

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

Arial

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

變體:

Arial：有時稱為Arial Regular以便與Arial Narrow區別，其包括Arial、Arial Italic（斜體）、Arial Bold（粗體）、Arial Bold Italic（粗斜體）和Arial Unicode MS
Arial Black：此字體的特色在于其筆畫相當的粗，包含Arial 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找到
——以上來自百度百科

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

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

iPhone 5s

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

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

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

更多留白/負空間

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

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

1、添加對比

Pack

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

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

為什么要繪制草圖？

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

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

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

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

結合到網站設計中：

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

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

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

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

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

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

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

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