顯示具有 平面設計 標籤的文章。 顯示所有文章
顯示具有 平面設計 標籤的文章。 顯示所有文章

2020年9月2日 星期三

UI設計與UX設計傻傻分不清?帶你一同剖析兩者差異5

UI 設計UX設計該如何完美分工?想知道就繼續看下去吧!

UI設計與UX設計該如何完美分工?想知道就繼續看下去吧!


本篇為【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 談戀愛⋯⋯還是被毀滅?

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

UI設計網站30招不藏私,讓設計師超省力! (一)

UI設計網站整理超實用30招都在這! (二)

UI設計網站超值大禮包!設計師們不可不看(三)

2020年8月31日 星期一

UI設計與UX設計傻傻分不清?帶你一同剖析兩者差異2

UI 設計UX設計大不同!一起來細數UI設計的優點吧!

UI設計究竟有哪些不同於UX設計的優點呢?一起來瞧瞧吧!

本篇為【UI/UX 設計工作完整剖析】系列的第 2 篇,完整連結如下:

隨著對 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 談戀愛⋯⋯還是被毀滅?

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

UI設計網站30招不藏私,讓設計師超省力! (一)

UI設計網站整理超實用30招都在這! (二)

UI設計網站超值大禮包!設計師們不可不看(三)

2019年7月25日 星期四

用Photoshop搞定美照,路人雜物閃邊去!


Photoshop,不再煩惱照片有閒雜等人!

用Photoshop,不再煩惱照片有閒雜等人!




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

Photoshop教學-使用內容感知消除路人雜物-原圖
今天待修的原圖如下





Photoshop教學-使用內容感知消除路人雜物1-要處理的地方
桃紅色圈選範圍為要處理的地方。



Photoshop教學-使用內容感知消除路人雜物2-使用套索工具選取
點選套索工具圈選要處理的範圍,記得人的倒影也要選到!




Photoshop教學-使用內容感知消除路人雜物3-編輯後填滿
點選編輯(Edit)選單,之後選擇選單內的填滿(Fill)




Photoshop教學-使用內容感知消除路人雜物4-選擇內容感知
在跳出的對話框中,在內容(Contents)的部分選擇「內容感知(Content-Aware)」選項,然後按「確定(OK)」。




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





相關文章

網路行銷課程設定目標族群太難?可愛虛擬人物幫你撒下行銷大網

教你為網站妝模作樣的CSS網頁設計課程

HTML5教學與CSS語法:打造美感文字與字形

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

蝦咪!假新聞可能是來自人工智慧的傑作?

何謂前端工程師?何謂後端工程師?解惑時間到了! 

Python與Java的不同

2019年7月24日 星期三

Photoshop去背好簡單


Photoshop去背快速搞!

 Photoshop去背快速搞定!


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

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

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




Photoshop去背教學-2-描圖紙模式
朝著想去背的主體來回塗抹



Photoshop去背教學-3-朝著想去背的主體來回塗抹
塗抹一個大概之後,會發現有些邊緣處還有些瑕疵



Photoshop去背教學-4-邊緣處還有些瑕疵
接下來要進行更進一步的優化,點選「檢視模式(View Mode)」選擇「覆蓋(Overlay)」,在這個模式下能將瑕疵看得更清楚





Photoshop去背教學-5-覆蓋
使用左側工具列的「調整邊緣筆刷工具」、「筆刷工具」做更細節的修改



Photoshop去背教學-6-調整邊緣筆刷工具
調整透明度檢查一下,如圖示小貓的毛髮細節也都出來囉



Photoshop去背教學-7-調整透明度檢查
輸出前可以勾選「淨化顏色」的選項, Photoshop 會幫忙調整細節的顏色,接著點選「新增使用圖層遮色片的圖層」,按下「確定」



Photoshop去背教學-8-淨化顏色
去背完成!



Photoshop去背教學-9-去背完成







相關文章

網路行銷課程教你善用免費網路工具,抓出一把關鍵字

一句話總結網路行銷課程:簡單直白

網路行銷課程教你從SEO優化方式看品牌價值

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

搭著人工智慧的順風車,這MIT的APP成為人類生活增加便利性!

Python課程超夯!來看看全球十大AI領導簡歷的哈佛商業評論 

URL網址結構怎麼做? 需要SEO優化嗎? 作法一次大公開!!

2019年5月23日 星期四

達內教育和 Adobe國際認證成功簽約!

達內教育集團與 Adobe·ACA 國際認證簽約了!

達內教育集團與 Adobe·ACA 國際認證簽約了!


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

相關文章

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

達內教育與惠普.英特爾合作,為培育更多IT人才!

2018百度商業盛會暨品牌數字資產榜單出爐,達內教育再度入圍

網頁設計的整體網站規劃流程跟前端工程師也有關係?!

SEO優化總是讓你快抓狂?自從認識AWD以後一切都變了...

CSS選擇器宣告法-初階前端工程師入門

不只Python工程師,軟體工程師都可能有的症候群是..