藍藍設計 從Dribbble收集了20個漂亮的登陸表單案例。希望你看后能從中受益，并對你以后的登陸表單設計有幫助。設計一個登陸表單看上去非常容易，但大多設計都很糟糕、毫無亮點。無論如何，這篇Dribbble案例集錦絕對走的是另一個極端。希望它們能贏得你的青睞！來一起欣賞吧：）

網站與APP中的登陸表單

繼承了iOS7的精髓，這件登陸界面作品將iOS7微妙的動畫背景上升到一個新的層面。此處的背景完全是一張動畫圖片——甚至可能是GIF。盡管這背景事實上沒有那么精致，但這一定是你平時不常見的設計。你幾乎很難見到這樣的APP，還有如此賣弄的首屏設計。

設計是一個漫長和痛苦的過程，期間可以用點技巧來減少痛苦，30+ tips to improve your iOS design workflow (in Photoshop)一文總結30個實用的技巧可以借鑒和學習。

————–以下為譯文——————-

在本文中我（英文原作者）總結了在photoshop中設計ios軟件時所遵守的方法。許多的技巧適用于一般的UI設計。注意：文中所提到的快捷鍵針對于Windows；Mac 用戶可，Cmd對應Crtl鍵，Opt對應Alt鍵。

1.保持尺寸為偶數

你是首先針對Retina屏幕設計然后再對標準分辨率的進行縮小是吧？為了在標準分辨率下像素仍然保持完美的呈現，你需要保證大小和距離為偶數。具體的做法便是：基于2ps的網格設計。在編輯（Edit）〉首選項（Preference）〉參考線、網格和切片（Cuides,Grids&Slices）。更改網格線間隔（Gridline）和子網格（Subdivisions）來是使得網格間隔線為2px。例如：設置網格線間隔為64px，子網格為32。

正如大家看到的，現在許多人都使用手機訪問互聯網，所以這讓越來越多的公司去開發或重構新的web解決方案，因為他們認識到自己的項目有效的運行在各種移動設備上是多么的重要！現在市面上存在太多流行的移動設備了，網頁設計師們也不得不跟隨潮流適應技術發展和變化規律，這些小巧的用戶界面設計技能已經讓一小部分愿意改變自己的同學們嘗到了甜頭，有付出就有收獲！除了學到全新的技術，也有了踏實的收入，是的！薪水翻倍了！

創建移動設計模式是非常重要的一步，記住！這是為移動設備設計而不是web。不僅僅是移動屏幕遠小于普通的電腦屏幕，關鍵是鼠標和鍵盤已經被手指替代了！當然還有更重要的，說起來很苦逼，我們再也不能使用一種模式來通吃這些不同的移動平臺了，這可比兼容IE那一家子要苦難得多，畢竟還沒有很好的規范。不是嚇唬你，別以為只有那巴掌地大小，為移動端做設計并不是很容易。

這是一組精心收集的30+優質購物車PSD，這些精美的購物車PSD將會為您的設計提供了一點創意靈感。

如果你剛好在做這方面的設計，那可以先欣賞一組超贊的簡約時尚的電商網站設計，或者直接動手學習如何提升電子商務網站易用性，希望能讓你在設計上更加得心應手: ）

Cart Modal Popup

優異的用戶界面可以讓用戶用得順心，從而提高轉化率(conversion rate)，換言之，好的 UI 在使用與銷售層面上形成雙贏。本文整理了16點優化用戶界面的方法，希望對大家有所幫助。

本文原作者加拿大UI設計師Jakub Linowski

單欄型式優于多欄

單欄型式讓你更能掌握自己的內容，從頂部到底部一氣呵成，用故事引導讀者，最終是要誘引他們「采取行動」(call to action，下稱CTA，意指下載或消費等目的);而多欄反而可能導致讀者分心。

如果我說很多iPhone應用網站的設計都頗為精美，相信筒子們不會有什么意見的。看來那些設計師們都敞開胸懷迎接“蘋果style”，創造出干凈簡約又優雅的網站。可不嘛，作為一枚合格的設計師，他們才不會隨隨便便弄個網站展示他們的app呢，都卯足了勁設計出新穎的版式，配上美美的圖片、大量留白和恰當的字體。那么今天呢我們將要帶給你的這份靈感清單就是一些絕贊的iPhone應用網站啦，切克鬧~

Wedding Party

與你的客人一起，通過這簡單有趣的app捕捉并分享你婚禮中的美好瞬間。

藍藍設計：在 Web 設計上應用字體是一項基本技術，同時也是一門藝術。對于英文字體來說可選擇的范圍實在是太廣泛了，合理的使用它們將會為你的網站增色不少。關于英文字體的使用和搭配技巧，在這里不做贅述，只推薦一套非常好的視頻：Fundamentals of Design by CodeSchool

相關好文：
新手入門：選擇字體的五個原則
淺析中英文基本字形的演變和發展
2012年度最佳移動網頁字體設計
推薦！跨平臺字體效果淺析

而真正的挑戰在于中文字體，由于中文字體組成的特殊性導致其體積過于龐大，除了操作系統內置的字體之外，我們很難在網站上應用其他的字體。在可選性很差的前提之下，如何正確的使用中文字體呢？

首先，以下的字體聲明都是很糟糕的，切忌使用：

雖然Web字體版式技術在各種定制化字體解決方案(比如@font-face, Google Fonts)的支持下一路蓬勃發展，但是在我們在設計和桌面app開發中仍然對其缺少精準的控制和把握。還好有一系列的強大功能jquery插件幫助我們解決這個問題。這篇文章詳細介紹了近10個最流行的Web字體版式插件，它們允許我們潤色字體版式并創造出更多超級酷的效果。
不得不說，網站本身也創意十足，個性滿滿喲：）

Lettering.js

Lettering.js 是最簡單最流行的網絡版式插件之一。通過分拆每個文本，并將每個字母放在定制好的<span>中，該插件能夠讓你精準的操控標題版式。使用它小心的調整你的字距或者添加各式各樣的CSS，從而讓每個單詞都有超級贊的效果。

Metro UI是一種界面展示技術，和蘋果的iOS、谷歌的Android界面最大的區別在于：后兩種都是以應用為主要呈現對象，而Metro界面強調的是信息本身，而不是冗余的界面元素。顯示下一個界面的部分元素的功能上的作用主要是提示用戶”這兒有更多信息”。同時在視覺效果方面，這有助于形成一種身臨其境的感覺。

科普一下：神馬是Metro？Metro是由微軟公司開發的內部名稱為” typography-based design language”（基于排版的設計語言）。最早出現在微軟電子百科全書95，后來的產品如：windows媒體中心、Zune播放器都有用到這項技術。該技術已于2010年初（美國）獲得Metro UI專利批準（USPTO）如今該技術被引入到微軟開發的Windows Phone操作系統和已經發布的Windows 8預覽版以及Office 15中。

藍藍設計 ：2012年7月，在大連中軟實訓基地學習時，老師要求我們分小組開發項目，理所當然地，我擔任前端設計和開發的工作。
當我略微得意地把設計好的頁面拿給老師顯擺時，他給了一個字的評價：”俗！”然后講，”中國風看起來的確美，但這種美很容易趨于小氣和庸俗，遠不如簡單用色塊搭配出的效果。”

也是從那時候起，我開始注意色彩的搭配，也開始用這種觀點來把玩一些網頁和海報等的設計。
《甄嬛傳》再經典，老外們也不會明白隱藏在后宮中的彎彎繞…

以前的進度條設計以擬物化為主，現在扁平化風格流行，連進度條也改變咯。藍藍設計推薦您看看40款收集的進度條設計，很多是Dribble上的作品，應潮流而生，想瞧瞧扁平化風格的進度條是怎樣的，就來看看吧。如果你對擬物化的創意進度條更加有興趣，那么來這里瞧瞧《18個讀取進度條的優秀設計案例》

Loading 也是一門學問，如何讓用戶等待加載時不煩還高興，藍藍設計推薦您可以看看這篇：《談談加載(LOADING)的那點事》，絕對從細節處提升用戶體驗 ^_^

Progress by yasir wadood

Circular progress bar by Alexandr Ivanov