網頁UI/UX介面設計作品|之前在日本外包網CrowdWorks模擬幫業主設計的電腦版LP

Hi 大家好，我是孫同學，是達內Web前端開發課程的學生。

雖然未曾正式學過UI/UX的設計，但有買書自學過一點點UI/UX這一塊的領域，以免未來只會開發程式、沒有考慮到使用者感受。

這個Case是一家「協助客戶開發系統」的日本軟體公司在日本最大級外包網CrowdWorks 中Po上去的案子，他們那段期間在找UI/UX設計者，我雖然最後沒有去應徵這個案件，但是，模擬性質的根據企業要求設計了一個電腦版UI。

他們只有提供已知的「公司logo」（桃紅粉文字logo），其餘要自行設計。

一定要有的文字頁面包括Banner（裡面的推薦日文詞要自己想）、「20年開發實務經驗」、吸引消費者的部分，以及整個網頁的導向就是「お問い合わせ」按鈕。

本次與大家分享設計的「作品本身」與「設計過程的邏輯」分享。

不過，為了避免設計時只考慮到畫面完美，沒考慮到後續接手開發的工程師能否用技術來實現，以及，考慮到「他們企業為什麼需要這個網站」的「目的導向」來考慮，所以，在考量目的導向的UI/UX設計，以及對於接手的開發工程師而言，技術上能否被開發出來都一起考量。

【作品（電腦版網站的設計）】

【我的設計邏輯】

「目的導向」的「お問い合わせ」按鈕

考慮到他們網頁主要的重點以及公司收入來源，就是希望「逛網頁的客戶」會點選「詢問連絡表單」（お問い合わせ），來創造「找他們合作開發系統」的「開發業績」，所以刻意把「お問い合わせ」按鈕設計成深色、使人矚目的配色以及放在使用者容易點選的位子。

除此以外，也讓這個按鈕「頁首」就出現過，「頁尾」再出現，引導使用者「點選『お問い合わせ』按鈕」的可能性。

「20年開發實務經驗」部分

與其用文字列出來「這家公司曾經幫那些客戶開發過系統」，讓看網頁的用戶看過沒感覺，不如用那些客戶的logo圖片排在一起。

中間

把新用戶常見的詢問做成一個圖表放在中間，用文字去使「可能購買他們服務的使用者」，提出感同身受的問題，並且，在同時幫這家公司強調「市場區隔」（他們公司開發流程90%都可以溝通，過程資訊透明）。

例如：「您是否有以下煩惱或不安呢？『雖然想開法系統，但是缺乏技術』、『雖然找過很多系統開發公司，可是討論過程資訊不透明』」

考慮到整體配色，用了藍色底，感覺上跟「原logo」比較相配。

倒三角形按鈕

吸引使用者往下看的一個「動機按鈕」

頁尾

無論客戶目前可能在想什麼問題，首先，邀請客戶填寫「お問い合わせ」表單，來詢問問題。

所以再次將該按鈕放在螢幕中間的位置，並且「明顯的強調」。