火星網校
前端設計和美工的一些區(qū)別
發(fā)布時間：2024-01-25 12:10:22 瀏覽量：244次
UI設計
想必大家也會遇到這種情況，要做一個項目，產品經理說產品原型圖已經畫好了，讓我們去找一下素材，調一下顏色，看一下像素，把這個原型圖整體裝飾美化一番，然后就把我們叫做美工。我很不喜歡這種稱呼也很反對這種看法，其實像我們這種前端設計師應該成為懂美術和用戶體驗的產品經理，即時是裝飾美化也要注入產品的靈魂和思想在里面。
其實設計師是在改善產品的表征，同時在把更多的產品信息傳遞給用戶，通過不同元素的排列布局把產品的核心價值傳遞給用戶。
設計師應該把自己和產品經理一樣當成需求方，而不是執(zhí)行者。用設計的語言展示產品需求，使老板看起來更直觀，讓技術不用過多的看產品文檔就能明白。只有這樣，才能讓其他環(huán)節(jié)對你更加尊重，愿意傾聽你對產品的建議。
今天我們就來說說前端設計的那些事兒，為了這期主題討論我們還特別邀請了群內混跡設計多年的專業(yè)人士為我們指點迷津，感謝3群(217321695)的同學們鼎力相助。
一、什么是前端設計
什么是前端設計?我們在開始討論時就被拋出了這樣的問題，經過各位同學的表述我們大致了解了什么是前端設計。
設計就是呈現(xiàn)的過程，前端設計是通過色彩/構圖/等元素賦予頁面性格和特點，前端也是展現(xiàn)，通過色彩先抓住自己的目標人群，通過設計表現(xiàn)自己。
當然這僅僅是是web前端設計的一部分而已，這被成為-界面設計。WEB前端設計實際上是網頁制作 ，經過web1.0進入web2.0之后網站的前端由此發(fā)生了翻天覆地的變化，網頁不再只是承載單一的文字和圖片,它除了設計還要掌握開發(fā)技術，如：HTML、CSS和JavaScript等。
Web前端設計主要分為5個步驟：
1.看需求;
2.畫草圖;
3.設計界面;
4.前端代碼編寫;
5.兼容性調試。
當然事情并不絕對，除了必要的步驟之外還有一些細節(jié)需要去做，設計前與產品經理，視覺分析師，體驗師溝通。設計定稿后，就是和后臺程序員，測試工程師溝通，并反復調試。
二、扁平化設計vs擬物化
扁平化與擬物化，作為設計師現(xiàn)在必然要知道的兩個詞，那么他們本身都有什么樣的優(yōu)缺點呢?
1、 什么扁平和擬物設計
扁平化設計(Flat design)完全屬于二次元，這個概念最核心的地方就是放棄一切裝飾效果，諸如陰影，透視，紋理，漸變等等能做出 3D 效果的元素一概不用。所有的元素的邊界都干凈利落，沒有任何羽化，漸變，或者陰影。
而擬物化正好相反，
擬物設計(Skeuomorph)正好相反，他需要加入各種元素的效果，通過不同的效果組合達到模擬要呈現(xiàn)物件外觀的目的，以使新的外觀讓人感覺熟悉和親切。
2、 扁平化與擬物化的優(yōu)缺點
扁平化設計單獨設計起來更容易，突出內容主題，減弱各種漸變、陰影、高光等視覺效果對用戶視線的干擾，讓用戶更加專注于內容本身，并且容易統(tǒng)一設計風格，調整設計方案更加方便。而現(xiàn)在手機平板電腦“橫行”的今天，扁平化設計更能支持手勢交互，而且它占用系統(tǒng)空間小隊較少。
擬物化設計更適合初級人員了來做，這并不表示擬物化設計簡單，而正是因為它的復雜所以更適合初級人員來做，可以讓設計人員短時間內熟悉各種效果的實現(xiàn)，更好掌握色彩搭配等。并且擬物化設計認知和學習成本低，更能直接的表現(xiàn)出想表現(xiàn)的事物。
相對于它們的優(yōu)點多多，它們的缺點確是一目了然。擬物化設計更傾向于視覺效果，功能實現(xiàn)很少。扁平化所能承載的信息量太少，會提高用戶的學習成本。
三、前端設計應不應該規(guī)范？如何規(guī)范？
這個問題拋出來就被群友吐槽說：“如果不該規(guī)范，那要第二個問題干嘛?”。好吧就當主持人提了一個弱智問題吧…
前端設計當然應該規(guī)范，原因是：
1、為了信息加載更快。
2、有利于后期調適和修改
3、有利項目二次開發(fā)。
4、有利于項目交接。
那么前端設計應該如何規(guī)范呢?
1、最基本的就是代碼規(guī)范，整齊、簡潔的代碼規(guī)范更方便后期調試和修改，也方便重用。
2、樣式素材歸類規(guī)范，養(yǎng)成好的素材歸類習慣，也是設計規(guī)范的一種。
四、設計師應該從什么角度去考慮用戶體驗？
一直以來產品的設計都是在討好用戶，或者說是讓用戶知道什么是適合他的設計，那么我們要從哪些角度讓用戶知道這些呢?總體來說大致可以分為兩種，一種是視覺上給予用戶滿足，另一種則是在流程引導上下功夫。
細致說來可以分為以下幾點：
1、 符合產品特點的視覺呈現(xiàn)，并把自己代入用戶場景和角色設計布局(地鐵中右手使用手機等)。
2、 突出的，利于使用的視覺交互體驗。
3、 用戶對產品功能不清晰的情況下，通過視覺表現(xiàn)合理的引導整個使用的流程。
總結來說就是在視覺上引導和取悅用戶，在元素布局上讓用戶使用方便。
五、前端設計如何成為產品經理？
看到這里的時候各位看官請不要著急噴我，這一問題僅針對想要從設計轉行產品的各位同學，如果還是對前端設計很是熱愛的同學可以自動忽視，造成不便盡請諒解。
言盡于此，歸入正題。
要想轉行首先設計師應該把自己和產品經理一樣當成需求方，而不是執(zhí)行者。這點至關重要，設計人員和產品經理最大的不同是思維，因為在做事的時候角色不同，思維模式必然不同，也就是之前說到的需求方和執(zhí)行者，一個是被動接收信息，一個是主動推送(或者說發(fā)起)信息。只有從根本上轉變了思維才能開始這場蛻變、
設計師轉為產品還是有其優(yōu)勢的，畢竟用設計的語言展示產品需求，使老板看起來更直觀，讓技術不用過多的看產品文檔就能明白。因為前端更多的時間用在頁面設計上，對布局這類了解更深，對用戶體驗要強與在職的部分產品經理。
而短板也很明顯，設計師更多在意的是界面方面，而產品跟多的要分析業(yè)務流程、商業(yè)化、功能邏輯這些。工作是分工很明確，但是轉職的時候欠缺的地方也是很明確的，如何轉?答案就在欠缺的那一部分。
在不拋棄自己優(yōu)勢的情況下，由表現(xiàn)形式逆推理至業(yè)務邏輯，這是我對設計轉產品的同學們的一點建議。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
