UI/UX初體驗

前端工程師是人文及科學結合一身的藝術家，只琢磨程式的工程師們，是否也要培養一點美感?

分享 : SLSMusic｜獵人片頭曲OP1｜早安 Ohayou — Violin & Piano Cover

Photo by Med Badr Chemmaoui on Unsplash

UI（User Interface）稱為使用者介面

UI 使得使用者在完成自己的任務時與被設計物件之間的交流儘可能地簡單和高效。好的使用者介面設計能夠讓使用者在完成任務時不必因為設計本身花費不必要的精力。

以購物網站舉例，整體網頁的美感、商品間如何呈現、標題字體大小、主打及其他產品圖片大小以及從搜尋到結帳的流程以及功能的設計。

momo購物網的主打活動在頁面的正中央

UX（User Experience）稱為使用者體驗

根據使用者的習慣，把一些功能放到習慣的位置。

以購物網站舉例，搜尋列是最常被使用的工具所以通常都很醒目的在導覽列的下方，如果把它放到footer那使用者體驗就會非常糟糕。

另外一個就是導覽列，之所以會放在最上方，就是因為網頁有很多頁面，常常會需要跳轉到另外一頁，如果今天導覽列放在不醒目的地方，每次要點都需要花時間找，那使用者可能就會直接關掉網頁，然後去別的競爭對手的網站購買產品。

蝦皮購物網站的搜尋列設計在明顯的位置

UI / UX 的理念

跟遊戲及電影預告一樣，都是希望玩家和觀眾能花費在自己身上，所以遊戲廠商就會設計如何讓使用者一直玩下去，特殊的武器需要儲值點數才能獲得，而電影預告也是剪輯精彩的片段讓觀眾們進戲院看電影；購物網站也一樣都希望能讓使用者完成結帳的動作，稱為 行動呼籲按鈕（Call to Action, CTA）

直接購買和加入購物車的按鈕有最明顯的顏色或位置

網站並不是把頁面每個地方都弄得很華麗跟花俏，而是如何讓使用者能夠快速找到他要的產品或功能才是一個好的網站。

UI/UX的一些基本概念

整理了一些設計的基本概念如下:

1. 重要的文字圖片一定要最醒目，而醒目的方法有幾種:放大字體、加粗字體、將其它圖片色調弱化。
2. 人類閱讀的習慣是由左到右由上而下，呈現 F 型掃視，所以網頁重要的東西一定要放在中間上面，才能第一時間被捕捉。

大部分的人類在瀏覽網頁的眼睛動向

3.一個網頁字體最好1~2個就好，如果要強調標題或是文字，可以選擇放大、加粗、斜體或是顏色的搶眼程度。

4.一個網頁顏色最好固定幾個就好，可以為網頁挑選幾個比較符合形象的顏色使用，推薦幾個配色的網站 Color Pickers、Color Hunt

5.強調重點部分的時候也別忘記那些不那麼重點的部分，一個網頁並不是只由重要的東西所完整，而是所有頁面上的東西都在才之所以完整。

小試身手

1.左圖是原圖，右圖是用Photoshop做一點顏色的漸層

2.個人網站首頁

結論

Design is not just what it looks like and feels like. Design is how it works.

by Steve Jobs

好的產品並不單單只有優美的操作介面及外型，如何操作也是設計重要的一環，設計並沒有標準答案，所以很困難，這次一探設計師的專業，但我想只是一小部分，藉由這次的學習更了解設計師的思維，往後與設計師溝通時也許就能理解網頁為何要如此設計了。