UX,UI設計大解析:怎麼讓UX,UI相輔相成?

UX,UI設計大解析:怎麼讓UX,UI相輔相成?
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

對UX設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!系列最後一篇~怎麼讓UX,UI相輔相成?一定要知道~

本篇為【UX,UI設計大解析】系列的第 5 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

結語:如何讓 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 領域邁進,那麼最重要的還是思考自己對哪種設計類型感興趣。如果還不熟悉設計領域,建議這兩個方面都可以嘗試一下,有了在這兩個領域的實際經驗,不僅可以更了解自己適合哪個領域,也可以使你無論最後選擇哪一個,都能成為更好的設計師!

 

 

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

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

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

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

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

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

UX,UI設計大解析:UI設計的優點有哪些?!

UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UI設計的優點有哪些?!

對UX設計和UI 設計感興趣嗎?那千萬不能錯過這一系列文章!!今天要來介紹UI設計的優點有哪些~

本篇為【UX,UI設計大解析】系列的第 2 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

但隨著對 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 設計師則要思考如何引導使用者操作並完成任務,故兩者還是大不相同的。

 

本系列文章未完,下一篇請點UX,UI設計大解析:UX設計的優點有哪些?!

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

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

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

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

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

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

平面設計師一定要會的photoshop技能(二)

平面設計師一定要會的photoshop技能(二)
平面設計師一定要會的photoshop技能(二)

Photoshop對平面設計師來說幾乎是天天都會用到的軟體,有些基本技能非學不可,一定要會喔~(二)

現在許多人都會使用手機瀏覽網站,許多文字內容都在彈指之間一頁一頁的滑過去了,除非圖片或大標題夠吸睛,否則很難讓用戶在網頁上多停留幾秒,甚至看看其中的文字內容。因此「一張圖勝過千言萬語」,吸睛的商品圖是網路行銷的一大利器!有時為了突顯商品的用途、特色,總是免不了外出拍照。

然而有時外出拍照時,總是免不了遇到不該出現在圖片中的路人甲、或是雜物乙。因此學會快速消除圖片中的雜物或路人,是負責網路行銷網站美編平面設計相關人員必須學起來的 Photoshop 技法。

還好自從 Photoshop CS5 版本之後都有了「內容感知(Content Aware Fill)」功能,網站美編在做平面設計時再也不需要使用印章工具一筆一筆消除閒雜人事物了,只要三秒鐘立即就可將畫面中的雜物或路人給消除囉!

今天待修的原圖如下

  • 桃紅色圈選範圍為要處理的地方。

  • 點選套索工具圈選要處理的範圍,記得人的倒影也要選到!

  • 點選編輯(Edit)選單,之後選擇選單內的填滿(Fill)

  • 在跳出的對話框中,在內容(Contents)的部分選擇「內容感知(Content-Aware)」選項,然後按「確定(OK)」。

  • 完成了,神奇吧!Photoshop 的內容感知工具是不是很快呢?

 

 

 

 

其他閱讀

平面設計師一定要會的photoshop技能(一)

平面設計師一定要會的photoshop技能(一)
平面設計師一定要會的photoshop技能(一)

Photoshop對平面設計師來說幾乎是天天都會用到的軟體,有些基本技能非學不可,一定要會喔~(一)

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

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

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

  • Photoshop 中開啟圖片,點選「選取工具」,再點擊上面選單出現的「選取並遮住(Select and Mask)」

  • 進入模式後,會出現預設的「描圖紙模式(Onion Skin)」,點選左邊工具列的「快速選取工具(Quick Selection Tool)」。在選取主體之前,遮罩的部分會呈現半透明。若想要半透明的質感多一些,可以調高下方的「透明度(Transparency)」。此例調成 43%。

  • 朝著想去背的主體來回塗抹

  • 塗抹一個大概之後,會發現有些邊緣處還有些瑕疵

  • 接下來要進行更進一步的優化,點選「檢視模式(View Mode)」選擇「覆蓋(Overlay)」,在這個模式下能將瑕疵看得更清楚

  • 使用左側工具列的「調整邊緣筆刷工具」、「筆刷工具」做更細節的修改

  • 調整透明度檢查一下,如圖示小貓的毛髮細節也都出來囉

  • 輸出前可以勾選「淨化顏色」的選項, Photoshop 會幫忙調整細節的顏色,接著點選「新增使用圖層遮色片的圖層」,按下「確定」

  • 去背完成!

UI設計師的photoshop小單元(二)

UI設計師的photoshop小單元(二)
UI設計師的photoshop小單元(二)

想當個稱職的UI設計師就一定要會photoshop!!快來看看為大家準備的小單元教些什麼吧!!(二)

現在許多人都會使用手機瀏覽網站,許多文字內容都在彈指之間一頁一頁的滑過去了,除非圖片或大標題夠吸睛,否則很難讓用戶在網頁上多停留幾秒,甚至看看其中的文字內容。因此「一張圖勝過千言萬語」,吸睛的商品圖是網路行銷的一大利器!有時為了突顯商品的用途、特色,總是免不了外出拍照。

然而有時外出拍照時,總是免不了遇到不該出現在圖片中的路人甲、或是雜物乙。因此學會快速消除圖片中的雜物或路人,是負責網路行銷網站美編平面設計相關人員必須學起來的 Photoshop 技法。

還好自從 Photoshop CS5 版本之後都有了「內容感知(Content Aware Fill)」功能,網站美編在做平面設計時再也不需要使用印章工具一筆一筆消除閒雜人事物了,只要三秒鐘立即就可將畫面中的雜物或路人給消除囉!

今天待修的原圖如下

  • 桃紅色圈選範圍為要處理的地方。

  • 點選套索工具圈選要處理的範圍,記得人的倒影也要選到!

  • 點選編輯(Edit)選單,之後選擇選單內的填滿(Fill)

  • 在跳出的對話框中,在內容(Contents)的部分選擇「內容感知(Content-Aware)」選項,然後按「確定(OK)」。

  • 完成了,神奇吧!Photoshop 的內容感知工具是不是很快呢?

 

 

 

 

其他閱讀

UI設計師的photoshop小單元(一)

網路行銷課程讓工作自動找上門,你還在等什麼呢?

想在家也可以輕鬆賺進新台幣嗎?快來上網路行銷課程!

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

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

 

UI設計師的photoshop小單元(一)

UI設計師的photoshop小單元(一)
UI設計師的photoshop小單元(一)

想當個稱職的UI設計師就一定要會photoshop!!快來看看為大家準備的小單元教些什麼吧!!(一)

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

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

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

  • Photoshop 中開啟圖片,點選「選取工具」,再點擊上面選單出現的「選取並遮住(Select and Mask)」

  • 進入模式後,會出現預設的「描圖紙模式(Onion Skin)」,點選左邊工具列的「快速選取工具(Quick Selection Tool)」。在選取主體之前,遮罩的部分會呈現半透明。若想要半透明的質感多一些,可以調高下方的「透明度(Transparency)」。此例調成 43%。

  • 朝著想去背的主體來回塗抹

  • 塗抹一個大概之後,會發現有些邊緣處還有些瑕疵

  • 接下來要進行更進一步的優化,點選「檢視模式(View Mode)」選擇「覆蓋(Overlay)」,在這個模式下能將瑕疵看得更清楚

  • 使用左側工具列的「調整邊緣筆刷工具」、「筆刷工具」做更細節的修改

  • 調整透明度檢查一下,如圖示小貓的毛髮細節也都出來囉

  • 輸出前可以勾選「淨化顏色」的選項, Photoshop 會幫忙調整細節的顏色,接著點選「新增使用圖層遮色片的圖層」,按下「確定」

  • 去背完成!

 

 

 

其他閱讀

UI設計師的photoshop小單元(二)

網路行銷課程讓工作自動找上門,你還在等什麼呢?

想在家也可以輕鬆賺進新台幣嗎?快來上網路行銷課程!

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

Python課程讓你與AI接軌 不必擔心被科技取代

想成為第二個馬斯克嗎?讓Python課程帶你進入自動駕駛車的行列!

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

 

Adobe·ACA和美國上市達內集團簽約合作共同培養學員~

Adobe·ACA和美國上市達內集團簽約合作共同培養學員~
Adobe·ACA和美國上市達內集團簽約合作共同培養學員~

還沒報名達內教育集團的動作要快!!達內和知名國際認機構簽約合作!!最受惠的可是學員們呢!!

不久前,美國納斯達克上市的教育集團達內教育集團完成了與 Adobe-ACA 國際認證合作的簽約儀式。達內教育集團集團成都大學生實訓基地綿陽片區總監陳秀軍、院校合作經理週開楠、四川文化藝術學院職教學院範高林院長、張勝蓉副院長、陳淑娟副院長及相關專業老師都出席了此次簽約儀式。

雙方代表,依照之前已達成的合作意見,展開深度的交流,緊緊圍繞後續全校推廣工作怎麼更有效的實施展開密切溝通。四川文化藝術學院希望藉助 Adobe 揚名國際的品牌、Adobe 國際認證的獨特優勢,以及達內教育評價Photoshop平面設計網頁設計等數位藝術職業教育領域的經驗和成就,以及達內教育集團已獲得 《Adobe 國際認證 ACA 授權考試中心》 的特許資質,規劃在數位藝術領域宣傳和推廣 Adobe 國際認證,引進國際資源,培養國際數位藝術人才。

 

 

 

其他閱讀

中國富比世榜揭曉~ 達內教育,平安保險等等知名品牌都在榜內!!

你也想要跳脫零成長薪資嗎?來達內教育有方法!

林同學的親身經歷,告訴你達內教育評價好不好!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

Python課程讓你與AI接軌 不必擔心被科技取代

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

達內教育集團與國際品牌Adobe·ACA攜手合作培養人才!

達內教育集團與國際品牌Adobe·ACA攜手合作培養人才!
達內教育集團與國際品牌Adobe·ACA攜手合作培養人才!

已報名達內教育集團的學員們好消息來啦!!達內Adobe·ACA你聽說了嗎?

不久前,美國納斯達克上市的教育集團達內教育集團完成了與 Adobe-ACA 國際認證合作的簽約儀式。達內教育集團集團成都大學生實訓基地綿陽片區總監陳秀軍、院校合作經理週開楠、四川文化藝術學院職教學院範高林院長、張勝蓉副院長、陳淑娟副院長及相關專業老師都出席了此次簽約儀式。

雙方代表,依照之前已達成的合作意見,展開深度的交流,緊緊圍繞後續全校推廣工作怎麼更有效的實施展開密切溝通。四川文化藝術學院希望藉助 Adobe 揚名國際的品牌、Adobe 國際認證的獨特優勢,以及達內教育評價Photoshop平面設計網頁設計等數位藝術職業教育領域的經驗和成就,以及達內教育集團已獲得 《Adobe 國際認證 ACA 授權考試中心》 的特許資質,規劃在數位藝術領域宣傳和推廣 Adobe 國際認證,引進國際資源,培養國際數位藝術人才。

 

 

 

其他閱讀

中國富比世榜揭曉~ 達內教育,平安保險等等知名品牌都在榜內!!

你也想要跳脫零成長薪資嗎?來達內教育有方法!

林同學的親身經歷,告訴你達內教育評價好不好!

重新學習UI UX Python課程 打好基礎輕鬆領高薪

Python課程讓你與AI接軌 不必擔心被科技取代

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?