2019獨角獸企業(yè)重金招聘Python工程師標準>>>

一、何謂WEB設計？
? ? ? WEB設計也是視覺傳達設計的一個方向，而且在視覺傳達、信息表現(xiàn)方面，體現(xiàn)的尤為重要，從產(chǎn)品構成要素方面說，設計由三個要素構成：
1、創(chuàng)意
? ? ??創(chuàng)意，也可以理解為創(chuàng)作的意圖，這是最基本的一個要素，需要考慮產(chǎn)品的特性、企業(yè)文化、受眾文化、傳播媒介、表達意圖等方面，來綜合考慮，有了創(chuàng)意才能決定后續(xù)的兩個要素。
2、構圖
? ? ? 構圖決定了作品的基本骨架，解決圖形、色彩、文字三者的空間關系，大氣磅礴和小清新的構圖肯定是不一樣的。
3、色彩
? ? ??我們經(jīng)常說這個色彩給人喜慶的感覺，那個色彩給人感覺好壓抑。中國紅給人深沉、內(nèi)斂，藍色的科技感更強，OSC的色調(diào)是綠色的，這些就是色彩，也是視覺傳達中最直接最有效的元素，這也就是為什么梵高的油畫都是濃墨重彩的原因。

（這張圖清晰的表現(xiàn)了各企業(yè)的LOGO在色環(huán)中的位置）
? ? ? 基于以上三點，其實設計是一個非常復雜的工作，而WEB產(chǎn)品的設計和常規(guī)的平面設計更是有非常大的區(qū)別。WEB設計是立體的，有XYZT四個軸線，平面設計只有XY兩個軸線。說人話就是：WEB設計需要考慮z-index屬性，T則是time，菜單的hove事件彈出隱藏層，這就是Z屬性和T屬性的具體表現(xiàn)。因此，在WEB產(chǎn)品的設計中，我們除了要考慮設計的三個基本要素，還需要考慮WEB設計特有的兩個屬性Z和T。

（這個就是404網(wǎng)站出生的樣子，相信內(nèi)測的時候比這個還丑。 ）

??? ? 當然，Z和T屬性也不是WEB設計一出生就有的東西，而是隨著互聯(lián)網(wǎng)技術井噴以后才有的概念，這中間的技術發(fā)展我們在此按下不表，Z屬性主要就是我們的各種模擬彈窗、各種TAB、各種提示框的大量應用，T則是各種動畫效果的應用，而在HTML5的發(fā)展中，這兩個屬性則是被發(fā)揮到了極致。這寫設計元素是常規(guī)平面設計所不能思考的，甚至部分WEB從業(yè)者也無法在開發(fā)中接受這倆個元素。然而正是這兩個元素讓WEB設計的空間變得更加廣闊。
? ? ? 說道這里，其實什么是WEB設計相信大家已經(jīng)清楚了，我就不說我自己的定義了，歡迎大家各抒己見。（其實是我也說不來。）

二、WEB設計是怎么做的？
? ? ? 說完是什么，接下來我們說說怎么做的事兒。其實就我自己的經(jīng)歷而言，來寫這節(jié)是比較沒有自信的，我沒有經(jīng)歷過復雜的團隊協(xié)作的大項目，所以這節(jié)的算是我自己的一些思考，大家看看就行，別當真，另外就是我們這里只討論設計，實際的工作中，我們總會因為這樣那樣的原因而采取妥協(xié)，在此我們也不做細說。
? ? ? 上文我們說了WEB設計的幾個要素將成為我們做的指導思想。設計的三要素其實并不是隊列的，而是并行的，在設計的過程中相輔相成，最終影響到我們的產(chǎn)品設計走向。
第一步，肯定是了解客戶需求，包括客戶的文化、客戶的痛點等，了解客戶需要什么功能，實現(xiàn)怎樣的效果，是要狂拽酷炫，還是要簡單方便又省錢？
第二步，自然就是產(chǎn)品構圖了，在客戶的要求及財務允許的情況下，對產(chǎn)品進行設計，例如我正在使用的這個OSC的博客發(fā)布功能，每次鍵盤彈起后，系統(tǒng)就會自動保存草稿，如果不小心按下關閉，則會alert提示是否要離開頁面。這些功能，包括了我們之前說到的XYZT等元素，在產(chǎn)品構思的過程中，我們就需要對業(yè)務鏈進行梳理，從流程圖變成產(chǎn)品原型，最后是設計稿，然后編寫CSS\HTML\JS，而使用各種框架則可以給我們省去了很多基礎工作。但還是需要對產(chǎn)品構思，比如按下提交后，是否要ajax返回一個信息，并用彈窗提示一下。這些都是需要構思的。
第三步，有了產(chǎn)品構思，就需要給出詳細的設計稿，而在設計稿這個階段，則是參考我們的創(chuàng)意和構圖，來選擇我們的配色，并根據(jù)配色來調(diào)整我們的構圖，最終完成我們的產(chǎn)品設計稿。
第四步，當然就是寫代碼咯。是的沒錯，寫代碼只是其中的一小步。
? ? ? 當然，這四步只是一個大概的流程，而我自己在做的過程中，因為自己對產(chǎn)品的把控和時間需求，通常我都是從第一部直接跳到第三步，第三步做的差不多直接就第四步了，并且不會完全開發(fā)出靜態(tài)文件再來套模板，而是寫完頁面框架就直接套在模版里，其他模塊直接開發(fā)。具體的工作過程，每個人都有自己的習慣，這個就不做討論了。

三、什么樣的設計是好設計？
? ? ? 相信做過設計的人，一定都有千萬個想要捏死甲方的心情。為什么？撇下哪些極品甲方，其實也是我們自己在前幾步?jīng)]有認真思考，分析。而再遇上一個二逼的產(chǎn)品經(jīng)理你就更沒法搞了。其實我們在設計的時候，應該盡量克制這種“甲方是傻逼，不懂設計”的思想，即便他真的是個SB。因為這種思想對我們的工作百害無益，只會干擾我們的工作，沒有其他。
? ? ? 好的設計，首先是要滿足人的使用，其次是盡量人性化的界面。在開發(fā)招財豬進銷存的時候，右側的菜單引發(fā)了各種吐槽，相信對比word2010和word2003大家就可以感受出“人性化”是什么東西了。設置一個表格屬性，以前得左點右點，現(xiàn)在只要嗖的一下即可。然而，你能說word2010不是一個重度設計的產(chǎn)品么？任何做到正真簡單的產(chǎn)品，那都是經(jīng)過了無數(shù)復雜的思考和設計，而那些為了簡單而簡單的產(chǎn)品，則是一坨翔，比如蘋果的那個操蛋的鼠標。
? ? ??一個好的作品，一定是一個重度設計的東西，不僅能讓用戶方便的使用，而且他的配色、構圖一定也是非常舒適安全的，包含了設計人員的思考、以及對待產(chǎn)品的態(tài)度，用老羅的話說，每個元素都在他應該在的位置上。雖然這句話說的比較夸張，但設計的精髓就是這個，如果只是簡單的爛泥巴糊上墻，把信息輸出來屏幕上，那誰都會，然而那不是設計，那只能是echo和var_dump的輸出而已。

轉載于:https://my.oschina.net/bojinzhu/blog/515312

總結

以上是生活随笔為你收集整理的也说说互联网产品开发中的设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。