我是一個程序員,不是設(shè)計師。我沒有受過設(shè)計師的訓練。我也沒有讀過關(guān)于設(shè)計的書籍。盡管如此,在數(shù)年的開發(fā)過程中,我學會了讓自己的網(wǎng)站和應(yīng)用看起來很專業(yè)。
下邊是我認為一個技術(shù)背景的人要變得擅長設(shè)計需要留意的東西:
開發(fā)你的美感
… 我最喜歡的站點是:
- awwwards.com– 多看每日和每月上榜站點
- unmatchedstyle.com – 評論很有用
- dribbble.com ( Easy注:我經(jīng)常去,很多NB的app設(shè)計都在上邊
- patterntap.com
多花些時間
我在開發(fā)應(yīng)用和網(wǎng)站時,會在設(shè)計上花掉和編碼同樣的時間。好的設(shè)計需要時間來完善。
在開始項目時,我一般對于整體布局有基本的想法。當我有想法的時候,我同時進行設(shè)計和編程。我會在開發(fā)細節(jié)功能的同時在瀏覽器里邊設(shè)計那些細節(jié)。這可能不是最有效率的,但這樣可以讓我在工作時對項目進行上千次的小迭代。
偷
創(chuàng)造的秘密就是知道如何藏好信息來源 – 愛因斯坦
好的藝術(shù)家抄,偉大的藝術(shù)家偷。- Pablo Picasso
這不是什么新建議,但是可能是這些技巧中最重要的。當你剛開始的時候,你沒有技能創(chuàng)造出有吸引力的設(shè)計。這就意味著你需要模仿知名的設(shè)計師,或者讓你深受他們作品的影響。
下邊是我的步驟:我會搜索那些和我的基本想法類似的,但是設(shè)計得很好的web應(yīng)用。我會找出那些我認為會在我的app中有用的元素,然后在我的app中重新創(chuàng)造它。不要直接copy html或者css,那樣學不到任何東西。只學習視覺,然后用自己的代碼實現(xiàn)。當你慢慢有經(jīng)驗了,就可以開始創(chuàng)造自己的東西了。
忘了PhotoShop
如果你和我一樣不知道怎么用PS,用你的代碼直接在瀏覽器里邊設(shè)計吧。我只用PS調(diào)整圖標以及給app截圖。( Easy注:最近Sketch挺火的,很多設(shè)計師已經(jīng)從PS完全轉(zhuǎn)向Sketch了。
精通CSS
直接在瀏覽器中設(shè)計需要精通CSS?!?下邊是一些資源:
前端框架是你的好朋友
從無到有的創(chuàng)建一個網(wǎng)站或者app是很難的,尤其對于新手。所以現(xiàn)在我使用前端框架。最有名的是的Foundation和Bootstrap,也有很多其他備選。
- Foundation - 我最喜歡的前端框架
- Bootstrap - 最流行的
- Pure - 從未用過,但是看起來很酷
- Polymer – Google Material Design全平臺實現(xiàn)的一部分,很酷的交互細節(jié) ( 這行是Easy加的,GFWED
圖標意外的重要
我用了很長時間才認識到圖標對于一個好的設(shè)計來說有多么重要,這并不那么顯而易見。圖標改善了導航,添加了色彩,傳情達意。圖標不一定能讓設(shè)計NB,但一堆爛圖標一定會讓你的設(shè)計SB。
根據(jù)項目的不同我使用icon fonts或者svg icons。icon fonts非常好用,尤其是你在瀏覽器里邊設(shè)計的時候。icon fonts讓你很容易給一個元素添加圖標,你只需要加個class就好了。
icon fonts大法好的另一個原因是你可以像改變字體大小一樣改變這些圖標的大小。換顏色也一樣。
下邊是我喜歡的一些icon資源
- Themify Icons
- IcoMoon ( Easy注:icomoon是我最喜歡的,可以選擇好圖標,自動生成css和sprite,甚至還能直接引用。嚴重推薦。
- Freepik
- Glyphicons
迭代,非常重要
嘗試和失敗是非常有價值的工具。很多嘗試看起來不爽,和你的設(shè)計不搭。但是沒有關(guān)系,每次失敗時回滾到上一步再繼續(xù)。在我確定Duet的設(shè)計之前我迭代過上千次。
關(guān)注可用性和易用性
好的設(shè)計不止是app看起來如何。它還涉及了app的功能好不好,用起來容易不容易。即使不用專業(yè)培訓,一點小常識就能讓你在構(gòu)建可用的app上受益匪淺。
你只需要中一件事就可以確保app的可用性—— 保證你真的在用你開發(fā)的app。經(jīng)常用。如果有東西讓你覺得小不爽,修理它。相信你的自覺。如果一個流程不清晰或者太復雜,你能直觀的感受到。是不是步驟太多?是不是某個功能難以找到?是不是常用功能用起來要點太多次?或者是不是你有時候都會忘掉一些功能在哪里?不管可用性問題在哪兒,只要你一直用你的app,我相信你能發(fā)現(xiàn)它的,然后你會修好它。
顯然這個流程是不完美的,你代表不了其他的每一個用戶使用它的方式,但我的經(jīng)驗是絕大部分問題通過這個方式可以找出來?!?
排版比你想象的重要
Easy:由于此段內(nèi)容都是英文排版相關(guān),直接跳過。補充兩個中文排版開源項目:
選擇正確的圖片和圖庫
… 幾個高質(zhì)量的免費圖庫
重視反饋
無法否認我在這個方面做得很差,但我認識到了反饋的重要性。我做的大部分東西在發(fā)布之前沒有得到反饋。為了在測試階段獲得反饋,我開始關(guān)注這些資源:
最后一招
如果你不知道如何去做——簡單總是好的。大量留白、更輕微的陰影之類。變得擅長設(shè)計是一個漫長的過程,會花掉你很多時間。也許不是你喜歡的方式,但一旦你掌握了它,你會有明顯的提升。
原文: duetapp
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站,并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底,使您的網(wǎng)站無需額外費用,即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設(shè)。
