UI/UX 設計工作內容解析5-如何相得益彰

 

UI/UX 設計工作內容解析,本篇:5-如何相得益彰

本篇為【UI/UX 設計工作完整剖析】系列的第 5 篇，完整連結如下：
1-為何UI/UX容易搞混？
2-UI設計的優點
3-UX設計的優點
4-無論UI/UX都需研究驗證
5-如何讓UI/UX相得益彰

 

結語：如何讓 UI/UX 相得益彰？

即使 UI 設計 與 UX 設計是截然不同的專業、各自涉及迥異的技能，但它們都是彼此不可或缺的存在。

即使有精雕細琢的介面設計，也無法掩飾笨拙又難用的操作流程；而枯燥乏味的視覺設計也會無法吸引使用者、從而埋沒了出色的使用體驗。

UI 設計師確立使用者介面的外觀，而 UX 設計師安排使用者介面的運作。在 UX 設計師在鑽研如何用有限的篇幅、提供使用者最多又不會過多的資訊時，UI 設計師正在努力讓這些繁雜的訊息精美地呈現在螢幕上。這是一個非常需要合作的過程，也有賴雙方緊密且良好的溝通。

以行動號召按鈕（Call to Action，CTA）為例，看 UX 與 UI 的分工：

1.UX 設計師

提出需要多增加一個按鈕、為何如此能讓使用者滿意、決定如何重新安放所有按鈕。

2.UI 設計師

設計新按鈕的外觀，而其他按鈕也可能受影響而需重新調整如形狀、顏色、大小、特效等外觀。

3.UI、UX 設計師重疊的互動設計

當使用者點下按鈕後將會導向某個頁面，UI 著重在按鈕外觀的能見度與視覺導引；而 UX 則著重在導向的網頁是否能滿足使用者的期待。

如此這般，UI 設計、UX 設計師需要不斷地溝通協作，才能確保彼此的設計都能完美執行、與使用者的期望完美地吻合，最終創造出優秀的使用者介面與體驗。

如果你正在規劃要朝 UI 還是 UX 領域邁進，那麼最重要的還是思考自己對哪種設計類型感興趣。如果還不熟悉設計領域，建議這兩個方面都可以嘗試一下，有了在這兩個領域的實際經驗，不僅可以更了解自己適合哪個領域，也可以使你無論最後選擇哪一個，都能成為更好的設計師！

 

 

 

相關文章:

美女PM/UI設計師真實身分起底！二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java？有什麼差別？

五部人工智慧電影告訴你：未來人類會與 AI 談戀愛⋯⋯還是被毀滅？

人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品

疫情下的人工智慧發展:AI自動檢測社交距離

疫情中的人工智慧:AI首張專輯"武漢肺炎"問世

人工智慧再突破!從有碼還原成高解析無碼

UI/UX 設計工作內容解析2-UI設計的優點

  

 

UI/UX 設計工作內容解析,本篇:2-UI設計的優點

 

本篇為【UI/UX 設計工作完整剖析】系列的第 2 篇，完整連結如下：
1-為何UI/UX容易搞混？
2-UI設計的優點
3-UX設計的優點
4-無論UI/UX都需研究驗證
5-如何讓UI/UX相得益彰

 

因應隨著對 UI、UX 的認識日漸普及，目前的分工也越來越明確了，接著讓我們來看看 UI 和 UX 究竟是什麼吧。

什麼是 UI 設計？

UI 表示「使用者介面」（User Interface），無論是網頁、手機 APP 或是電腦軟體，只要眼睛所見的頁面都是 UI 設計的守備範圍。

從吸引使用者點擊的按鈕、閱讀的文字、文字輸入欄、空間配置、畫面排版、轉場和任何形式的視覺元素，一同組成一個龐大的視覺佈局。

▲ 這張照片是攝影師 Lubos Volkov 為 UX Store 拍攝的，同時提供了有關「如何成為更好的設計師」的提示。在你的技能達到一定的水平之後，就要不斷地學習新事物。(來源：Unsplash、uxstore.com)

除此之外，UI 也是人和電腦相遇的地方──電腦具備某種功能，人想要利用這些功能，需要進行「輸入」（inputs）和「輸出」（outputs）。介面就是輸入和輸出的規劃安排，讓人們得以應用電腦來創造出他們所需結果。

以上工作由 UI 設計師負責，他們選擇配色方案、按鈕形狀、線條的寬度和文字的字體，精心打磨每一處「眉角」。而一個好的 UI 設計通常具有以下特色……

好的 UI 設計 會具有的優點：

1. 清晰

介面的所有視覺元素皆脈絡分明、一目瞭然，使用者不需要刻意思考每個元素的含意。

2. 熟悉

使用者可以依照過往習慣操作的介面，如：點擊一次為選取、點擊兩次則為打開該項目。

3. 一致性

保持整個介面的風格一致，這樣使用者可以習慣操作模式。

4. 防呆機制

一個好的使用者介面該避免使用者不小心犯錯。

5. 事半功倍

好的介面可以讓使用者以最少的「輸入」達成所需的「輸出」，還能讓有經驗的使用者更有效率操作。

▲ 一名設計師正在繪製 wireframe。(來源：Unsplash)

待設計完成後，UI 設計師會寫上標註和說明，轉交給工程師進行撰寫。因需要與工程師溝通配合，UI 設計師必須跟上科技的進步，對程式語言也要一定程度的了解，避免產生和工程師溝通不良的狀況。而帶有前端工程師及設計師雙技能的人會被稱為「介面工程師」（UI Developer），可以自己設計畫面也自己寫出網頁。

而 UI 設計師有時也會與「平面設計師」（Graphic designer）一同被討論，他們同樣關心美學、同樣要使介面充滿魅力、引人注目並切和主題，但平面設計師不需考慮「使用者怎麼操作」的問題，平面設計基本上也不需要被操作；而 UI 設計師則要思考如何引導使用者操作並完成任務，故兩者還是大不相同的。

 

本系列文章未完，請點此看下一篇

 

相關文章:

美女PM/UI設計師真實身分起底！二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java？有什麼差別？

五部人工智慧電影告訴你：未來人類會與 AI 談戀愛⋯⋯還是被毀滅？

人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品

疫情下的人工智慧發展:AI自動檢測社交距離

人工智慧解碼技術史上最強!細節超清楚的

人工智慧跨及長照,讓世界更溫暖(上)

 

Photoshop初心者教學-使用內容感知:快速消除路人與雜物

想學Photoshop的你,千萬不能錯過這篇初心者教學-使用內容感知:快速消除路人與雜物.

現在幾乎人人都會使用手機瀏覽網站，許多文字內容都在彈指之間一頁一頁地滑過去了，除非圖片或大標題夠吸睛，否則真的很難讓用戶在網頁上多停留幾秒，更何況點進去看看其中的文字內容。因此「一張圖勝過千言萬語」，吸睛的商品圖是網路行銷的一大利器！有時為了突顯商品的用途、特色，總是免不了外出拍照。
然而有時外出拍照時，總是免不了遇到不該出現在圖片中的路人甲、或是雜物乙。因此學會快速消除圖片中的雜物或路人，是負責網路行銷的網站美編等平面設計相關人員必須學起來的 Photoshop 技法。
還好自從 Photoshop CS5 版本之後都有了「內容感知（Content Aware Fill）」功能，網站美編在做平面設計時再也不需要使用印章工具一筆一筆消除閒雜人事物了，只要三秒鐘立即就可將畫面中的雜物或路人給消除囉！
今天待修的原圖如下

 

1. 桃紅色圈選範圍為要處理的地方。
   
2. 點選套索工具圈選要處理的範圍，記得人的倒影也要選到!
   
3. 點選編輯（Edit）選單，之後選擇選單內的填滿（Fill)
   
4. 在跳出的對話框中，在內容（Contents）的部分選擇「內容感知（Content-Aware）」選項，然後按「確定（OK）」。
   
5. 完成了，神奇吧！Photoshop 的內容感知工具是不是很快呢？
   

參考連結:

網路行銷發大財7大秘訣(共四集)-2.SEO與EDM

網路行銷發大財7大秘訣(共四集)-3.社群行銷與CRO

網路行銷發大財7大秘訣(共四集)-4.SEM與KOL口碑行銷

自學SEO小學堂(二)-搞定SEO一定需要圖片嗎?

自學SEO小學堂(三)- 靠HTML5來設定圖片大小還不夠?

自學SEO小學堂(四)-設定圖片最佳寬度及Exif


暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~

Photoshop初心者教學-選取並遮住:毛髮去背

想學Photoshop的你,千萬不能錯過這篇初心者教學-選取並遮住:毛髮去背.

初心者在上課之前應該要知道去背雖然是 Photoshop 影像合成的基本功力，但是在網路行銷業界，電子商務網站的商品圖片可說是非常多，要將這些圖片快速且去的乾淨，則是考驗許多網拍美編、UI 設計師、平面設計師等的基本功。

「選取並遮住」去背好簡單

好在 Adobe Photoshop 在 2016 年後有一項「選取並遮住(Select and Mask)」的功能，擁有強大的邊緣演算功能，可幫助網拍美編、UI 設計師更快速地選取主體，也包含毛髮的部分，大幅提升作業的效

1. 在  Photoshop 中開啟圖片，點選「選取工具」，再點擊上面選單出現的「選取並遮住(Select and Mask)」
   
2. 進入模式後，會出現預設的「描圖紙模式(Onion Skin)」，點選左邊工具列的「快速選取工具(Quick Selection Tool)」。在選取主體之前，遮罩的部分會呈現半透明。若想要半透明的質感多一些，可以調高下方的「透明度(Transparency)」。此例調成 43%。
   
3. 朝著想去背的主體來回塗抹
   
4. 塗抹一個大概之後，會發現有些邊緣處還有些瑕疵
   
5. 接下來要進行更進一步的優化，點選「檢視模式(View Mode)」選擇「覆蓋(Overlay)」，在這個模式下能將瑕疵看得更清楚
   
6. 使用左側工具列的「調整邊緣筆刷工具」、「筆刷工具」做更細節的修改
   
7. 調整透明度檢查一下，如圖示小貓的毛髮細節也都出來囉
   
8. 輸出前可以勾選「淨化顏色」的選項， Photoshop 會幫忙調整細節的顏色，接著點選「新增使用圖層遮色片的圖層」，按下「確定」
   
9. 去背完成！
   

參考連結:

網路行銷發大財7大秘訣(共四集)-1.概論與內容行銷

網路行銷發大財7大秘訣(共四集)-2.SEO與EDM

網路行銷發大財7大秘訣(共四集)-3.社群行銷與CRO

自學SEO小學堂(一)-圖片命名與alt文字的重要性

自學SEO小學堂(二)-搞定SEO一定需要圖片嗎?

自學SEO小學堂(三)- 靠HTML5來設定圖片大小還不夠?

暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~

專業達內教育與 Adobe·ACA 國際認證簽約成功

對程式設計有興趣的你有福啦!知名IT達內教育近日有一大創舉!

美國納斯達克上市的教育集團達內教育集團已完成了與 Adobe-ACA 國際認證合作的簽約儀式。達內教育集團成都大學生實訓基地綿陽片區總監陳秀軍、院校合作經理週開楠、四川文化藝術學院職教學院範高林院長、張勝蓉副院長、陳淑娟副院長及相關專業老師都出席了此次的簽約儀式。
雙方代表，就先前已達成的合作意見，展開深度交流，緊緊圍繞後續全校推廣工作如何更有效實施而展開密切溝通。四川文化藝術學院希望藉助 Adobe 國際品牌、Adobe 國際認證的獨特優勢，以及達內教育評價在 Photoshop、平面設計、網頁設計等數位藝術職業教育領域的經驗和成就，以及達內教育集團已獲得 《Adobe 國際認證 ACA 授權考試中心》 的特許資質，規劃在數位藝術領域宣傳和推廣 Adobe 國際認證，引進國際資源，培養國際數位藝術人才。

參考連結:

從達內教育評價事件來看Geego(奇科?)IT培訓評論的謬誤

從事網頁設計的你,知道什麼是無痛優化嗎?

想學程式語言當工程師發大財?學會這些準沒錯!

Java課程讓我百萬年薪科技新貴之路只需要六個月!

透過對的Java課程,讓你從茫然的畢業生中脫穎而出!

達內教育評價-故事背後事實的真相甚麼是這樣?!

中國IT教育領導品牌　達內教育集團第一家海外授權中心