一般人對(duì)於企業(yè)產(chǎn)品的預(yù)期，可能僅停留在功能要強(qiáng)大，信息要安全，能夠幫助企業(yè)提高工作效率。但今時(shí)已不同往日，除此以外，人們開始更注重產(chǎn)品的用戶體驗(yàn)。那么，在面對(duì)企業(yè)產(chǎn)品的界面設(shè)計(jì)上，有什么方法可以提升用戶體驗(yàn)呢？接下來(lái)，藍(lán)藍(lán)設(shè)計(jì)為大家?guī)?lái)一些國(guó)內(nèi)外的優(yōu)秀案例以及一些設(shè)計(jì)Web App時(shí)的思考方向。

Web App 設(shè)計(jì)要點(diǎn)

1. 配色

顏色作為UI設(shè)計(jì)師傳達(dá)情感的主要元素之一。一個(gè)明確的品牌顏色，對(duì)信任度，認(rèn)知度都會(huì)有大大的提升。顏色除了能為界面提升美感，也能作為功能上的輔助。在普遍頁(yè)面信息量大的企業(yè)產(chǎn)品中，往往一個(gè)有顏色的按鈕就很容易吸引用戶的視覺焦點(diǎn)。

Lovely是Dribbble大神Kerem Suer設(shè)計(jì)的Web App。橙色主，藍(lán)色輔助，淡灰色為底色。這個(gè)配色既色彩鮮明，淡淡的感覺更讓人長(zhǎng)時(shí)間使用也不覺累。整體感覺和諧舒服，簡(jiǎn)潔耐看。

網(wǎng)上擠滿了各種各樣的UI設(shè)計(jì)方案，事實(shí)上我們已經(jīng)有一套套的方案可遵循。但！界面設(shè)計(jì)永無(wú)止境！哪怕是一個(gè)注冊(cè)表單，也值得再細(xì)心研究。下面藍(lán)藍(lán)設(shè)計(jì)給出注冊(cè)表單設(shè)計(jì)5個(gè)小技巧：

1、別讓用戶重復(fù)填寫相同的內(nèi)容

幾乎每個(gè)人都經(jīng)歷過(guò)這樣一個(gè)事實(shí)：注冊(cè)時(shí)被要求填寫郵箱地址兩次或重復(fù)輸入密碼。但是這其實(shí)是沒(méi)有必要的。僅填寫一次，因?yàn)橛脩粢话愣加浀米约撼Ｓ玫泥]箱地址和密碼。假設(shè)哪天用戶忘記密碼了可以通過(guò)郵箱找回，再多此一舉填寫兩次反而更加容易導(dǎo)致用戶流失。

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

1.太多的選擇等于沒(méi)有選擇。

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

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

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

很遺憾，2013年版式設(shè)計(jì)的潮流首先展現(xiàn)在有趣的T—shirt上；很幸運(yùn)，有一些更潮流的UI設(shè)計(jì)師已經(jīng)開始追趕時(shí)尚的節(jié)奏，并將他們賦予在網(wǎng)站設(shè)計(jì)的界面設(shè)計(jì)上—字體混搭的藝術(shù)。這種站在潮流前線的版式設(shè)計(jì)風(fēng)格，藍(lán)藍(lán)設(shè)計(jì)尚不多言，以下為15組范例，欣賞為先，點(diǎn)贊為后~

Forefathers Group

于UI設(shè)計(jì)師，挖到免費(fèi)漂亮的Photoshop紋理就像和挖到寶藏一樣。在一個(gè)界面設(shè)計(jì)項(xiàng)目里，派給你一個(gè)妹子和一個(gè)恰當(dāng)?shù)?span id="nhwmrwtdq" class="wp_keywordlink_affiliate">紋理，你會(huì)要神馬？
廢話，肯定是妹子了！當(dāng)然接下來(lái)紋理也是缺一不可的！
今天藍(lán)藍(lán)設(shè)計(jì)推薦給您一些精挑細(xì)選的紋理，來(lái)試試將它們平鋪運(yùn)用到你的web設(shè)計(jì)中吧。

Crafted Wood

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，是一種正在流行的網(wǎng)頁(yè)開發(fā)思想，它是利用靈活可變的柵格系統(tǒng)，令網(wǎng)頁(yè)的顯示模式可以根據(jù)訪問(wèn)設(shè)備的屏幕尺寸規(guī)格而進(jìn)行自適應(yīng)。預(yù)計(jì)2015年的時(shí)候，移動(dòng)端的用戶數(shù)量將會(huì)從目前的8億，增長(zhǎng)到19億，而這也意味著目前我們?yōu)樽烂鏋g覽器而設(shè)計(jì)的網(wǎng)頁(yè)，將會(huì)在他們的手機(jī)和平板上呈現(xiàn)出非常糟糕的使用體驗(yàn)。

但是隨著實(shí)際應(yīng)用狀況的改變，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)還是會(huì)出現(xiàn)一系列復(fù)雜的并發(fā)癥。本文余下的部分，就是詳細(xì)闡述如何在響應(yīng)式網(wǎng)頁(yè)中安置和處理多媒體元素，諸如圖片和視頻，最終的目的是幫你做出一個(gè)靠譜的網(wǎng)站，能讓這些元素?zé)o縫地在各種手持設(shè)備上加載運(yùn)行，提升用戶體驗(yàn)。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中的圖片處理

先說(shuō)說(shuō)響應(yīng)式圖片的處理方法。在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)中，圖片處理的問(wèn)題或多或少地和傳統(tǒng)網(wǎng)頁(yè)中的導(dǎo)航欄設(shè)計(jì)有相似之處。隨著新的移動(dòng)設(shè)備的普及，更高像素密度的屏幕使得網(wǎng)頁(yè)的任何一個(gè)瑕疵都顯得無(wú)比明顯，因此，圖片處理的核心問(wèn)題在于如何確保網(wǎng)站（尤其是圖片）的各個(gè)方面都能盡可能靈活，并且確保每個(gè)像素不會(huì)在高分屏下模糊。

頁(yè)面的加載時(shí)間是每一個(gè)UI設(shè)計(jì)師都擔(dān)心的數(shù)據(jù)，或者至少是每個(gè)界面設(shè)計(jì)師都應(yīng)該擔(dān)心的問(wèn)題。圖片的大小肯定是一個(gè)需要留意的問(wèn)題。這就是藍(lán)藍(lán)設(shè)計(jì)為什么在這里寫了幾個(gè)有助于優(yōu)化頁(yè)面中的圖片的小技巧，這些小技巧將有助于大家解決這個(gè)問(wèn)題，這些小技巧也可以在你需要優(yōu)化圖片的時(shí)候提供很多幫助。對(duì)你的網(wǎng)站設(shè)計(jì)有所幫助！

TinyPNG
TinyPNG是使用智能有損壓縮技術(shù)，來(lái)減小png圖片的大小。

的品牌在大型的企業(yè)集團(tuán)公司中價(jià)值數(shù)十億美元。每個(gè)公司都應(yīng)該努力創(chuàng)造一個(gè)品牌。由于建立網(wǎng)站通常是建立品牌的第一步，這里有幾種方法可以使你的網(wǎng)站給你的品牌增加價(jià)值。

簡(jiǎn)潔幾乎總會(huì)出現(xiàn)在成功的故事中：這就是我們?nèi)祟惖臉幼印Ｎ覀兛赡軙?huì)覺得有一些復(fù)雜，簡(jiǎn)單可以緩和一些事情。也是一種把事情完成的方式。嘗試一些復(fù)雜的事情會(huì)降低你的成功率。保持你的網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)單。如果你是一個(gè)小企業(yè)，那么你只需要一對(duì)夫婦的做的網(wǎng)頁(yè)和博客（也可能是精心布置店面）。你不會(huì)需要大量的內(nèi)容。你當(dāng)然不需要閃光燈。你會(huì)得到你想要的，不是嗎？下面藍(lán)藍(lán)設(shè)計(jì)和朋友們分享一下如何給你的網(wǎng)站設(shè)計(jì)增加品牌價(jià)值的方法，希望對(duì)大家的網(wǎng)站界面設(shè)計(jì)有所幫助！

網(wǎng)站是為別人而做，不是為了你

在過(guò)去十年中高品質(zhì)的網(wǎng)頁(yè)可用性一直是業(yè)內(nèi)討論的核心，因?yàn)樗鼘?duì)用戶來(lái)說(shuō)越來(lái)越重要。好的可用性也可以幫助建立品牌知名度，從而提升用戶對(duì)一個(gè)網(wǎng)站設(shè)計(jì)或者是一家公司的評(píng)價(jià)。今天人們依然高度關(guān)注可用性，是因?yàn)榇蟠笮⌒〉墓疽呀?jīng)證明了好的可用性策略是多么重要。

在過(guò)去幾年中，良好的可用性成為那些成功的初創(chuàng)公司的核心。多數(shù)情況下，簡(jiǎn)單的想法最具創(chuàng)造性，可用性主要是指：使一個(gè)功能或者產(chǎn)品易于使用，但同時(shí)也要保持產(chǎn)品質(zhì)量維持在高水平上。

如今，很多文章會(huì)談到普遍意義。在對(duì)該話題年復(fù)一年的討論之后，似乎UI設(shè)計(jì)者們?nèi)匀缓茈y去理解它。可用性早已不再是一個(gè)玩笑，下面藍(lán)藍(lán)設(shè)計(jì)這些建議應(yīng)當(dāng)被打印出來(lái)并粘到你桌子對(duì)面的墻上。

鏈接的顏色

我經(jīng)常發(fā)現(xiàn)自己在瀏覽網(wǎng)頁(yè)時(shí)，有些頁(yè)面上的鏈接沒(méi)有以某種形式高亮顯示。這是我見過(guò)的最愚蠢的錯(cuò)誤。我愿意訪問(wèn)那些鏈接使用默認(rèn)藍(lán)色的頁(yè)面，而不是鏈接和 普通文字一個(gè)顏色的頁(yè)面。用戶需要知道如何在頁(yè)面之間導(dǎo)航、在哪兒能點(diǎn)擊鏈接。你不能指望他們把鼠標(biāo)一行行的掠過(guò)所有文字去找鏈接，直到發(fā)現(xiàn)鼠標(biāo)箭頭變成 “小手兒”。

你有沒(méi)有經(jīng)歷過(guò)看到一個(gè)頁(yè)面的時(shí)候馬上就被它的界面設(shè)計(jì)吸引并且留下了深刻的印象呢？然后你進(jìn)一步細(xì)看這個(gè)頁(yè)面發(fā)現(xiàn)真正使這個(gè)頁(yè)面變得神奇的是一些小細(xì)節(jié)，在藍(lán)藍(lán)設(shè)計(jì)這篇文章中我們將看到幾種把細(xì)節(jié)設(shè)計(jì)做到完美的頁(yè)面。

完美的像素線

Image Spark 的UI設(shè)計(jì)師用一個(gè)像素的線條來(lái)分割頂部導(dǎo)航，搜索輸入框，導(dǎo)航底欄。任何時(shí)候一個(gè)較淺的顏色緊挨著一個(gè)較深的顏色會(huì)使人出現(xiàn)有一個(gè)凸起的邊緣的錯(cuò)覺。請(qǐng)注意這種線條只能比背景色稍微淺一點(diǎn)點(diǎn)。如果使用一條白線那將失去這種效果。