談網站設計思維-網頁設計元素 UI 篇
本篇適用任何想美化網站的人，無論你是否學習過設計，都可從以下步驟優化你的網站，也適用於商務人士使用簡報設計的元素和素材提供。
架設網站是需要好的設計，幫助你的網站讀者更容易停留在你的網站，進而購買你的服務，而這背後需要的元素是什麼呢？本篇分為「網站主視覺」、「視覺輔佐色選擇」、「圖片」、「文字」、「動畫互動」等，一一帶你探討，讓我們繼續看下去吧！
前言：
怎麼做一個會賺錢的網站？首先，什麼叫會賺錢？透過網站去行銷你的產品或服務，以觸及更多的使用者，相信是大家做網站的目的，舉例來說，透過網絡把你的實體商品放在網路上進行銷售，是電商網站。
建置一個網站，首先需要租用伺服器，並且購買網域，相信大家花這些錢和精力，一定希望打造一個能觸及更多用戶的網站吧！本系列會教大家篇著重在如何架構網站邏輯（上篇）、如何設計版面 UI （本篇）、如何放入恰當的文案（下下篇），最後教大家如何衡量網站的成效（下下下篇）！適合想做網站，已經租了伺服器，卻還不知道怎麼開始，以及已經開始，卻不知道怎麼優化的人。
如果你想了解如何設計網站內容架構，可以參考這篇：
網站主視覺
通常一個網站會有一個主視覺，而這個主視覺就與你的品牌 logo 相關，一個公司最重要的就是你的品牌，品牌做起來，東西就好賣，而你的 logo 給人的形象與你想傳遞的價值，就是你品牌給人的印象。網頁的主視覺設計也應該與 logo 一致，比方說 Facebook 的 logo主視覺是由藍色組成，環繞著整個 APP的視覺就充斥著藍色，接著會用一些輔佐色做相應。
視覺輔佐色選擇
輔佐色通常 1~3 個顏色就好，太多會使網站顏色顯得雜亂，就跟服裝設計師建議，一個人身上的穿著搭配最好不要超過三種，是同一個道理。以下提供幾個工具作為顏色搭配的參考：
1. 色調、調色盤產生器：
https://color.adobe.com/zh/create
2.視覺傳達者資源
Visme 裡涵蓋了非常多關於想法視覺化的文章和範例，並且提供模板讓初學者也可以手動學習，乾貨滿滿，我個人認為在做簡報和時間碎片化的行銷中，都非常適用。
圖片
一個好的網站設計再怎麼好看，如果你的照片畫質不夠，或是照片沒有傳達好所要表達的價值，那麼前面所有講的也是功虧一簣，尤其你的照片就是你的銷售商品時，如旅遊住宿訂房網站 Booking.com、Tripadvisor ，會吸引你按下購買的決定性因素幾乎就是這個景點的照片足夠吸引你，如果你沒有專業攝影師拍的照片的話，以下推薦幾個圖庫提供網站：
1. 付費照片素材網站：
shutterstock.com
2.免費照片素材網站：
pexels.com
3.插畫設計圖庫網站：
elements.envato.com/graphics
envato提供的 icon廣泛應用在 PPT 簡報中，就算不是設計網站的人，對於商業人士、業務等做報告都非常適用。
而我們的文字若放在圖片上，可以把圖片加上黑色或是白色的 filter，讓圖片變成底圖，而讓文字更顯眼。
文字
字體：只用內建字體是不行的！
字體又分為「標題」和「內文」兩個部分，標題必須夠大夠清晰，而內文必須易讀和易看。在設計的世界中，美觀的組成元素還包括了「易讀」和「易看」，如何形成能夠讓讀者聚焦的文字呢？其實背後可是有學問的，試想想，為什麼你看 Medium 的長文還覺得舒適，那是因為它的字體、段落、空行等都是令人感到舒適的。
免費網路字體：
如果你要架設的是繁體中文網站，在 Google Fonts 中，繁體中文的字體目前只看到「Noto Sans 思源黑體」，另外有五種字體可以另外下載和 import，因此我迅速查了一下，發現網上「造九頑五」（by 黃裕二 | 05/10, 2018 | WordPress教學, WordPress, 趨勢）整理的代碼蠻清楚的，這邊整理給大家：
- Noto Sans 思源黑體
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: 'Noto Sans TC', sans-serif;
2. cwTeXKai 楷體字體
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
font-family: ‘cwTeXKai’, serif;
3. cwTeXYen 圓體字體
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
font-family: ‘cwTeXYen’, sans-serif;
4. cwTeXFangSong 仿宋體字體
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
font-family: ‘cwTeXFangSong’, serif;
5. cwTeXMing 明體字體
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: ‘Noto Sans TC’, sans-serif;
上述程式碼都是設定在css檔案中，import通常會寫在 css 中的最上方，在 import 字型檔案後，就可以使用 font-family來指名使用字型。
再分享一個文字組成非常鮮明的網頁：
動畫效果
首頁浮動顯示動畫(Page Road)：
參考網站：www.landingfolio.com
分享一個覺得很酷的響應式動畫網頁：https://www.tplh.net/
page road 切記不能讓用戶等待太久，免得在用戶一打開你的網頁時，就不耐煩的離開，比較不建議在最一開始的主頁就使用此設計。但我認為在你的網站有量化指標時，可以用數字向上滾動的方式，提升數字在躍升的成長感。比方說我在大學期間擔任的組織 AIESEC，用戶一載入網頁時，就能看到滾動而上的數字，由此來吸引眼球注意力，甚至我建議在後續的網頁 page 中，若要顯示每年都往上成長的量，也可以以長條圖視覺化向上升高的動畫來體現成長，這些就要取決於你的數據想要怎麼樣展現，這又跟你的數據特性有關，這就是另一門學問了。
按鈕顏色轉換動畫 (Mouseover)：
在效果中加上延遲反應，會讓顏色轉換有漸變的效果，較能讓視覺更舒服。
互動式遊戲動畫：
透過使用者點擊等手勢操作，讓網頁與你互動玩起遊戲，進而影響消費者注意力及新奇感，還可以帶入品牌價值，是我個人覺得超高操的動畫境界啦！話不多說，看以下這個網站立刻明瞭！
小 Tips: 善用圓角
除了以上幾種方法和工具可以應用到網頁中，在大量的使用者驗證過後，設計也越來越合乎心理學，你可以觀察到現今比較流行的網站，如 Spotify 的訂閱按鈕，Google 瀏覽器整體和 Google的搜索框，App store 裡面的產品介面，甚至是 Iphone手機本身，都是一個橢圓形的外圍！
使用圓角如今已被大量證實在 UI 上會帶給使用者平易近人，親切的感覺，可以滿足用戶的曲線偏袒，並降低大腦認知負荷，這就不難想像 Iphone 手機設計相比其他手機為什麼顯的新穎潮流，而如果你做一個銷售網站，讓用戶點擊立即購買的按鈕設計為圓角，都有助於你的購買點擊率喔，不妨試試看吧！
最後提供兩個豐富的硬核網站，幫助大家提升設計感參考！
設計師的facebook:
behance.net
網頁設計權威：
數位諮詢及設計、開發服務
最後，如果你對網站開發、APP 開發有需求，也歡迎你聯繫我，我們提供軟體外包服務，包含網站設計、APP 設計、介面與使用者體驗( UI/UX )，公司總部位於加拿大，因此如果你是想做國際化的網站，以及最跟上北美潮流的介面視覺設計需求，甚至需要進軍北美市場的需求，我們都可以媒合當地資源和設立公司的規範，輔助您順利進軍。
歡迎您寫信聯絡我：elaineyangwork@gmail.com
我們設計過的網站包括 ACE、ABA、ENT、GIFTO 等多家區塊鏈、比特幣交易所的網頁及APP，歡迎私信我看作品集和了解更多！
如果你對我個人故事感興趣，也可以透過這個粉專聯絡我：
我會更加努力產出文章的喔，你們的喜歡是我的動力！也歡迎來我的粉專看更多成長分享：
