把握七項美化按鍵的UI,UX原則就能提升營收?!(下)

把握七項美化按鍵的UI,UX原則就能提升營收?!(下)
把握七項美化按鍵的UI,UX原則就能提升營收?!(下)

你注重UI/UX的設計嗎?你知道網頁的按鍵設計對提升營收的重要性嗎?還不知道或不清楚地你千萬不要錯過今天幫大家整理好的文章!!(下)

本篇為下篇,上篇請點把握七項美化按鍵的UI,UX原則就能提升營收?!(上)

5. 按鈕在版面上的順序位置

循序漸進的按鈕順序如同使用者和系統之間的對話,在 UI 設計的過程中,不斷反問自己或換位思考,使用者點選按鈕的步驟,會希望達成什麼目的,並進行相對應的設計。比如:上一頁/下一頁的按鈕,左右方向的箭頭按鈕是常見呈現方式。

UI/UX-導覽按鈕

6. 避免過多的按鈕分散注意力

為了增進 UX 使用者體驗,會在同個頁面上增加各式各樣的按鈕,一不小心數量會比預期來得多,便會產生分流降低點擊率。比如:如果主要目的是想讓使用者點選頁面下載按鈕,使用者可能因為點選其他連結而離開頁面。盡量將用於引導的選單與分類選項的按鈕樣式區隔開,確保使用者點選到目標按鈕。

UI/UX-許多可能性

7. 加入音效或動畫產生互動

藉由人的五官體驗,在按鈕的設計上傳達聲音與動態效果加深使用者的體驗,試著營造出如同按鈕圖示呈現的舒適情境,當使用者點選時,產生音頻或視頻響應式的回饋。如果使用者未接收到任何回饋時,通常會認為系統沒有接收到指令,而不斷的重複點選,便會導致多次不必要的操作。

方便點選的按鈕還有許多值得探討的 UI 設計技巧,以上所述的7個基本要點常用也是最容易忽略的一部分。優化按鈕設計的各種細節,探索各個細節對目標的點選,更能達成自己所理想的轉換成效。

UI/UX-互動

 

 

 

更多程式語言相關文章請點閱下方連結~

 

 

 

其他閱讀

隱私是基本人權!蘋果新功能「App 追蹤透明度」

Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄

Google 為保護隱私,棄Cookie 卻改用人工智慧?

Facebook 開源Python 語言的安全與隱私工具Pysa

人工智慧不再乖乖聽話?不再只會說YES!!竟還會說NO?!

猜猜Python在最新的七月程式語言排行榜中位居甚麼名次~

你的新網頁SEO要多久?猜猜Google怎麼說~

把握七項美化按鍵的UI,UX原則就能提升營收?!(上)

把握七項美化按鍵的UI,UX原則就能提升營收?!(上)
把握七項美化按鍵的UI,UX原則就能提升營收?!(上)

你注重UI/UX的設計嗎?你知道網頁的按鍵設計對提升營收的重要性嗎?還不知道或不清楚地你千萬不要錯過今天幫大家整理好的文章!!(上)

按鈕在網站上出現的頻率是相當高的,猶如實體店面的動線,協助顧客快速找到目標。隨著線上的商業發展蓬勃,網站設計上開始重視使用者觀看版面的體驗(UX),如何透由按鈕的佈局轉換為交易,並進一步提升營收。

雖然現今的網站美輪美奐,還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design,簡稱 RWD)的普遍,改善同時在手機、iPad與電腦不同裝置顯示問題,在版面中搭建使用者與系統之間的互動操作流程,仍不能缺少按鈕作為基礎視覺元素。

按鈕的設計不只是簡單的一個圖示,任何讓我們感到舒適方便的操作,都是有規律可循的。UI/UX 設計過程嘗試揣摩使用者心理,加入外觀美學、色彩學等知識創建而成,分成以下7個基本要點說明:

1. 互動式的按鈕設計

建立按鈕需要使用正確的樣式,依照按鈕產生的狀態設計不同外觀,包含:大小、形狀、顏色、陰影等因素組成,再搭配上合適的字體與間距,藉由簡單的觸控、按下去即可達到目的,讓人享受到即時的強烈滿足感。

線上虛擬按鈕的視覺性,來自接觸實體按鈕的體驗和認知根深蒂固,UX 使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。

以下是大多數用戶熟悉的幾個按鈕示例:

  1. 帶有方形邊框的按鈕
  2. 帶圓角的按鈕
  3. 帶陰影的按鈕
  4. 幽靈按鈕
UI/UX-各種按鈕示意圖

除了容易點選的按鈕樣式,保持與周遭文字適當的留白避免視覺干擾。

UI/UX-按鈕與周圍文字示意圖

2. 方便搜尋版面上的按鈕位置

使用者閱讀內容的同時,會搜尋版面可點選的功能按鈕,比如:下一頁、產品介紹等,如果使用者在視覺上尋找的時間愈久,若找不到按鈕,便不會知道它的的存在,愈容易感到網站不好使用。

為了和使用者不要玩追逐按鈕的遊戲,因此使用一致性的排版設計,便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局,足夠的留白與簡潔使版面不會太擁擠,即使不是強烈鮮明的按鈕,依然隨著閱讀動線吸引使用者輕鬆的點選。

3. 指令清楚的按鈕標示與說明

帶有誤導性資訊的按鈕標示,容易讓使用者感到迷惑。設計標示按鈕文字時,為了傳達出每個按鈕的作用,便需要簡短、有邏輯且適當的文字,讓使用者清楚了解點選按鈕後的結果,盡快獲得自己想要的內容,太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠。

比如下列案例

UI/UX-沒有提示動作的按鈕示意圖

不明白此對話框中的“確定”和“取消”代表什麼。大多數使用者只會疑惑“當我點選‘取消’會發生什麼事?”

UI/UX-有提示動作的按鈕示意圖

與其按鈕標示“OK”,不如使用“Remove”,清楚的表達按下去後會發生的事情。如果“刪除”是一個潛在的危險操作,可以使用強烈的顏色來提醒。

4. 符合使用者習慣的尺寸大小

按鈕圖示讓 UI 觸控尺寸大於可視尺寸,確保互動可靠性,按下按鈕應該是一個簡單的任務,如果使用者無法成功地輕點按鈕,或在操作過程中感到無所適從,這會帶來負面的體驗,並且浪費時間。

按鈕的大小反應著在屏幕上優先順序,愈是優先的重點便會是愈大的按鈕表示,或是使用鮮明的對比色來凸顯,增加使用者的注意力。而在操作 UI 使用者介面過程中,按鈕需考慮對使用者觸控的友好度,按鈕太小,往往導致會有輸入錯誤的情況發生。

UI/UX-合適的按鈕示意圖
UI/UX-按紐大小

麻省理工學院觸控實驗室的研究發現,指尖的平均值在 10-14 mm之間,指尖為 8-10 mm。這使得 10mm x 10mm 成為合適的最小觸控尺寸。

UI/UX-麻省理工研究合適的按紐大小

 

 

本篇為上篇,下篇請點把握七項美化按鍵的UI,UX原則就能提升營收?!(下)

更多程式語言相關文章請點閱下方連結~

 

 

 

其他閱讀

隱私是基本人權!蘋果新功能「App 追蹤透明度」

Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄

Google 為保護隱私,棄Cookie 卻改用人工智慧?

Facebook 開源Python 語言的安全與隱私工具Pysa

人工智慧不再乖乖聽話?不再只會說YES!!竟還會說NO?!

猜猜Python在最新的七月程式語言排行榜中位居甚麼名次~

你的新網頁SEO要多久?猜猜Google怎麼說~

讓Google輕鬆找到影片的15個SEO方法快學起來!(下)

讓Google輕鬆找到影片的15個SEO方法快學起來!(下)
讓Google輕鬆找到影片的15個SEO方法快學起來!(下)

Google更新影片SEO拉~想讓谷哥更快找到你的影片嗎?那千萬不要錯過今天為你整理的文章喔~~(下)

本篇為下篇,上篇請點讓Google輕鬆找到影片的15個SEO方法快學起來!(上)

允許 Google 擷取影片內容檔案

允許 Google 擷取影片檔案本身十分重要,因為若沒有事先設定好,即使將影片編入索引中,還是無法讓「影片預覽」或「重要時刻」等功能顯示在搜尋結果中。想要允許 Google 擷取影片可以參考以下作法:

6. 以支援的檔案格式提供

例如:MOV、MP4、MPEG、WMV……等等。

7. 避免阻擋搜尋機器人

避免使用 noindex 標記或 robots.txt 檔案等方式封鎖影片內容網址或網域,這會讓 Google 無法擷取影片的檔案。

8. 確認頻寬

確認所選擇的網站主機代管​以及實際處理影片的伺服器擁有實際的頻寬,才不會在 Google 嘗試讀取影片時超過負荷。

9. 建立固定 URL

為影片與縮圖建立穩定的網址,免得因為網址過期、更動或失連而導致無法順利查找。

啟用 Google 特定的影片搜尋功能

上一篇我們提過幾個名詞,如「影片預覽」、「重要時刻」等,這些都是 Google 為搜尋使用者提供的「摘要」,能讓人對影片有個基本認識、預先了解是否有自己想要的資訊等,和沒有摘要的影片比起來,這樣更能夠讓人想點開影片。

這些功能各有什麼效果呢?要如何才能有效顯示?

10. 影片預覽

為了讓使用者對影片有初步了解,Google 會將影片中的幾秒擷取出來當作動態預覽。只要允許 Google 擷取的影片,就能使用這項功能,也可以使用 max-video-preview  指令,來設定你希望提供預覽的時間上限喔。

11. 重要時刻

這一項功能,就像是在看書時能在目錄中看到章節的標題、在第幾頁一樣,現在 Google 也能在搜尋結果中看到,從幾分幾秒開始是怎麼樣的章節、各章節時間長度等等。

不用特別設定,系統就會自動偵測內容與分段,也可以透過提供結構化資料來自行設定每個片段開頭跟結束的時間、要放上什麼標籤。

而如果是上傳到 Youtube 的影片,只需在說明欄中標記時間、標籤,就能夠自動產生了。

12.  直播標記

有的時候你會想要透過實況的方式,和觀眾、粉絲們有最即時的互動,這時如何讓大家知道你正在直播就很重要了!

可以在結構化資料中提供你的直播預計開始時間、結束時間等資訊,如此一來當你在直播時,就能將你的實況在搜尋結果中貼上「LIVE」的紅色貼紙。

在網路上搜尋的意象圖,圖片來源:storyset.com

被判定成敏感內容怎麼辦?!

有時會發生影片被判定為內容錯誤、有較為敏感的內容或是版權問題等狀況,此時需要將影片設定為不會被搜尋到,或是排除特定地區、年齡的使用者,這是為了保護網站中的其他內容,避免被預防性歸為敏感內容,導致整個網站的曝光度都受到影響。

可參考以下方式:

13. 移除影片的搜尋結果

透過在網頁的 HTML 回傳 404 (Not found)狀態碼,或是將目標影片從索引中移除,亦可在結構化資料中指定到期日,如此一來,你的影片就不會被放在搜尋結果當中。

14. 依使用者的位置不同,顯示不同的影片搜尋結果:

在使用結構化資料描述影片時,能夠設定不同區域能見度的屬性,也可以從影片  Sitemap 的標記中設定是否要出現在特定國家、地區的搜尋結果中。

若是沒有設定的話,所有區域的使用者都能搜尋到這部影片。

15. 若有成人內容,最好針對安全搜尋進行設定:

有些使用者因年齡不足或是本身並不想看到煽情露骨內容,便會開啟安全搜尋的設定,這樣便能夠避免在 Google 搜尋結果中出現不想看到的圖片、影片和網站。

如果你的網站或影片有成人內容相關的元素,Google 會建議將其標上標記,並且要與其他全年齡向的影片有所區隔,才不會讓安全性演算法為了避免漏網之魚,而將整個網站的內容與影片都判定為敏感內容。

更多SEO或Google相關文章請點閱下方連結~

其他閱讀

SEO關鍵字研究教學1】關鍵字分類篇

SEO關鍵字研究教學2】冷門的長尾關鍵字篇

SEO關鍵字研究教學3】關鍵字挑選五步驟

網站核心指標5月將成SEO排名因素!LCP,FID,CLS詳解與優化方式

Google因為這項人工智慧技術而被多家瀏覽器抵制?()

Google將改用機器學習追蹤網頁?!這樣比較好嗎?()

SEO人員看到Google放寬這項標準後都笑了~真是這樣嗎?

讓Google輕鬆找到影片的15個SEO方法快學起來!(上)

讓Google輕鬆找到影片的15個SEO方法快學起來!(上)
讓Google輕鬆找到影片的15個SEO方法快學起來!(上)

Google更新影片SEO拉~想讓谷哥更快找到你的影片嗎?那千萬不要錯過今天為你整理的文章喔~~(上)

SEO(Search Engine Optimization),意指根據搜尋引擎的規則運作、無須付費買廣告就能自然排序在搜尋結果最前位,增加能見度的方法。當使用者主動搜尋關鍵字,通常也就代表著感興趣,而人們往往只點擊前幾項搜尋結果,因此搜尋結果第一名可以說是兵家必爭之地

每日,都有上億的網友搜尋各種與新聞、美食、娛樂等等主題的相關內容,且越來越多人喜歡透過影片來接收資訊。

比起一篇文章,影片給人的感覺更有溫度、娛樂性更高、接收訊息的門檻也更低,因此除了網站排名之外,「影片」類 SEO 的重要性可說是與日俱增。

如果希望你的影片獲得更多的聲量與關注,就需時時掌握如 Google 等主要搜尋引擎的脈動,若搜尋引擎的演算法則有更新,就會使原本的搜尋結果排名發生變化,對流量的影響不容忽視。掌握 Google 搜尋排序背後的「潛規則」,才能讓影片被演算法則所青睞!

Google 的新影片 SEO 多了哪些重點呢?我們將分成上下篇,為大家詳細介紹。

協助 Google 找到您的影片

首先最重要的就是影片本身要讓使用者好找,也要讓 Google 好找!

1. 公開影片

確保影片位於公開的網頁,而且使用者不需要經過複雜的操作,即可載入影片,這樣除了方便 Google 找到之外,也能讓使用者更簡單的觀看影片。

2. 為影片加上適當的 HTML 標籤:

一份 HTML 文件中會有許多標籤 (tag),不同的標籤表示不同語意(semantic)內容的區塊, 如果加入如 <video>、<embed>、<iframe> 或 <object> 等HTML 標籤,可以讓 Google 更輕易辨別。

3. 提交影片 Sitemap

Sitemap 常常翻譯為「網站地圖」,就像是網站的目錄,將站內所有頁面依分類呈現。而影片 Sitemap 與一般 Sitemap 一樣,只是主要索引的是影片類型的內容。可以選擇專為影片建立一個 Sitemap,也可以在現有的 Sitemap 中嵌入影片  Sitemap。

另外要特別注意的是,提交 Sitemap 前得先在「Google Search Console」中新增並驗證你的網站。

Google Search Console 示意圖
Google Search Console 示意圖。Photo by Myriam Jessier on Unsplash

我是採用第三方內嵌播放器,怎麼辦?

有些人會使用 YouTube、Vimeo 或 Facebook 等平台來存放影片,再嵌入到網站中。

如果你是使用這種方法,還是可以提供結構化資料,或將網頁放入影片 Sitemap 中,來協助 Google 瞭解影片的內容。不過,也需要留意所使用的平台是否支援 Google 。

圖片來源:Google Developers。

確保影片能編入索引

4. 提供高畫質的縮圖

一張好的影片縮圖能夠大大吸引觀眾,同樣的,高品質縮圖也能吸引到 Google 演算法。

怎麼樣能被 Google 判定為「高品質」呢?可以透過 HTML 標記、在影片 Sitemap 中指定或在結構化資料中設定;也可以允許 Google 直接擷取影片內容,讓 Google 來自動產生縮圖。

如果沒有設定好的話,即使網頁已編入索引,也只會顯示藍色字體的一般連結而已。

5. 提供結構化資料

結構化資料是用來描述影片的相關資訊,讓 Google 能了解影片相關內容並在查詢結果中展示,其中包含了說明、縮圖網址、上傳日期、重要時刻和時間長度等資訊,這些摘要都會讓搜尋結果更一目瞭然喔!

除了這幾項重點之外,還更多方法能讓你的影片 SEO 優化,我們將在下篇為大家繼續介紹!

本篇為上篇,下篇請點讓Google輕鬆找到影片的15個SEO方法快學起來!(下)

更多SEO或Google相關文章請點閱下方連結~

其他閱讀

SEO關鍵字研究教學1】關鍵字分類篇

SEO關鍵字研究教學2】冷門的長尾關鍵字篇

SEO關鍵字研究教學3】關鍵字挑選五步驟

網站核心指標5月將成SEO排名因素!LCP,FID,CLS詳解與優化方式

Google因為這項人工智慧技術而被多家瀏覽器抵制?()

Google將改用機器學習追蹤網頁?!這樣比較好嗎?()

SEO人員看到Google放寬這項標準後都笑了~真是這樣嗎?

蘋果這項最新功能遭到Facebook極力反對?!為什麼?

蘋果這項最新功能遭到Facebook極力反對?!為什麼?
蘋果這項最新功能遭到Facebook極力反對?!為什麼?

Facebook 這次公開反對蘋果最新功能—-APP追蹤透明度?!關心隱私權的你快來看看今天我們準備的文章吧!!

日前蘋果最新作業系統 iOS 14 正式上線,其中最受注目的更新莫過於「App 追蹤透明度」(App Tracking Transparency,ATT)功能,在正式上線前就引發許多討論,甚至讓另一科技巨頭 Facebook 直接公開反對。

與不斷而來的爭議不同,這項功能本身其實很單純:「實裝 App 追蹤透明度功能後,所有應用程式開發商都需要獲得用戶允許,才能追蹤用戶數據。」以使用者的立場而言,聽起來是件好事,為何會引來 Facebook 與許多廣告業者的劇烈抗議呢?

「數位隱私」成最新重要議題

過去,使用者的「數位足跡」(Digital footprint)──包含瀏覽習慣、偏好行為、停留時長、位置訊息,甚至連真實世界的年齡、性別、種族等資訊,都會在使用網際網路時被記錄下來,不知情的情況下被「出售」,供廣告商掌握後對特定使用者投放特定廣告。

而近年來,使用者於網路上的隱私問題越發受到重視,加上民眾資安意識的普及,許多人皆反對網站與 App 未經授權就取得使用者資料,甚至是賣給第三方廣告業者,謀取暴利。

輿論壓力使不少科技公司做出相應措施,如:Google 就宣布會逐漸淘汰第三方 Cookie,轉而採用其他的隱私保護技術。而蘋果選擇的方法是:將被追蹤與否的權利歸還到使用者本身!

兼顧個人隱私與用戶體驗

蘋果的每部 iOS 裝置上,都會有一個 IDFA(廣告識別碼),用以整合該裝置使用數據。廣告業者就是依此來收集、追蹤使用者的數據來進行廣告投放。

蘋果即是選擇更改 IDFA 的權限,將之交給使用者──iOS 14 要求應用程式開發者必須在追蹤、獲取使用者的 IDFA 時,要跳出詢問提示:「您允許讓我追蹤您的 IDFA 嗎?」除了之外,App Store 內的 App 也逐項列出將可能收集哪幾項使用者資料,讓「獲取用戶資料」這件事更加透明化。 

使用者可以自己決定是否要讓某一 App 追蹤自己的資料。

但對於 Facebook、Instagram 等 App來說,這就表示他們未來有可能無法在 iOS 裝置上直接收集到 IDFA,廣告的關鍵數據基本等於消失,未來將有一定數量的使用者無法被廣告商定位。這也將使 Facebook 的廣告聯播網服務「Audience Network」失去效果,大幅衝擊廣告收入。

因此,Facebook 公開登報表示:反對蘋果對 IDFA 和程式追蹤進行限制!

斷了千萬公司的財路?

Facebook 在《紐約時報》、《華盛頓郵報》和《華爾街日報》等媒體上刊登了「大字報」,標題也頗為聳動:「為了各地的小公司,我們決定站到蘋果的對立面。」表示他們要為所有中小型商家反抗蘋果。

Facebook 以報紙全版廣告批評蘋果決策。

Facebook 在文中表示,每個月都有超過千萬個小公司,會透過 Facebook 的廣告工具來獲取潛在客戶、招募員工或是觸及社群用戶。而蘋果在 iOS 上的新限制,會讓這些小公司無法精準地投放廣告,使得它們的的商業模式受到衝擊,損害中小企業的發展。

「根據 Deloitte 調查顯示,44%的中小型客戶在疫情衝擊下,開始在社群媒體上增加利用個人化廣告。」文中表示:「若沒有個人化廣告,Facebook 的數據顯示,普通小型企業花了同樣金額的廣到行銷,但銷售額減少了 60%以上。」

文末更號召廣大的商家參與活動,鼓勵大家分享 iOS 這次的更新對公司業務造成了哪些影響。

隱私是基本人權

面對這些抗議,蘋果表示:「隱私權是基本人權,也是我們的核心價值之一。你的資料,你有權選擇。」並在官方網站上發布《個人資料的一天》(A Day in the Life of Your Data)白皮書。

蘋果軟體工程副總裁 Craig Federighi 也表示:「顯然地,一些公司將竭盡所能阻止 App 追蹤透明功能。我們需要全世界看清爭論的本質——試圖厚顏無恥地維持侵犯隱私的現狀。」

蘋果在大批反對聲浪之中,依然堅持了其對數位隱私的變革,頗有「雖千萬人吾往矣」的氣魄。然而,任何革新都不是一蹴可幾的,網路時代科技巨頭之間牽一髮而動全身的局面,也讓隱私權的維護變得更加艱難。未來個人資料、隱私與商業考量之間,是否能有雙贏的解決辦法?還要繼續看下去。

更多隱私或科技相關文章請點閱下方連結~

其他閱讀

「恐怕會助長歧視」WordPress 與多家瀏覽器對 Google FLoC 喊停!

Google 為保護隱私,棄 Cookie 卻改用人工智慧?

FB 用十億張照片讓 AI「SEER」自主學習!自監督學習大躍進

Facebook 開源 Python 語言的安全與隱私工具 Pysa

人工智慧自主學習新高度!!Seer打破你的認知!!

人工智慧醫療精準預測!!老人癡呆可以開始有效預防了嗎?

人工智慧再突破~與已故親人聊天不再是夢?!

別害怕重頭學習~前端工程師等你來轉職!!

別害怕重頭學習~前端工程師等你來轉職!!
別害怕重頭學習~前端工程師等你來轉職!!

想學習前端工程師課程卻擔心沒有相關背景嗎?快來看看親身實例怎麼說吧!!

測試工程師察覺現況,決定學習網頁前端

 

【轉職前端工程師】測試工程師的微痛學習歷程,現在切版、網站開發一把罩!
 

林先生大學時就讀電子工程學系,現在是一名網頁前端工程師,在公司負責網頁前端的切版及開發。

在轉職之前,林先生的工作是科技業的測試工程師,但當時公司所有的產線、設備基本上都在大陸,且公司也在管控出差的人員。林先生察覺到這樣下去,根本學不到實際的東西,因此埋下了轉職的念頭

當時因緣際會下接觸到達內教育的「前端工程師」課程,聽完說明後理解到:這是一份包含了從入門到進階應用、從前端到後端的一條龍式課程,非常的全面,於是就決定報名了。

非本科系的微痛學習歷程

畢竟不是本科系,從未接觸過網頁開發的林先生在學習過程中,感到壓力非常大。從基礎的網頁切版到學習 Javascript 框架,並獨自一人整合網頁前後端,完成專案。雖然過程中壓力非常大,且遇到非常多不會的問題,但是當把獨立完成的網頁呈現出來時,成就感不是言語能描述的。

前端工程師經驗滿一年

林先生轉職至今,已累積了超過一年的前端工程師經歷。他說:每天都會有新的技術需要學習、新的問題需要解決。「如何調整心態,並不斷精進能力,是當前需要解決的課題。但有著在達內這段學習的歷練,相信我很快便能夠克服。」

 

 

 

更多前端工程師或程式設計相關文章請點閱下方連結!!

 

 

 

其他閱讀

Python與R語言之戰鹿死誰手?盤點5個即將消失的程式語言!

Google 在 Search Console 中啟用新的檢索統計報告

Google 12 月更新演算法!SEO今年排名最大洗牌

用說的就能寫程式!人工智慧替手傷工程師開發語音程式工具

JK羅琳就快被人工智慧取代寫出最新一集的哈利波特!?

能篩檢出視網膜病變的人工智慧眼科輔助診斷軟體終於上線!!()

中研院研發讓交通執法運用人工智慧科技讓超速一秒現行?!()

 

 

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設計大解析:UX,UI都需要研究驗證?!

UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:UX,UI都需要研究驗證?!

對UX設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!這篇要來談的是UX,UI都需要研究驗證?!

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

研究是關鍵!無論 UIUX 都需要研究驗證

UIUX 若想要盡善盡美,最重要的的就是要做各種事前研究!

無論是 UI 設計UX 設計師,都必須先做各種功課——盡可能收集資料、行為數據以研究使用者的需求,思考、分析和預測使用者在當下可能的行為、行為背後的動機以及隨之而來的體驗感受。

而研究所得的數據資料將應用在初版設計上,接著有的 UIUX 設計師會透過真人測試或使用者訪談,取得使用者最直接的回饋、觀察並記錄使用者使用產品的整個過程、發現需求並構思解決方案,以確定設計能朝著正確的方向前進。

即使無法進行真人測試,也會透過 A/B 測試、易用性測試(Usability test)等方式在開發時就先測試找出問題,進一步對設計進行修改或優化。

推薦閱讀:使用 A/B 測試來改善網站 UI 設計的 30 個例子

而這樣「研究分析、設計開發、測試反饋、修改優化」的流程會重複多次,這樣的開發法又被稱為疊代式開發。與傳統的瀑布式開發相比,疊代式開發能降低風險、提早得到使用者反饋,也具有更高的效率和成功率。

採用這種方法,可以在完全確定設計需求之前就開始進行開發,在一次疊代中先完成一部分設計,再通過使用者的回饋來細化,再開始新一輪的疊代。

對於 UI 和 UX 設計師來說,事前研究都至關重要,也都使用類似的方法,以求規劃出得宜的設計。

 

本系列文章未完,下一篇請點UX,UI設計大解析:怎麼讓UX,UI相輔相成?

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

 

 

 

其他閱讀

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

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

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

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

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

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

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

 

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

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

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

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

什麼是 UX 設計

UX 表示「使用者體驗」(User experience),顧名思義強調的是「使用者的感受」。

為了帶給人們良好的體驗,必須先進行使用者洞察、產品研究、市場趨勢研究,到建立資訊架構、規劃任務流程、繪製線框圖(Wireframe)和與 UI 設計師溝通互動設計與視覺設計間的怎麼互相調和,最後交棒給工程師。

而使用者會得到怎麼樣的體驗,取決他們如何與應用程式互動:希望體驗流暢、直觀?那導引要設計的合乎邏輯;想讓使用者覺得自己有效地完成任務、而不是在打一場戰爭?這都取決於 UX 設計師的功力。

▲ 設計思維是一種以人為本的創新方法,它汲取了設計師的靈感,將人的需求,技術的可能性以及業績成功的需求整合在一起(來源:Unsplash)

 

當然使用者介面和體驗有著相輔相成、缺一不可,因此 UX設計師會跟 UI 設計師密切合作,這也是為什麼許多人會混淆兩者。不同的是,UI 設計師的任務是確定使用者介面的外觀,而 UX 設計師負責確定使用者介面的結構、功能、操作方式和反饋體驗。

簡而言之,UX 如果設計良好、直觀又流暢,則使用者將獲得良好的體驗;反之則可能會把使用者趕跑,UX 設計師的工作就是努力避免出現第二種情況。那一個好的 UX 設計會具有哪些特色呢?

好的 UX 設計 會具有的優點:

身為 Mailchimp 使用者體驗設計總監的 Aarron Walter 在他的《為情感而設計》(Designing for Emotion)一書中,告訴讀者如何才能讓使用者愛上你的網頁、產品或應用程式。

此書中參考馬斯洛需求理論、提出「使用者需求理論」,成為 UX 設計師思考與決策的重要參考:

▲ 「使用者需求理論」金字塔從底層至頂層依序為:功能性、可靠性、實用性、趣味性

 

「使用者需求理論」金字塔從底層至頂層依序為:功能性、可靠性、實用性、趣味性。

從金字塔我們可以看出,產品所提供的「功能」是最基本需求;「可靠性」則是指在一定的條件、時間內穩定地達成使用者的需求;「實用性」表示使用者能順利透過產品完成他們的需求、並未來若有相同需求的時候,優先想到你的產品;最頂端的「趣味性」能滿足使用者的心理需求,作為與使用者的情感紐帶,讓使用者對產品產生好感與認同。

以上是 UI、UX 的差異分析與介紹,那它們兩者有什麼相同呢?又要如何才能相輔相成、成為完美的設計呢?

UX 設計人員也常會利用叠代式開發(iteration),即先製作其介面互動的線框稿,並以此獲得使用者的回饋,再將其整合到設計之中,獲得更好的版本。

 

本系列文章未完,下一篇請點UX,UI設計大解析:UX,UI都需要研究驗證?!

更多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課程找好工作:品保花了一年順利轉職程式設計師!!