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

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

經(jīng)常有新入職的同學(xué)，搞不清設(shè)計(jì)師和別的職位如產(chǎn)品經(jīng)理，在工作內(nèi)容上有什么區(qū)別?；卮鹆藥状沃螅铱偨Y(jié)出兩方面的差別，簡(jiǎn)單概括為：技能和定位。

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

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

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

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

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

1. 避免雞同鴨講

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

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

譯者序

本文圍繞勸導(dǎo)式設(shè)計(jì)(persuasive design)而展開，介紹了移動(dòng)終端上banner廣告、push信息等典型的勸服失敗案例，并從用戶與移動(dòng)設(shè)備之間的情感聯(lián)系出發(fā)，探討了移動(dòng)勸導(dǎo)策略的幾個(gè)切入點(diǎn)。所謂勸導(dǎo)式設(shè)計(jì)，是指通過說服和社會(huì)影響，而非通過強(qiáng)制的方式，以達(dá)到改變和引導(dǎo)用戶態(tài)度或行為的技術(shù)。這種技術(shù)常被應(yīng)用于銷售、外交、政治、宗教、軍事訓(xùn)練、公共衛(wèi)生和管理等領(lǐng)域。近年來，大多數(shù)勸導(dǎo)式技術(shù)的研究主要集中在計(jì)算機(jī)交互領(lǐng)域，包括臺(tái)式電腦、互聯(lián)網(wǎng)服務(wù)、視屏游戲和移動(dòng)設(shè)備。勸導(dǎo)技術(shù)可以看成是對(duì)用戶意圖的設(shè)計(jì)。

作者： Amber Krishan 譯者：曉千 秦封
譯文

【Tips：消費(fèi)者不會(huì)僅僅因?yàn)閷?dǎo)航很容易而為你的產(chǎn)品買單。】

為移動(dòng)設(shè)備而設(shè)計(jì)時(shí),設(shè)計(jì)師要考慮移動(dòng)設(shè)備間的差異，努力提供統(tǒng)一的體驗(yàn)。他們致力于減少點(diǎn)擊的次數(shù)，使架構(gòu)更扁平；并根據(jù)觸摸屏的特點(diǎn)而設(shè)計(jì), 在較小屏上規(guī)劃合理的布局等。這些重點(diǎn)都在通過方便的使用、流暢的導(dǎo)航和簡(jiǎn)潔的呈現(xiàn)，來確保的最佳的產(chǎn)品可用性。

為確保你的用戶“可以做”你想讓他們做的事情，較高的可用性是一個(gè)很好的開始。但它并不能保證用戶“會(huì)來做”這些事情。因?yàn)椋脩舨粫?huì)僅僅因?yàn)閷?dǎo)航容易使用而來買你的產(chǎn)品。

消費(fèi)者是否來買你的產(chǎn)品，這和科學(xué)的勸導(dǎo)式設(shè)計(jì)策略相關(guān)。通過“人——機(jī)” 互動(dòng)的研究我們了解到，計(jì)算機(jī)設(shè)備本身具備巨大的“勸導(dǎo)”潛力。如果在設(shè)備的體驗(yàn)設(shè)計(jì)中注入激勵(lì)機(jī)制，這些設(shè)備將激勵(lì)我們的用戶并驅(qū)動(dòng)他們的想法。

能找到合適的技巧來勸導(dǎo)你的用戶是一個(gè)巨大的挑戰(zhàn)。這涉及到深入理解用戶的動(dòng)機(jī)、障礙、信任和感受。上述這些對(duì)人的深入理解可以讓我們更系統(tǒng)的去了解人們?nèi)绾问褂靡苿?dòng)設(shè)備，這樣，我們就可以找到更有力的方法來勸導(dǎo)用戶。

典型的“勸導(dǎo)”失敗案例

你的產(chǎn)品能夠有效地勸導(dǎo)用戶來使用嗎？嗯，讓我們看一些普通公司通常會(huì)使用的典型手段。

banner廣告

自從蘋果iOS系統(tǒng)推出后，擬物化圖標(biāo)設(shè)計(jì)逐漸風(fēng)靡全球（好吧！讓我們暫時(shí)別提iOS7的扁平風(fēng)），隨著技術(shù)發(fā)展，設(shè)計(jì)師們也越來越厲害，圖標(biāo)做得愈加精致。如果你是一個(gè)移動(dòng)界面設(shè)計(jì)師，或者你對(duì)圖標(biāo)設(shè)計(jì)感興趣，那就千萬不要錯(cuò)過接下來的這50枚精致圖標(biāo)！希望它們能給你帶來創(chuàng)意與靈感。

多嘗試，多練習(xí)，多模仿，你也可以的！
PS+AI制作精致可愛的毛線風(fēng)格圖標(biāo)
在PHOTOSHOP中創(chuàng)建精細(xì)的工具圖標(biāo)

Minion App Icon by CreativeDash

iOS Icon by Eugene Zolotco

今天要分享出來的網(wǎng)站就像水滸傳里的108個(gè)好漢一樣，個(gè)個(gè)身懷絕技，是滴！我們也做了簡(jiǎn)單的介紹，因?yàn)榫W(wǎng)站太多，就木有一一截圖，大家自行感受一下。（有幾個(gè)需翻墻）

這里列出了許多鮮為人知的好網(wǎng)站，還有那些大家知道卻常常被遺忘的網(wǎng)站。
這些網(wǎng)站中，大部分都在某一個(gè)領(lǐng)域非常專業(yè)，并且都擁有非常簡(jiǎn)單的網(wǎng)址，你可以省略搜索的步驟，輕松將他們記在心里。

01. screenr.com —— 將你在電腦上的操作錄制成影片并直接傳送到Y(jié)ouTube上。

02. bounceapp.com —— 能夠?qū)⒁粋€(gè)網(wǎng)頁進(jìn)行完整的截圖。

03. goo.gl —— 將網(wǎng)站地址進(jìn)行縮寫并可以將網(wǎng)址轉(zhuǎn)換成二維碼。

04. untiny.me —— 找到縮寫網(wǎng)址的原始域名。

05. localti.me —— 能查詢不只一個(gè)城市的當(dāng)?shù)貢r(shí)間。

06. copypastecharacter.com —— 復(fù)制你鍵盤上沒有的特殊字符。

07. topsy.com —— Twitter專用搜索引擎。

08. fb.me/AppStore —— 無需運(yùn)行iTunes就可以搜索iOS的手機(jī)應(yīng)用。

09. iconfinder.com ——在這里可以找到圖標(biāo)的所有尺寸。

10. office.com —— 下載辦公文件的模板、剪貼畫以及圖片。

11. woorank.com —— 你想知道的關(guān)于一個(gè)網(wǎng)站的所有信息都可以在這里找到。

12. virustotal.com —— 對(duì)任何可疑的文件或者郵件附件進(jìn)行病毒掃描。

13. wolframalpha.com —— 不用搜索就可以知道問題的答案 —— 更多信息，請(qǐng)閱讀Wolfram提示。

14. printwhatyoulike.com —— 完整的打印網(wǎng)頁。

15. joliprint.com —— 將新聞和博客內(nèi)容重新整合為報(bào)紙。

16. isnsfw.com —— 當(dāng)你想要分享18X網(wǎng)頁時(shí)為你做警示標(biāo)記。

17. e.ggtimer.com —— 一個(gè)居家常備的簡(jiǎn)易在線計(jì)時(shí)器。

18. coralcdn.org —— 如果某網(wǎng)站由于服務(wù)器太繁忙而無法訪問的話，試試通過CDN來進(jìn)入網(wǎng)站吧。

19. random.org —— 幫你隨機(jī)挑選數(shù)字，拋硬幣～

20. mywot.com —— 測(cè)試任意網(wǎng)站的可信任指數(shù)。

21. viewer.zoho.com —— 幫你用瀏覽器來預(yù)覽PDF文件和PPT。

22. tubemogul.com —— 能同時(shí)向多個(gè)視頻網(wǎng)站上傳視頻。

23. truveo.com —— 最佳網(wǎng)絡(luò)視頻搜索。

24. scr.im —— 不用擔(dān)心垃圾郵件困擾，安全無憂地分享你的郵件地址。

25. spypig.com —— 從今往后在你的郵箱里查看收據(jù)吧～

26. sizeasy.com —— 將任一產(chǎn)品進(jìn)行視覺化并進(jìn)行尺寸比較。

27. whatfontis.com —— 迅速通過圖片來確定字體名稱。

28. fontsquirrel.com —— 優(yōu)質(zhì)的字體大集合 —— 免費(fèi)自用與商用。

產(chǎn)品經(jīng)理和設(shè)計(jì)師之間最常見也是最尖銳的矛盾就是，設(shè)計(jì)師把花了很多心血做出來的稿子放到產(chǎn)品經(jīng)理面前，產(chǎn)品看了一下，覺得非常陌生和超出預(yù)期，說：“這都是些什么啊”。

(- -#)，(- -’)，此處無聲勝有聲。倒不是說這里面誰對(duì)誰錯(cuò)，都挺辛苦的其實(shí)，但為什么總會(huì)落得如此尷尬呢。

世上配合最好的其實(shí)就是自己的手配合自己的腦袋。腦袋怎么想，手就怎么畫，畫出來的丁老頭再丑也覺得很親切，恩恩，是我的好作品（星星眼）。只是等到兩個(gè)人合作的時(shí)候，就有些麻煩了。因?yàn)椋尅?span id="iiiii8i" class="wp_keywordlink_affiliate">設(shè)計(jì)師的手”精致地受控于“產(chǎn)品經(jīng)理的腦袋”，每次畫完看一看，覺得對(duì)就繼續(xù)畫、錯(cuò)就改的敏捷調(diào)控是不現(xiàn)實(shí)的。

禍起，在于一些溝通中有很多弊端，唯有解決這些問題，才能讓團(tuán)隊(duì)和諧地高唱“同一個(gè)夢(mèng)想”。

一、產(chǎn)品沒有意識(shí)到要講的其實(shí)是故事

常見的產(chǎn)品經(jīng)理提需求的方式往往都是在需求文檔里直接寫“在Feed上增加一個(gè)轉(zhuǎn)載按鈕，點(diǎn)擊后可以填寫轉(zhuǎn)載理由”。這種描述方式其實(shí)已經(jīng)是一個(gè)很具象的解決方案了。然后這份包含數(shù)十條如此描述需求的文檔會(huì)被貼到內(nèi)部需求管理網(wǎng)站上，或者通過郵件發(fā)給設(shè)計(jì)師。

設(shè)計(jì)師拿到這份文檔，通常會(huì)覺得很憋屈。哎，忍忍算了，拿人錢財(cái)替人消災(zāi)。然后拿著這份需求文檔在現(xiàn)有界面上去改。但往往會(huì)發(fā)現(xiàn)產(chǎn)品說這些具體解決方案其實(shí)在實(shí)現(xiàn)時(shí)是有很多細(xì)節(jié)沖突的。于是，設(shè)計(jì)師要先逆向YY出這個(gè)功能背后的用戶需求，然后再嘗試在與各種細(xì)節(jié)不沖突的夾縫中找一個(gè)新的解決方案。把這個(gè)稿子拿給產(chǎn)品看，產(chǎn)品就會(huì)楞一下，說“這是什么…”。(- -#)，(- -’)

@南辰_designer  平面設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)是兩個(gè)截然不同的領(lǐng)域，這兩個(gè)領(lǐng)域有不同的設(shè)計(jì)需求、設(shè)計(jì)實(shí)踐和設(shè)計(jì)方法。

例如，在網(wǎng)頁設(shè)計(jì)中更常使用基于像素或柵格的文件格式，諸如JPG、GIF或PNG。相反，在平面設(shè)計(jì)領(lǐng)域像logo這樣的圖形可能會(huì)用到不同尺寸，因此使用最多的格式則是EPS和AI這樣的矢量格式。然而，用于網(wǎng)頁的矢量格式，如SVG或HTML5 Canvas則不能廣泛應(yīng)用，也不會(huì)被所有瀏覽器所支持。

另外，用于web端的圖形有基于它們自身的相關(guān)處理方式。其中一條便是你要時(shí)刻注意文件的大小，因?yàn)槟阈枰鼓愕木W(wǎng)頁加載越快越好。作為一名網(wǎng)頁設(shè)計(jì)師，你應(yīng)當(dāng)盡量減少HTTP對(duì)圖像的請(qǐng)求次數(shù)——無論通過減少圖片的使用數(shù)量還是將它們整合成CSS sprite——以及確保你選擇了正確的圖像格式，使其在圖像大小和質(zhì)量間得以平衡。

Photoshop是平面設(shè)計(jì)師和網(wǎng)頁設(shè)計(jì)師使用的行業(yè)標(biāo)準(zhǔn)工具。以下是你在創(chuàng)建web端使用圖像時(shí)的一些簡(jiǎn)單的小技巧。

1. 將圖片保存成Web所用格式

在網(wǎng)頁設(shè)計(jì)中，你必須確保你的圖像大小越小越好。當(dāng)然，當(dāng)你想要圖片完好顯示時(shí)可以拋棄這條原則。
在Photoshop中創(chuàng)建圖像的完美方法便是平衡質(zhì)量與文件大小。
網(wǎng)頁設(shè)計(jì)師經(jīng)常犯的一個(gè)錯(cuò)誤便是使用“另存為”命令，而不是使用“存儲(chǔ)為Web所用格式”。

“存儲(chǔ)為Web所用格式”可以將圖像保存成基于網(wǎng)頁設(shè)計(jì)優(yōu)化過的格式，包括圖像質(zhì)量、圖像分辨率、瀏覽器兼容性和文件大小。

這一命令會(huì)有一個(gè)對(duì)話框，你可以用來微調(diào)你的圖像。當(dāng)你調(diào)整圖像的設(shè)置時(shí)，它會(huì)顯示出文件的大小和圖像的質(zhì)量。

在這篇文章中，我們展示的是一組免費(fèi)漂亮的UI設(shè)計(jì)素材套件。這些線框圖和 UI設(shè)計(jì)工具包讓設(shè)計(jì)師在設(shè)計(jì)用戶界面原型的時(shí)候能夠非常便利，希望這個(gè)集合會(huì)幫助到你的 UI 設(shè)計(jì)項(xiàng)目。

優(yōu)設(shè)11月超贊資源：
50套萬里挑一的設(shè)計(jì)師專屬精華資源包
超實(shí)用的PHOTOSHOP亮度調(diào)節(jié)腳本

UI Kit

iPhone UI

有時(shí)候一個(gè)紋理，一個(gè)文字，一張背景圖，一個(gè)顏色體系，甚至一個(gè)小圖標(biāo)，都能讓頁面有復(fù)古的感覺。在這篇文章中，我們收集了許多這種風(fēng)格的頁面。如果你的下一個(gè)項(xiàng)目是需要設(shè)計(jì)出復(fù)古的感覺的話，那這篇文章可以啟發(fā)你很多的設(shè)計(jì)靈感。

相關(guān)閱讀：

復(fù)古背景下載 →漂亮的復(fù)古紋理背景素材下載
復(fù)古字體下載 → 25套復(fù)古懷舊字體打包下載
復(fù)古網(wǎng)頁欣賞 → 44個(gè)絕贊的復(fù)古風(fēng)格網(wǎng)頁設(shè)計(jì)

Cyclemon

Ready to Inspire

本文作者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ù)雜的高級(jí)效果能為設(shè)計(jì)增色不少，但如果用得不對(duì)，只會(huì)影響用戶對(duì)重點(diǎn)內(nèi)容的關(guān)注。高級(jí)效果可能正好是一項(xiàng)好的設(shè)計(jì)的沖擊力所在，但即便如此，也還是需要一些更簡(jiǎn)單的效果與其配合。

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

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

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

1. 增加對(duì)比

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

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

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