藍(lán)藍(lán)設(shè)計(jì)：隨著互聯(lián)網(wǎng)的高速發(fā)展，各種各樣的網(wǎng)站界面設(shè)計(jì)層出不窮。在這樣的環(huán)境下，用戶(hù)是如何在浩瀚的互聯(lián)網(wǎng)海洋中快速挑選網(wǎng)站設(shè)計(jì)的呢？網(wǎng)頁(yè)設(shè)計(jì)師又如何能讓自己的網(wǎng)站設(shè)計(jì)在用戶(hù)匆匆一瞥后就迅速吸引到他們進(jìn)一步注意的呢？本文作者向用戶(hù)介紹了一種簡(jiǎn)單的頁(yè)面布局方式——分割布局，這種布局方式試圖讓用戶(hù)初覽頁(yè)面時(shí)感受到一種友好的瀏覽體驗(yàn)。

作為網(wǎng)頁(yè)設(shè)計(jì)師，我們可以參考的ui設(shè)計(jì)范例和布局原則有很多，比如說(shuō)：柵格化、縱向一致性、F型布局、Z型布局、三分法則、黃金分割法等等。注重這些原則將會(huì)給你的設(shè)計(jì)帶來(lái)視覺(jué)吸引力和功能性——現(xiàn)在讓我們來(lái)看一種簡(jiǎn)單的方式，將頁(yè)面兩等分。

雖然在一開(kāi)始聽(tīng)起來(lái)有點(diǎn)傻，但是這種基本布局確實(shí)能起到非常好的效果。當(dāng)我們通覽一個(gè)頁(yè)面時(shí)，我們的視線常常會(huì)沿著一個(gè)“之”字形移動(dòng)。而如果用戶(hù)的視線是沿著一條水平線移動(dòng)時(shí)——就像在Z型布局里一樣，那么他/她就會(huì)很專(zhuān)注（或者說(shuō)嘗試著專(zhuān)注）。但由于初來(lái)你網(wǎng)站90%的用戶(hù)都不會(huì)很仔細(xì)的去關(guān)注你的頁(yè)面，因此讓你的設(shè)計(jì)“瀏覽起來(lái)友好”肯定會(huì)獲得不錯(cuò)回報(bào)哦！

所有網(wǎng)站設(shè)計(jì)，無(wú)論是官方、電子商務(wù)、社會(huì)化網(wǎng)絡(luò)還是個(gè)人站點(diǎn)，都應(yīng)該設(shè)計(jì)一個(gè)恰到好處的“關(guān)于”頁(yè)面，直截了當(dāng)?shù)馗嬖V到訪者，為什么要浪費(fèi)他們寶貴的時(shí)間瀏覽你的網(wǎng)站。

藍(lán)藍(lán)設(shè)計(jì)：這是一篇老文章，不過(guò)寫(xiě)得還算實(shí)用，大家可以了解一下界面設(shè)計(jì)思路

一、為什么要有“關(guān)于”頁(yè)面

不要讓用戶(hù)思考！

1、向?yàn)g覽者傳達(dá)本站的價(jià)值，留住用戶(hù)
2、始終提醒自己站點(diǎn)的主旨，不要跑題

二、起什么名

“關(guān)于”頁(yè)面存在的目的就是盡快讓瀏覽者找到網(wǎng)站的方向，或者作為進(jìn)一步補(bǔ)充，比如陳列相比競(jìng)爭(zhēng)對(duì)手而言，自己的優(yōu)勢(shì)和特色。所以名字越簡(jiǎn)單、越樸 素就越好。

典型的門(mén)戶(hù)的名字比較傳統(tǒng)，因?yàn)樗鼈儫o(wú)人不曉。比如網(wǎng)易的“公司簡(jiǎn)介”，谷歌的“Google大全”。

大眾、平易近人的網(wǎng)站往往都稱(chēng)呼為“關(guān)于我們”，比如嘀咕、phpChina；“關(guān)于+網(wǎng)站名稱(chēng)”的類(lèi)型也不在少數(shù)，比如豆瓣和支付寶。

個(gè)人站點(diǎn)比較簡(jiǎn)約，兩個(gè)字搞定：“關(guān)于”。人人網(wǎng)等很多社會(huì)化網(wǎng)絡(luò)站點(diǎn)也是如此。

多數(shù)國(guó)外站點(diǎn)同上，比如“about Flickr”、“about us”、“about”。

三、放在哪里

標(biāo)題、標(biāo)識(shí)、內(nèi)容或知名度非常強(qiáng)的網(wǎng)站放在頁(yè)腳。
這些類(lèi)型的網(wǎng)站要么你們熟知，要么一眼就能看出它講的是什么。比如新浪微博，淘寶。

小站點(diǎn)，比如個(gè)人站點(diǎn)、博客，或者全新的網(wǎng)站，有必要顯性地“通告”瀏覽者本站的導(dǎo)向和意圖（以期靠好奇心留住訪客），放在頁(yè)首。

PMCaff成立不久，導(dǎo)航干凈明晰。如圖01

對(duì)預(yù)算低的企業(yè)或者剛開(kāi)始有意建網(wǎng)站的同學(xué)，使用一個(gè)高質(zhì)量的網(wǎng)站設(shè)計(jì)模板能大大減少時(shí)間，讓珍貴的時(shí)間磨在刀刃上。今天藍(lán)藍(lán)設(shè)計(jì)一些專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)里收集了20款由專(zhuān)業(yè)ui設(shè)計(jì)師打造的高質(zhì)量網(wǎng)站界面設(shè)計(jì)模板，如果你正好需要，點(diǎn)進(jìn)那個(gè)優(yōu)雅的鏈接

Modus Versus

我們都想擁有很棒的網(wǎng)站的界面設(shè)計(jì)，想讓其他人在看到我們的網(wǎng)站時(shí)眼前一亮。 如果他們喜歡的話，還會(huì)再次點(diǎn)擊瀏覽或者分享給他的朋友們。這就是好網(wǎng)站的魅力所在！

我們不但要會(huì)運(yùn)用HTML5，CSS3和其他復(fù)雜的語(yǔ)言，也應(yīng)該會(huì)利用基礎(chǔ)技巧打造自己的網(wǎng)站。我敢說(shuō)很多網(wǎng)頁(yè)設(shè)計(jì)者或開(kāi)發(fā)者都難以解決CSS3語(yǔ)言無(wú)法在IE瀏覽器中像在其他瀏覽器一樣正常顯示的問(wèn)題。
這是個(gè)嚴(yán)肅的問(wèn)題。如果網(wǎng)頁(yè)無(wú)法顯示，那還有什么意義呢？誰(shuí)想要一直花時(shí)間解決錯(cuò)誤漏洞呢？如果你的客戶(hù)沒(méi)有一筆很大的預(yù)算，但你還是想做出很棒的網(wǎng)頁(yè)來(lái)，該怎么辦？

你要學(xué)會(huì)打造一個(gè)簡(jiǎn)單的網(wǎng)站，同時(shí)又能保證瀏覽量。這有很多可以實(shí)現(xiàn)的方法。藍(lán)藍(lán)設(shè)計(jì)以下的幾點(diǎn)都可以為建成基礎(chǔ)又美觀的網(wǎng)站助你一臂之力。

1. 巧用動(dòng)畫(huà)

作為一名設(shè)計(jì)師，每年都會(huì)沉浸在一些新的設(shè)計(jì)趨勢(shì)中興奮不已。接下來(lái)，藍(lán)藍(lán)設(shè)計(jì)將探尋2014年的界面設(shè)計(jì)趨勢(shì)，這絕對(duì)是意義非凡的事情。Web設(shè)計(jì)師必須洞悉所有相關(guān)領(lǐng)域的新趨勢(shì)，緊跟時(shí)尚潮流。

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

這次，我想探索一下那些逐漸發(fā)展起來(lái)的設(shè)計(jì)潮流。也許過(guò)去我們只是偶爾嘗試一下這些設(shè)計(jì)風(fēng)格，但是今年我們會(huì)真正關(guān)注它們。

更多留白/負(fù)空間

藍(lán)藍(lán)設(shè)計(jì)是從職場(chǎng)方面分享一些展示設(shè)計(jì)方案的經(jīng)驗(yàn)，如何使甲方看懂你的界面設(shè)計(jì)也是門(mén)學(xué)問(wèn)，如果你是ui設(shè)計(jì)新手，也可以在《PS新手教程：變換角度！讓你的設(shè)計(jì)稿更上檔次》學(xué)到好東西。

像一個(gè)常勝將軍一樣信心十足的展示你的線框圖

在我兼職制作 UXPin（用戶(hù)體驗(yàn)設(shè)計(jì)平臺(tái)）之前我一直都是全職做著 UX Designer和UX Manager。興奮的創(chuàng)作過(guò)程和臭名昭著的壓力交錯(cuò)在我的生活里，而且讓人感覺(jué)最殘酷的事情就是被拒絕的感覺(jué)。

產(chǎn)品設(shè)計(jì)的原則有點(diǎn)太泛哈，藍(lán)藍(lán)設(shè)計(jì)這里想結(jié)合自己的工作心得來(lái)小結(jié)一下手機(jī)無(wú)線設(shè)計(jì)8原則：

原則1：用戶(hù)界面應(yīng)該是基于用戶(hù)的心里模型，而不是基于工程實(shí)現(xiàn)模型

就是把后臺(tái)本來(lái)很復(fù)雜的事情通過(guò)設(shè)計(jì)符合用戶(hù)日常生活中常用的瀏覽方式或操作方式。其實(shí)這一點(diǎn)是設(shè)計(jì)師把生活中的細(xì)節(jié)和數(shù)據(jù)結(jié)合的凝聚點(diǎn)，用戶(hù)的心理模型抓的越準(zhǔn)，界面就會(huì)越優(yōu)秀。

#左邊界面#：大眾點(diǎn)評(píng)新版的價(jià)格的搜索就比之前改得更符合用戶(hù)心里模型；

排版的基本功大家掌握多少呢，那么今天藍(lán)藍(lán)設(shè)計(jì)就和朋友們分享一下收集到的排版的10個(gè)基本功，希望對(duì)朋友們的ui設(shè)計(jì)有所幫助！

1、多花些時(shí)間

挑選合適的字體需要花費(fèi)大量時(shí)間。但是不要一遍又一遍地讓自己陷入對(duì)同一類(lèi)型的字體挑選中。因?yàn)槿藗兺?xí)慣于從自己熟悉的字體或者偏愛(ài)的字體開(kāi)始。多花些時(shí)間去發(fā)現(xiàn)探索新的類(lèi)型，這樣你才能慢慢地發(fā)現(xiàn)自己對(duì)一種字體的細(xì)微差別的敏銳度，真正地讓字體自己告訴你合適不合適。

2、不要使用過(guò)多的字體

如果你的一個(gè)頁(yè)面里有十種不同的字體，那么你的排版一定會(huì)很難看。控制自己使用越少的字體，將會(huì)讓你的頁(yè)面脫穎而出。同時(shí)你也可以在字體的大小、重量和其它方面創(chuàng)造更多的對(duì)比變化。

3、不要盲目趕潮流

一、門(mén)票：大門(mén)票產(chǎn)生大印象

讀者特利發(fā)給我們一張他設(shè)計(jì)的洗車(chē)券，這張洗車(chē)券是他希望為他兒子的游泳隊(duì)籌集在游泳池訓(xùn)練的各種費(fèi)用而舉行的一次洗車(chē)籌款，而它的有趣之處就在于其尺寸相當(dāng)搶眼：

沒(méi)有人會(huì)對(duì)它視而不見(jiàn)：這張洗車(chē)券是一般門(mén)票尺寸的兩倍之大，界面設(shè)計(jì)起來(lái)也很容易，從視覺(jué)上也非常能吸引有興趣的消費(fèi)者。大圖片及大標(biāo)題使這張洗車(chē)券產(chǎn)生一張海報(bào)的視覺(jué)效果，效果當(dāng)然不錯(cuò)。

PS是ui設(shè)計(jì)領(lǐng)域最著名的軟件之一，是修圖、美顏的神器不二神器。作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師，我早在學(xué)校里就學(xué)過(guò)PS，制作過(guò)許多網(wǎng)站設(shè)計(jì)、界面設(shè)計(jì)案例，不過(guò)我已經(jīng)畢業(yè)兩年了…歲月如刀，刀刀催人老啊…現(xiàn)今的PS不斷進(jìn)化，衍生出了很多新的功能，而我呢，也跟著PS一同成長(zhǎng)，學(xué)到了不少新知識(shí)~ 那么朋友們和藍(lán)藍(lán)設(shè)計(jì)一起學(xué)習(xí)這8個(gè)不簡(jiǎn)單的PS小技巧吧！