[分享]設計大小事，關於設計的人生體悟
以公司專案為例，分享 10 年來設計環境與應用工具的改變
前言
目前擔任海棠設計視覺設計師，平常工作是設計兼切版。
算算來海棠已經 12 年了，從 6 個人的小辦公室，到目前 32 人的規模，公司的成長，讓不長進的我也沾光的加強了本身的設計能力與技能。
本文將以我在海棠設計的實務經歷為例，與大家分享。
新手入坑，從零開始
記得剛進公司時，唯一較擅長的就是 flash，說擅長也只是會簡單的影格動畫。
至於網頁設計，就只能硬著頭皮上了，面試麻，總是得說都會一些 XD。
當時設計師包含我只有兩位，我還記得曾經問過同事，切版要怎麼切？
就看你需要什麼就切什麼啊～
蝦米 !? 啥意思 !!
就丟了一包網頁檔給我～自己看厚!!!
幸好當時 flash 需求挺高的，尚有用武之地，不至於試用期過後就掰掰。
學習最快的方式，就是先模擬別人的作品，東抄西抄的，也會抄出心得。
基本的規則知道後，就能應用在設計上了。
加上當時的人少，所以在大量製作與除錯的環境下，學得比較快。
這時，公司裡的設計師必須要會的三個軟體(起碼要會兩種)
Photoshop
設計版型與切圖 (唯一到現在還在用的軟體)
Dreamweaver
內建排版、css、js 都有，除了 table 還是 table ，層層疊疊。(已淘汰)
Flash
局部動畫。(後幾年不再使用，今年底將走入歷史)
基本上，只要會這三款軟體，簡單的靜態網站就能完成。
圖例：在當時 1024 的解析度下，可呈現所有內容。banner 以 flash 動畫呈現居多。
Div + Css + jQuery 的應用，增加設計多樣性
由於公司案量穩定、需求增多，設計師也開始陸續增加為4個。
現階段一樣用 DW，表格排版，方格排列，很固定沒變化。
案量多的情況，也只能按照舊方式製作，應付產出。
這時候，新進設計師的加入，也帶來新的技術和思維。
她分享自己所應用的切版技巧，也是目前常見的方式。
DIV + CSS + JS(JQUERY)
透過 div 命名，可給予不同的樣式，加上 jQ 動態，讓設計編排變得較彈性！
例如 div 可相互重疊，也可以旋轉角度，放大縮小等等。
之前得靠 flash 作出的簡易動畫，css 和 jQuery 也能做到了，太神奇了。
不多說，趕緊惡補 css 和 jQuery。
起碼基本的樣式和效果不再透過 DW，程式碼看起來也乾淨清楚許多。
另外有很多 plugin 可應用，切版變得比較有趣了。
js 動畫和 css 動畫相比，css 比較不佔資源、比較順暢，儘可能使用 css 動畫。
這時也能理解前同事所說的，需要的圖在切出來，其餘就用 css 樣式囉！
圖例：設計可以有不同變化了，開始利用斜角曲線以及層級做出差異性。
電腦版與手機版的過渡時期
因應智慧型手機、平板越來越普及。
所以在網頁設計上也適度做了調整。
當時應急的做法有二
Mobile 觀看時，等比例縮小電腦版至 mobile 畫面，但會非常小，需靠手勢放大觀看。
另外製作一款手機版網站，但在維護上，需花更多時間。因為兩個版本網站都須同步維護。
幸好過渡時期不長，因為 RWD 響應式框架出現啦。
圖例：手機版，並無 RWD 效果。
RWD框架對設計的影響
Foundation、Bootstrap 等響應式框架的引入，真是一大福音。
只要製作一次，不同尺寸的裝置都能自動縮放畫面，不需另外製作手機版本了。
框架內含 html、css、js，基本樣式功能都幫你寫得好好的，快速又省事。
配合 SublimeText 文字編輯器，有許多方便的套件可以安裝，增加開發效率。
使用起來，感覺一整個專業順手啊!!
徹底擺脫 DW 啦～
這段時間也出現大量的扁平化設計
去除浮雕、陰影、漸層等 3D 立體感，完全以平面來呈現視覺元素，呈現乾淨簡約的風格。
以及視差滾動效果 Parallax Scrolling
利用背景移動比前景慢的速度，造成視覺上的視差，產生類似 3D 的效果。
這兩種方式也大量應用在公司的設計上。
但是，框架雖然方便，但有一定的規範和限制。
所以設計上，需保持一定的整齊性，破格表現不能太誇張。
記得剛開始用 RWD 框架，最常被質疑為什麼這樣排版，左圖右文之類的，不能更活潑點嗎!!??
當下總是得再三的解釋框架的邏輯，對方才能理解。
但更熟悉框架之後，其實可以把它當成輔助：定義各裝置間的縮放。
比較特別的視覺表現，還是可以自己寫樣式的。用 RWD 並非一定得設計的那麼規矩沒變化。
圖例：跟前幾年相比，首頁內容也開始變多，落落長。
前端整合開發環境 Gulp
所謂工欲善其事必先利其器，如何能更事半功倍的完成專案，也是設計師一直在追求的。
Gulp 就符合我們前端這方面的需求。
一開始是使用 fire.app ，但發現 Gulp 更強大方便，所以選擇 Gulp 。
Gulp 是基於 node.js 的一個前端自動化建構工具。
可以網頁自動整理、對 sass 進行預編譯、程式碼檢測、圖片優化壓縮、壓縮 css 和 js 等等。自動幫你處理，進而提高開發效率和工作質量。
之前做完網站還得自己壓縮圖檔 css js 的，真是浪費時間。
有了 RWD 框架和 Gulp，真的讓前端製作上方便許多。
習慣了這種環境，還真的回不去了!!
UI設計上的改變
公司隨著 UX/UI 設計思維導入，變得更致力於用戶體驗優化，好看之外也要好用才行。
之前在設計時，真的很專注在視覺和動態效果上。只想更讚更炫更不同 !!
現在，在好看的前提下，反而簡化，進而追求使用上的直覺好用。
整個動線設計、內容編排、按鈕大小位置、回饋方式等等，反而是設計重點。可以說每個畫面與動作都具有其意義的。
尤其設計 App 時最常發生。
太單調，會被靠北是有設計過嗎？那麼素～
太有設計感，又被說這樣是好看，但不好使用、有點多餘耶，拿掉這個然後刪掉那個～
這也是設計師需要思考的地方，在好看好用與創意間取得平衡。
最後
設計表現和前端工具不斷更新變化。
總在上手時，又出現新的知識技術需要學習。
所幸現在設計部已有 9 位同事，各有專精，個個是高手。
不懂之處可互相詢問。學習上快速許多。
各位設計和前端們，一起變強吧！
未來還有更多的挑戰等著我們 XD
謝謝妳/你看完了這篇分享文章 : D
如果喜歡我們的文章，請給一個👏或超多個👏👏👏👏👏，也歡迎追蹤或是來我們網站逛逛，感謝閱讀。
