本文作者M(jìn)ark Praschan是一位具有將近十年經(jīng)驗(yàn)的網(wǎng)頁設(shè)計(jì)師，Web開發(fā)師，Web項(xiàng)目經(jīng)理人。 文中強(qiáng)調(diào)復(fù)雜的高級效果能為設(shè)計(jì)增色不少，但如果用得不對，只會影響用戶對重點(diǎn)內(nèi)容的關(guān)注。高級效果可能正好是一項(xiàng)好的設(shè)計(jì)的沖擊力所在，但即便如此，也還是需要一些更簡單的效果與其配合。

　　簡單的效果和技巧是建造當(dāng)今設(shè)計(jì)的基石。比方說，如果你都不知道如何正確選擇顏色和文字效果，燦爛的 星光效果又能有什么用?

　　本著“少就是多”的理念，通過十個簡單好用的設(shè)計(jì)技巧 ，就足以大大提升你設(shè)計(jì)的專業(yè)性和感染力。基礎(chǔ)先行。 學(xué)會走之前要先學(xué)會爬，讓我們從最基礎(chǔ)的簡單有效設(shè)計(jì)的概念開始。

基礎(chǔ)先行。 學(xué)會走之前要先學(xué)會爬，讓我們從最基礎(chǔ)的簡單有效設(shè)計(jì)的概念開始。

1. 增加對比

很可惜，添加額外的對比是最被忽視和棄用的技巧之一。

Joost de Valk 采用了細(xì)的高對比度邊線，讓訪客能更容易區(qū)分頁面的不同區(qū)域。在上圖中放大了的部分，你可以看到，大多數(shù)時候這種對比只是一條1像素的高亮線挨著1像素的暗線。

話說回來，這個頁面上的“More”和“Go”按鈕與周圍的對比度太小，即使你刻意在找也很容易被忽略掉。

WordPress 為頁面中的鏈接 “Download(下載)” 使用了對比色。 這種紅色在冷灰色調(diào)的頁面中自己跳了出來。但這紅色在明度方面有所收斂，避免了影響頁面整體效果。

如果你對于該不該使用對比猶豫不決，就把這一決定過程當(dāng)做是化妝。你要做的不是讓人們大吼“看吶，對比色！”，你需要的是自然而然的吸引他們注意頁面中重要的內(nèi)容，高亮出已經(jīng)存在的重點(diǎn)。

2.漸變

技術(shù)的發(fā)展為所有想使用漸變的人提供了各種創(chuàng)造漸變的工具。但漸變真的很好么？

一個網(wǎng)站的管理員在管理網(wǎng)站和它的內(nèi)容上起著至關(guān)重要的作用，但是呢，如果他沒有選擇好一個網(wǎng)站系統(tǒng)的話，那可能就會是一個定時炸彈。一個網(wǎng)站能否茁壯成長，有一個優(yōu)秀的管理后臺那絕對是至關(guān)重要的。

擁有自己網(wǎng)站的童鞋們，這里有55個有商業(yè)版權(quán)的響應(yīng)式后臺管理模板，你可以從中選取參考。仔細(xì)預(yù)覽或通過界面來觀察它們的特點(diǎn)。
當(dāng)然，這些界面對設(shè)計(jì)師來講，特別是從事BS、CS界面設(shè)計(jì)的朋友，這些優(yōu)秀的后臺界面肯定能激發(fā)你的創(chuàng)作靈感！

Boo Admin

Visit Source

Amsterdam

hardwear：想必多數(shù)同學(xué)曾經(jīng)學(xué)習(xí)計(jì)算機(jī)就是從Word開始，其中一項(xiàng)重要的學(xué)習(xí)任務(wù)就是創(chuàng)建表格，如今在網(wǎng)絡(luò)頁面里表格隨處可見，尤其是商業(yè)產(chǎn)品里充滿了大量的數(shù)據(jù)，要沒有這些表格估計(jì)看內(nèi)容得吐血…… 表格形形色色，默默無聞的呈現(xiàn)著數(shù)據(jù)，閱讀起來如何最為順暢，如何才能從表格里發(fā)掘出重要信息，有哪些可以對表格進(jìn)行的操作，梳理一下以供參考。

在后臺界面，表格對數(shù)據(jù)的維護(hù)和體現(xiàn)是最常見的，那么也推薦您看看一組驚艷的后臺管理界面設(shè)計(jì)

1.行高是表格瀏覽時的重要參數(shù)

行高是表格非常重要的參數(shù)，行高間距直接影響著閱讀的體驗(yàn)，有如同Omniture為了最大限度的放置數(shù)據(jù)內(nèi)容，強(qiáng)化數(shù)據(jù)顯示效果而降低行高的情況，也有SugarCRM一樣的行高較高可以放置更多文本信息的表格。

很多設(shè)計(jì)師會采用一些生動可愛動物形象來設(shè)計(jì)一款logo，今天，小編為大家搜集了一些以動物為藍(lán)本的logo設(shè)計(jì)圖案，供大家學(xué)習(xí)鑒賞～～:)

推薦閱讀：
《還在為設(shè)計(jì)LOGO犯愁？來看看這10個LOGO資源站》
《佳作欣賞：以雞蛋為元素的LOGO設(shè)計(jì)》
《如何才是一個好的LOGO？》

iOS7采用了色彩新鮮的漸變效果，老實(shí)說，每個設(shè)計(jì)師都應(yīng)該掌握這種最簡單的裝飾技巧。而且漸變效果千變?nèi)f化，好的漸變效果能夠成就一款設(shè)計(jì)，而糟糕的漸變效果會毀了一款設(shè)計(jì)。漸變效果的好壞取決于“色彩調(diào)整”以及“整個主題的搭配度”。除此之外，漸變效果還可以根據(jù)“流行色”來進(jìn)行適度的調(diào)配。現(xiàn)在流行使用霓虹燈色彩般的漸變，讓人感覺光鮮可鑒，再加上纖細(xì)簡約的字體，線條簡練的圖標(biāo)，整個界面將變得非常極簡且高雅。

今天我們要探討的可不是漸變，要探討的是移動界面設(shè)計(jì)中的漸變。我們來一起學(xué)習(xí)、感受一下現(xiàn)今移動界面設(shè)計(jì)中最流行的漸變吧。

推薦閱讀：
《一枚app圖標(biāo)的設(shè)計(jì)文化》
《超贊！高大上的動效設(shè)計(jì)方法及流程總結(jié)》

一、漸變作為界面的背景

iOS7 Lockscreen by Michael Shanks
神秘、優(yōu)雅、頗具吸引力、簡單、只包含必要信息，半透明的解鎖條讓我們感受到細(xì)膩的質(zhì)感。

Sense by Tommy Borgen.

同樣大道至簡。整個漸變的色彩搭配很講究，中心略微模糊的圓圈中包含了清新的字體，流動的背景，純凈的像夢一般。

本帖收集了50套設(shè)計(jì)精美，并可設(shè)計(jì)師自行編輯的界面PSD源文件。內(nèi)容大致包含banner切換，MP3/視頻播放器，日歷，表單（登錄，注冊，搜索…），進(jìn)度條，提示框，按鈕，導(dǎo)航，面包屑等等…不管是應(yīng)用在小需求還是大項(xiàng)目，相信都可為你帶來幫助。

Simple UI Elements

Apple Styled UI Elements

Grayness UI Kit

一個干貨推薦啦：25個定價(jià)界面網(wǎng)頁欣賞！沒錯！你沒有看錯，足足25個哦！啊？你問我有木有酬勞，呃！藍(lán)藍(lán)設(shè)計(jì)說是要給，但我肯定不會要的，雖然很想要，呃，出來混，后來還是木有要。。。）

價(jià)格界面是網(wǎng)頁中常見的，但容易被忽視的一個部分。想想看，你什么時候見過這些界面呢？本工第一反應(yīng)就是迅雷、QQ之類的會員充值界面。這種不是經(jīng)常可以看見，但是又具有明確目的性的界面，如何讓它和主題頁面匹配、同時又突出重點(diǎn)信息呢？這是個問題！今天就讓我們欣賞25個外國網(wǎng)站的定價(jià)界面，從中學(xué)習(xí)經(jīng)驗(yàn)吧；）

1. Freshdesk

正確的背景風(fēng)格可以為整個網(wǎng)站確定基調(diào)。我們搜集了一批使用大幅圖像、明亮顏色或出眾圖案來作為背景的
優(yōu)秀網(wǎng)站，希望從中探尋當(dāng)下網(wǎng)站的流行設(shè)計(jì)風(fēng)格。

什么樣的背景最適合你的網(wǎng)站，這并沒有一定之規(guī)，但確實(shí)有一些共同的要素：
互聯(lián)網(wǎng)背景的內(nèi)容應(yīng)該有目的性。
背景應(yīng)該與你的品牌風(fēng)格一致。
背景之上的文字內(nèi)容應(yīng)該易于閱讀(無論是顏色、反差還是尺寸大小。) 背景的主題在整個網(wǎng)站內(nèi)應(yīng)該連貫一致。
背景應(yīng)該能很快下載并且不會讓你的網(wǎng)站變得緩慢甚至卡死。
現(xiàn)在的流行趨勢是什么？

就像服裝和發(fā)型會變，網(wǎng)頁設(shè)計(jì)的風(fēng)格也在變。對于背景來說，趨勢的變化尤其突出。
目前，大量的網(wǎng)站在首屏采用了大圖。一些背景是清晰、寫實(shí)的（如照片和插圖），而另一些則可能是抽象隱晦的。大尺寸的、虛化或模糊的圖也隨處可見。

藍(lán)藍(lán)設(shè)計(jì)：本教程主要使用Photoshop制作金屬質(zhì)感的工具型App圖標(biāo)，主要通過圖層樣式來完成，喜歡的朋友一起來學(xué)習(xí)吧。
1.首先我們來做下背景，這個背景我是先畫了個圓做了些效果(投影，內(nèi)陰影)定義成圖案。

2.用圓角矩形工具，畫部的漸變，在這一步我先畫個半徑為47的大圓角矩形，在用剪切畫個35的小圓角矩形，最后填充投影和漸變疊加。

經(jīng)常有新入職的同學(xué)，搞不清設(shè)計(jì)師和別的職位如產(chǎn)品經(jīng)理，在工作內(nèi)容上有什么區(qū)別。回答了幾次之后，我總結(jié)出兩方面的差別，簡單概括為：技能和定位。

“技能”指的是設(shè)計(jì)師掌握了項(xiàng)目中其他角色都不具備的能力——畫圖。這么概括有點(diǎn)簡單粗暴了，事實(shí)上設(shè)計(jì)師的專業(yè)能力遠(yuǎn)比畫圖兩字涵蓋的內(nèi)容要廣。但“畫圖”確實(shí)是更容易被所有人理解的說法（向家里長輩解釋我干什么的時候，他們?nèi)绻焕斫馕揖蜁f是畫圖的，他們就會貌似恍然大悟地哦一聲，終于聽到一個他們想要的能聽懂的答案了）。伴隨著人機(jī)界面從命令行到圖形可視化，再進(jìn)化到哪兒哪兒都可以摸的觸屏?xí)r代，用戶對于“美”和“交互”的要求越來越高，設(shè)計(jì)師的能力和價(jià)值也愈發(fā)受到重視。

設(shè)計(jì)師的“定位”，是隨著用戶體驗(yàn)受重視而發(fā)展起來的。互聯(lián)網(wǎng)產(chǎn)品有一個很重要的特點(diǎn)是免費(fèi)。聊天是免費(fèi)的，搜索是免費(fèi)的，游戲是免費(fèi)的，殺毒也是免費(fèi)的。免費(fèi)對用戶來說當(dāng)然是好事，但免費(fèi)也意味著用戶遷移的成本很低，特別是當(dāng)產(chǎn)品同質(zhì)化嚴(yán)重時。一款免費(fèi)游戲，如果突然宣布收費(fèi)，市場上又有同類游戲，結(jié)果很有可能是大規(guī)模的用戶流失。和傳統(tǒng)行業(yè)不同，在免費(fèi)的商業(yè)模式之下，用戶黏性、忠誠度對產(chǎn)品來說至關(guān)重要；而用戶體驗(yàn)就是構(gòu)成黏性的一個重要因素。于是伴隨著互聯(lián)網(wǎng)行業(yè)的蓬勃發(fā)展，用戶體驗(yàn)設(shè)計(jì)師，以用戶體驗(yàn)衛(wèi)道者的姿態(tài)站了出來。

這么說不代表別的角色不用對用戶體驗(yàn)負(fù)責(zé)。在一個優(yōu)秀的團(tuán)隊(duì)中，從項(xiàng)目經(jīng)理到開發(fā)測試，每個成員都會對最終的體驗(yàn)努力并負(fù)責(zé)。但設(shè)計(jì)師之外的其他角色會面臨屁股決定腦袋的困境。比如產(chǎn)品經(jīng)理除了用戶體驗(yàn)之外，還要兼顧商業(yè)價(jià)值和老板需求；開發(fā)要考慮實(shí)現(xiàn)成本和技術(shù)限制；運(yùn)營要負(fù)責(zé)營收和轉(zhuǎn)化率等。而設(shè)計(jì)師的定位更純粹，自身立場不存在矛盾和沖突：站在用戶立場，堅(jiān)持用戶體驗(yàn)的價(jià)值，時刻提醒團(tuán)隊(duì)用戶想要什么；同時負(fù)責(zé)設(shè)計(jì)細(xì)節(jié)的執(zhí)行。

這樣就引出正題了，一個項(xiàng)目團(tuán)隊(duì)中設(shè)計(jì)師和其他角色的矛盾沖突，本質(zhì)上就是這層定位差異帶來的。（開發(fā)：這里明明功能都實(shí)現(xiàn)好了，設(shè)計(jì)師你還老是要改來改去的，到底想搞哪樣！）基于這種定位沖突，設(shè)計(jì)師不能簡單地把自己定位在執(zhí)行層面上，還要通過積極主動的溝通，推動用戶體驗(yàn)的落地和實(shí)現(xiàn)。這就對互聯(lián)網(wǎng)設(shè)計(jì)師的溝通提出了很高的要求。

實(shí)際工作中，我們每天也花大量時間在開各種會，各種討論上。溝通的效率和效果都直接影響著最后產(chǎn)出的質(zhì)量。但在我們看最終的工作結(jié)果的時候，溝通作為過程反而不那么直觀，很難去評價(jià)和衡量。我試著列舉設(shè)計(jì)溝通中容易犯的一些錯誤，并總結(jié)了7條經(jīng)驗(yàn)，希望對同樣在思考這些問題的同學(xué)有些幫助。下文主要拿產(chǎn)品經(jīng)理和設(shè)計(jì)師之間的矛盾沖突來舉例。

1. 避免雞同鴨講

雙方都在說自己的道理，卻不聽對方是怎么講的；或者因?yàn)闇贤p方無法說出真實(shí)的想法，導(dǎo)致溝通停留在表面上無法深入。這兩種情況下，溝通效率都很低，而且很難達(dá)成共識得到結(jié)果。

比如我有一次看到，產(chǎn)品經(jīng)理在和設(shè)計(jì)師爭執(zhí)，一個在講運(yùn)營的事情，一個在講設(shè)計(jì)規(guī)范的事情，都在嘗試著告訴對方，從自己的專業(yè)角度來看，這個事情應(yīng)該怎么做。討論幾乎無法進(jìn)行下去，因?yàn)檎l也不肯讓步。這種溝通效率是很低的，雙方壓根就沒有站在同一個層面講問題，設(shè)計(jì)師不懂運(yùn)營，產(chǎn)品經(jīng)理不懂設(shè)計(jì)。