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

網(wǎng)站與APP中的登陸表單

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

設(shè)計(jì)是一個(gè)漫長(zhǎng)和痛苦的過程，期間可以用點(diǎn)技巧來減少痛苦，30+ tips to improve your iOS design workflow (in Photoshop)一文總結(jié)30個(gè)實(shí)用的技巧可以借鑒和學(xué)習(xí)。

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

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

1.保持尺寸為偶數(shù)

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

正如大家看到的，現(xiàn)在許多人都使用手機(jī)訪問互聯(lián)網(wǎng)，所以這讓越來越多的公司去開發(fā)或重構(gòu)新的web解決方案，因?yàn)樗麄冋J(rèn)識(shí)到自己的項(xiàng)目有效的運(yùn)行在各種移動(dòng)設(shè)備上是多么的重要！現(xiàn)在市面上存在太多流行的移動(dòng)設(shè)備了，網(wǎng)頁(yè)設(shè)計(jì)師們也不得不跟隨潮流適應(yīng)技術(shù)發(fā)展和變化規(guī)律，這些小巧的用戶界面設(shè)計(jì)技能已經(jīng)讓一小部分愿意改變自己的同學(xué)們嘗到了甜頭，有付出就有收獲！除了學(xué)到全新的技術(shù)，也有了踏實(shí)的收入，是的！薪水翻倍了！

創(chuàng)建移動(dòng)設(shè)計(jì)模式是非常重要的一步，記住！這是為移動(dòng)設(shè)備設(shè)計(jì)而不是web。不僅僅是移動(dòng)屏幕遠(yuǎn)小于普通的電腦屏幕，關(guān)鍵是鼠標(biāo)和鍵盤已經(jīng)被手指替代了！當(dāng)然還有更重要的，說起來很苦逼，我們?cè)僖膊荒苁褂靡环N模式來通吃這些不同的移動(dòng)平臺(tái)了，這可比兼容IE那一家子要苦難得多，畢竟還沒有很好的規(guī)范。不是嚇唬你，別以為只有那巴掌地大小，為移動(dòng)端做設(shè)計(jì)并不是很容易。

這是一組精心收集的30+優(yōu)質(zhì)購(gòu)物車PSD，這些精美的購(gòu)物車PSD將會(huì)為您的設(shè)計(jì)提供了一點(diǎn)創(chuàng)意靈感。

如果你剛好在做這方面的設(shè)計(jì)，那可以先欣賞一組超贊的簡(jiǎn)約時(shí)尚的電商網(wǎng)站設(shè)計(jì)，或者直接動(dòng)手學(xué)習(xí)如何提升電子商務(wù)網(wǎng)站易用性，希望能讓你在設(shè)計(jì)上更加得心應(yīng)手: ）

Cart Modal Popup

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

本文原作者加拿大UI設(shè)計(jì)師Jakub Linowski

單欄型式優(yōu)于多欄

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

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

Wedding Party

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

藍(lán)藍(lán)設(shè)計(jì)：在 Web 設(shè)計(jì)上應(yīng)用字體是一項(xiàng)基本技術(shù)，同時(shí)也是一門藝術(shù)。對(duì)于英文字體來說可選擇的范圍實(shí)在是太廣泛了，合理的使用它們將會(huì)為你的網(wǎng)站增色不少。關(guān)于英文字體的使用和搭配技巧，在這里不做贅述，只推薦一套非常好的視頻：Fundamentals of Design by CodeSchool

相關(guān)好文：
新手入門：選擇字體的五個(gè)原則
淺析中英文基本字形的演變和發(fā)展
2012年度最佳移動(dòng)網(wǎng)頁(yè)字體設(shè)計(jì)
推薦！跨平臺(tái)字體效果淺析

而真正的挑戰(zhàn)在于中文字體，由于中文字體組成的特殊性導(dǎo)致其體積過于龐大，除了操作系統(tǒng)內(nèi)置的字體之外，我們很難在網(wǎng)站上應(yīng)用其他的字體。在可選性很差的前提之下，如何正確的使用中文字體呢？

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

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

Lettering.js

Lettering.js 是最簡(jiǎn)單最流行的網(wǎng)絡(luò)版式插件之一。通過分拆每個(gè)文本，并將每個(gè)字母放在定制好的<span>中，該插件能夠讓你精準(zhǔn)的操控標(biāo)題版式。使用它小心的調(diào)整你的字距或者添加各式各樣的CSS，從而讓每個(gè)單詞都有超級(jí)贊的效果。

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

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

藍(lán)藍(lán)設(shè)計(jì) ：2012年7月，在大連中軟實(shí)訓(xùn)基地學(xué)習(xí)時(shí)，老師要求我們分小組開發(fā)項(xiàng)目，理所當(dāng)然地，我擔(dān)任前端設(shè)計(jì)和開發(fā)的工作。
當(dāng)我略微得意地把設(shè)計(jì)好的頁(yè)面拿給老師顯擺時(shí)，他給了一個(gè)字的評(píng)價(jià)：”俗！”然后講，”中國(guó)風(fēng)看起來的確美，但這種美很容易趨于小氣和庸俗，遠(yuǎn)不如簡(jiǎn)單用色塊搭配出的效果。”

也是從那時(shí)候起，我開始注意色彩的搭配，也開始用這種觀點(diǎn)來把玩一些網(wǎng)頁(yè)和海報(bào)等的設(shè)計(jì)。
《甄嬛傳》再經(jīng)典，老外們也不會(huì)明白隱藏在后宮中的彎彎繞…

以前的進(jìn)度條設(shè)計(jì)以擬物化為主，現(xiàn)在扁平化風(fēng)格流行，連進(jìn)度條也改變咯。藍(lán)藍(lán)設(shè)計(jì)推薦您看看40款收集的進(jìn)度條設(shè)計(jì)，很多是Dribble上的作品，應(yīng)潮流而生，想瞧瞧扁平化風(fēng)格的進(jìn)度條是怎樣的，就來看看吧。如果你對(duì)擬物化的創(chuàng)意進(jìn)度條更加有興趣，那么來這里瞧瞧《18個(gè)讀取進(jìn)度條的優(yōu)秀設(shè)計(jì)案例》

Loading 也是一門學(xué)問，如何讓用戶等待加載時(shí)不煩還高興，藍(lán)藍(lán)設(shè)計(jì)推薦您可以看看這篇：《談?wù)劶虞d(LOADING)的那點(diǎn)事》，絕對(duì)從細(xì)節(jié)處提升用戶體驗(yàn) ^_^

Progress by yasir wadood

Circular progress bar by Alexandr Ivanov