我是一個(gè)程序員，不是設(shè)計(jì)師。我沒有受過設(shè)計(jì)師的訓(xùn)練。我也沒有讀過關(guān)于設(shè)計(jì)的書籍。盡管如此，在數(shù)年的開發(fā)過程中，我學(xué)會(huì)了讓自己的網(wǎng)站和應(yīng)用看起來很專業(yè)。

　　下邊是我認(rèn)為一個(gè)技術(shù)背景的人要變得擅長(zhǎng)設(shè)計(jì)需要留意的東西：

　開發(fā)你的美感

　　… 我最喜歡的站點(diǎn)是：

　多花些時(shí)間

　　我在開發(fā)應(yīng)用和網(wǎng)站時(shí)，會(huì)在設(shè)計(jì)上花掉和編碼同樣的時(shí)間。好的設(shè)計(jì)需要時(shí)間來完善。

　　在開始項(xiàng)目時(shí)，我一般對(duì)于整體布局有基本的想法。當(dāng)我有想法的時(shí)候，我同時(shí)進(jìn)行設(shè)計(jì)和編程。我會(huì)在開發(fā)細(xì)節(jié)功能的同時(shí)在瀏覽器里邊設(shè)計(jì)那些細(xì)節(jié)。這可能不是最有效率的，但這樣可以讓我在工作時(shí)對(duì)項(xiàng)目進(jìn)行上千次的小迭代。

　偷

創(chuàng)造的秘密就是知道如何藏好信息來源 – 愛因斯坦

好的藝術(shù)家抄，偉大的藝術(shù)家偷。- Pablo Picasso

　　這不是什么新建議，但是可能是這些技巧中最重要的。當(dāng)你剛開始的時(shí)候，你沒有技能創(chuàng)造出有吸引力的設(shè)計(jì)。這就意味著你需要模仿知名的設(shè)計(jì)師，或者讓你深受他們作品的影響。

　　下邊是我的步驟：我會(huì)搜索那些和我的基本想法類似的，但是設(shè)計(jì)得很好的web應(yīng)用。我會(huì)找出那些我認(rèn)為會(huì)在我的app中有用的元素，然后在我的app中重新創(chuàng)造它。不要直接copy html或者css，那樣學(xué)不到任何東西。只學(xué)習(xí)視覺，然后用自己的代碼實(shí)現(xiàn)。當(dāng)你慢慢有經(jīng)驗(yàn)了，就可以開始創(chuàng)造自己的東西了。

　忘了PhotoShop

　　如果你和我一樣不知道怎么用PS，用你的代碼直接在瀏覽器里邊設(shè)計(jì)吧。我只用PS調(diào)整圖標(biāo)以及給app截圖。（ Easy注：最近Sketch挺火的，很多設(shè)計(jì)師已經(jīng)從PS完全轉(zhuǎn)向Sketch了。

　精通CSS

css

　　直接在瀏覽器中設(shè)計(jì)需要精通CSS?！?下邊是一些資源：

　前端框架是你的好朋友

zurb-foundation

 

　　從無到有的創(chuàng)建一個(gè)網(wǎng)站或者app是很難的，尤其對(duì)于新手。所以現(xiàn)在我使用前端框架。最有名的是的Foundation和Bootstrap，也有很多其他備選。

　圖標(biāo)意外的重要

icons

　　我用了很長(zhǎng)時(shí)間才認(rèn)識(shí)到圖標(biāo)對(duì)于一個(gè)好的設(shè)計(jì)來說有多么重要，這并不那么顯而易見。圖標(biāo)改善了導(dǎo)航，添加了色彩，傳情達(dá)意。圖標(biāo)不一定能讓設(shè)計(jì)NB，但一堆爛圖標(biāo)一定會(huì)讓你的設(shè)計(jì)SB。

　　根據(jù)項(xiàng)目的不同我使用icon fonts或者svg icons。icon fonts非常好用，尤其是你在瀏覽器里邊設(shè)計(jì)的時(shí)候。icon fonts讓你很容易給一個(gè)元素添加圖標(biāo)，你只需要加個(gè)class就好了。

　　icon fonts大法好的另一個(gè)原因是你可以像改變字體大小一樣改變這些圖標(biāo)的大小。換顏色也一樣。

　　下邊是我喜歡的一些icon資源

　迭代，非常重要

　　嘗試和失敗是非常有價(jià)值的工具。很多嘗試看起來不爽，和你的設(shè)計(jì)不搭。但是沒有關(guān)系，每次失敗時(shí)回滾到上一步再繼續(xù)。在我確定Duet的設(shè)計(jì)之前我迭代過上千次。

　關(guān)注可用性和易用性

　　好的設(shè)計(jì)不止是app看起來如何。它還涉及了app的功能好不好，用起來容易不容易。即使不用專業(yè)培訓(xùn)，一點(diǎn)小常識(shí)就能讓你在構(gòu)建可用的app上受益匪淺。

　　你只需要中一件事就可以確保app的可用性—— 保證你真的在用你開發(fā)的app。經(jīng)常用。如果有東西讓你覺得小不爽，修理它。相信你的自覺。如果一個(gè)流程不清晰或者太復(fù)雜，你能直觀的感受到。是不是步驟太多？是不是某個(gè)功能難以找到？是不是常用功能用起來要點(diǎn)太多次？或者是不是你有時(shí)候都會(huì)忘掉一些功能在哪里？不管可用性問題在哪兒，只要你一直用你的app，我相信你能發(fā)現(xiàn)它的，然后你會(huì)修好它。

　　顯然這個(gè)流程是不完美的，你代表不了其他的每一個(gè)用戶使用它的方式，但我的經(jīng)驗(yàn)是絕大部分問題通過這個(gè)方式可以找出來?！?

　排版比你想象的重要

type

　　Easy：由于此段內(nèi)容都是英文排版相關(guān)，直接跳過。補(bǔ)充兩個(gè)中文排版開源項(xiàng)目：

　選擇正確的圖片和圖庫(kù)

　　… 幾個(gè)高質(zhì)量的免費(fèi)圖庫(kù)

　重視反饋

　　無法否認(rèn)我在這個(gè)方面做得很差，但我認(rèn)識(shí)到了反饋的重要性。我做的大部分東西在發(fā)布之前沒有得到反饋。為了在測(cè)試階段獲得反饋，我開始關(guān)注這些資源：

　最后一招

　　如果你不知道如何去做——簡(jiǎn)單總是好的。大量留白、更輕微的陰影之類。變得擅長(zhǎng)設(shè)計(jì)是一個(gè)漫長(zhǎng)的過程，會(huì)花掉你很多時(shí)間。也許不是你喜歡的方式，但一旦你掌握了它，你會(huì)有明顯的提升。

　　原文： duetapp

　　哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。