- 1月 04 週二 202201:55
從哆啦A夢到 iPhone大量運用UI圓角設計,你發現了嗎(下)
- 1月 03 週一 202201:41
從哆啦A夢到 iPhone大量運用UI圓角設計,你發現了嗎(上)
從哆啦A夢到 iPhone大量運用很受歡迎的UI圓角設計,你發現了嗎?(上)
目錄
「圓角矩形」是近年盡人皆知的 UI 設計優勢，自 iPhone 4 發售至今日，到處都可以看到這個乍看簡單、但其實富有深意的幾何圖形。
然而圓角矩形何以能擄獲 Steve Jobs 以至於世人芳心呢？箇中緣由，其實也藏在哆啦 A 夢身上！
「圓角矩形」在現代 UI 中代表簡約、清爽與和平易近人。這些印象是因幾何圖形能帶給人們的心理暗示，任何圖形設計元素如形狀、線條、顏色、紋理和圖案，都能淺移默化地影響人們的感官認知，從而讓平面圖形附上不同的喻意。
乍聽之下有點形而上學，但其實我們從童年開始就不斷在接收幾何圖形的心理暗示了——許多卡通動畫中的角色，也都被賦予了「幾何暗示」！
三角形的小夫、方形的胖虎……哆啦 A 夢中的幾何暗示
陪伴許多人長大的國民作品《哆啦 A 夢》（ドラえもん），其中的主要角色個個形象鮮明、深入人心，是運用幾何圖形設計角色的好範例：
自戀愛現、在狡猾的同時又常有鬼點子的小夫，從是身形、嘴形到髮型都呈現三角形；而個性粗暴、蠻不講理，但在緊要關頭時又展現了正直的胖虎，無論臉型與身體都呈現寬大的方型。
至於個性善良溫柔、富有同情心的靜香，臉型與整題造型都較圓潤，沒有稜角；至於最備受喜愛的哆啦 A 夢，整個角色從頭到手都是圓型設計。
不只日本，歐美的畫家、藝術家、動畫師等角色設計專家們也時常以「幾何造型」為基底，藉此創造出引人入勝、個性鮮明的角色，足見一個好的幾何設計所具有的優勢。
以下影片為藝術家實際示範如何以基礎的圓型、三角形與方形設計角色形象：
卡通之外 賈伯斯也瘋狂的圓角設計
不只卡通動漫畫之外，許多商業產品也為了讓客戶留下良好的第一印象，採用親民的圓角設計。
話說從頭，要談圓角矩型，就不得不談它成為設計趨勢的轉折點——iPhone 的發布。Steve Jobs 認為：所有物件都有圓角，而且相較於圓形與橢圓形，圓角矩形設計在生活中其實更為常見。
如以下影片所示，2020 年發售的 iPhone SE 依然保留標誌性的圓角設計：
1981 年，Steve Jobs 要求當時任職蘋果的電腦工程師 Bill Atkinson 設計出可以快速畫出圓角矩形的方法。當時已能快速繪製出長方形、圓形與橢圓形的 Bill當下便反駁：「圓角的矩形很難用電腦技術畫出來，而且又不必要！」
Steve Jobs 二話不說便把 Bill 從座位上拉起來，指著房間內的白板、桌椅等所有圓角矩型的物品。更帶著他出門上街，指出大街小巷每個小角落的圓角矩形給他看：「你看，到處都有圓角矩形！」
最後，在一個「禁止停車」的圓角矩形路標牌被指出來後，Bill 認輸了。「好啦，我放棄。我回去看看是不是真的跟我想像的一樣困難。」
隔天下午，Bill 就研究出快速繪製圓角矩形的方法。如今在 iOS 系統裡，這個幾何圖形已經成為其 UI 介面傳承的一部分。
下篇請看此連結
相關文章:
改變 UI 竟能增進友情、UX 讓麵包烤更香？Netflix 紀錄片揭露設計師巧思
2021年最好用的12個UI/UX設計工具，網頁設計都該試試看
介面、體驗大不同！UI設計/UX設計工作內容完整剖析
疫情加速電商衝擊店面！富比士:2021年5大UI/UX設計趨勢
人工智慧無接觸經濟夯,保護金融資安不費力(下)
人工智慧醫療再突破!AI內視鏡測腸癌靈敏度99.7%!
是日救星!谷歌地圖用人工智慧規劃"最省油路線"
- 9月 13 週一 202120:54
富比士:2021年5大UI/UX設計趨勢(下)
2021年5大UI/UX設計趨勢,富比世發表了(下)
- 9月 10 週五 202120:04
富比士:2021年5大UI/UX設計趨勢(上)
2021年5大UI/UX設計趨勢,富比世發表了(上)
目錄
美國最具指標性的財經商業雜誌「《富比士》（Forbes）」，近期竟跨領域地提出 2021 年UI/UX 設計的5大趨勢！
《富比士》所屬之「富比士機構委員會（Forbes Agency Council）」的其中一個成員、也是「數位比佛利行銷策略公司（Digital Beverly Marketing Solutions）」的CEO Oganes Vagramovich Barsegyan就提出了5個今年掀起熱潮的 UI/UX 設計趨勢。
電商取代實體商店成主流 UI設計重要性堪比店面裝潢
全球發生在線上的交易活動早在激增中，加上新冠（COVID-19）疫情讓民眾在家中使用手機、iPad、電腦等進入電商消費的模式，已取代以往的實體門市。消費者們已融入數位服務的生活，習慣、行為已有大大的改變。
如今網站上的UI（使用者介面）設計，就相當於實體店面的裝潢，且比以往更加重視美感。UI介面設計的變化以下五個 UI/UX 設計趨勢觀點：
一、玻璃擬態（Glassmorphism）的 UI 設計
UI/UX 普遍正朝著極簡主義美學，玻璃擬態長期保持領先的流行趨勢，從配圖到整個操作流程的介面、按鈕使用同一種色系，以不同層次結構和深度的呈現，顯得不會單調枯燥。網站避免繁雜的資訊或低解析度照片，保持觀看者能清楚閱讀，增加停留在網站上的時間。
如以下影片所示，玻璃擬態主要基於背景模糊與磨砂的效果，營造出漂浮在空間中的穿透、朦朧感。比如：蘋果與高盛銀行共同發行信用卡「Apple Card」 科技、時尚的設計，出於玻璃擬態的概念，視覺宛如漂浮在半空中的透明卡片，隨著消費類別改變不同柔和的顏色。
二、耳目一新的大膽字體（Big Loud Typography）
重複無奇的排版文字會產生視覺疲乏，需要產生亮點為觀看者帶來視覺刺激。敢於大膽破格的用字，凸顯出設計師是否有獨特的思維，更容易受到關注。不同的字體造型，產生不同的情緒與印象，即使是誇張或用於開箱文的標題，搭配合適的UI/UX設計，令人感到新穎不失傳統的美感。
大膽的字體風格是吸引網站訪客的必要條件，視覺上不是要呈現對人大吼大叫般的緊張感，比較像是微妙的語氣說道「看這裡」。此外，可嘗試在同標題中組合不同的字體，兼具可讀性與可視性的特點。
三、有別於傳統的抽象幾何（Abstract-geometric）
具有線條、形狀和角度的抽象藝術歷久不衰，現今煥然一新仍是受到關注，歸功於形狀和顏色兩者結合在一起表達想法，並以自由流動、非線性的方式表達創作。
許多企業喜歡抽象和幾何藝術，因為化繁為簡，具有簡練、醒目、形式感強的UI/UX視覺特點。增加鮮明高對比的顏色，創建富有表現力的外觀，而不會分散用戶的注意力。獨特創新的融合於畫面並不拘一格，體現出商業中的樂趣。
比如：試著使用抽象幾何地圖的設計，取代網站上的傳統地圖，觀看者肯定會記住您的位置。
下篇請看此連結
相關文章:
隱私是基本人權！蘋果新功能「App 追蹤透明度」
Google 加強隱私，讓你快速刪除15 分鐘內搜尋紀錄
Google 為保護隱私，棄Cookie 卻改用人工智慧？
Facebook 開源Python 語言的安全與隱私工具Pysa
SEO新訓-谷歌正按設備類型進行軟404檢測
新網頁SEO需要多久時間?谷歌:數小時到數週
UI/UX 按鈕設計基本7招式,優化電商轉換率(上)
- 9月 09 週四 202121:02
UI/UX 按鈕設計基本7招式,優化電商轉換率(下)
- 8月 31 週二 202120:28
UI/UX 按鈕設計基本7招式,優化電商轉換率(上)
按鈕在網站上出現的頻率是相當高的，猶如實體店面的動線，協助顧客快速找到目標。隨著線上的商業發展蓬勃，網站設計上開始重視使用者觀看版面的體驗（UX），如何透由按鈕的佈局轉換為交易，並進一步提升營收。
雖然現今的網站美輪美奐，還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design，簡稱 RWD）的普遍，改善同時在手機、iPad與電腦不同裝置顯示問題，在版面中搭建使用者與系統之間的互動操作流程，仍不能缺少按鈕作為基礎視覺元素。
按鈕的設計不只是簡單的一個圖示，任何讓我們感到舒適方便的操作，都是有規律可循的。UI/UX 設計過程嘗試揣摩使用者心理，加入外觀美學、色彩學等知識創建而成，分成以下7個基本要點說明：
1. 互動式的按鈕設計
建立按鈕需要使用正確的樣式，依照按鈕產生的狀態設計不同外觀，包含：大小、形狀、顏色、陰影等因素組成，再搭配上合適的字體與間距，藉由簡單的觸控、按下去即可達到目的，讓人享受到即時的強烈滿足感。
線上虛擬按鈕的視覺性，來自接觸實體按鈕的體驗和認知根深蒂固，UX 使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。
以下是大多數用戶熟悉的幾個按鈕示例：
除了容易點選的按鈕樣式，保持與周遭文字適當的留白避免視覺干擾。
2. 方便搜尋版面上的按鈕位置
使用者閱讀內容的同時，會搜尋版面可點選的功能按鈕，比如：下一頁、產品介紹等，如果使用者在視覺上尋找的時間愈久，若找不到按鈕，便不會知道它的的存在，愈容易感到網站不好使用。
為了和使用者不要玩追逐按鈕的遊戲，因此使用一致性的排版設計，便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局，足夠的留白與簡潔使版面不會太擁擠，即使不是強烈鮮明的按鈕，依然隨著閱讀動線吸引使用者輕鬆的點選。
3. 指令清楚的按鈕標示與說明
帶有誤導性資訊的按鈕標示，容易讓使用者感到迷惑。設計標示按鈕文字時，為了傳達出每個按鈕的作用，便需要簡短、有邏輯且適當的文字，讓使用者清楚了解點選按鈕後的結果，盡快獲得自己想要的內容，太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠。
比如下列案例
不明白此對話框中的“確定”和“取消”代表什麼。大多數使用者只會疑惑“當我點選‘取消’會發生什麼事？”
與其按鈕標示“OK”，不如使用“Remove”，清楚的表達按下去後會發生的事情。如果“刪除”是一個潛在的危險操作，可以使用強烈的顏色來提醒。
4. 符合使用者習慣的尺寸大小
按鈕圖示讓 UI 觸控尺寸大於可視尺寸，確保互動可靠性，按下按鈕應該是一個簡單的任務，如果使用者無法成功地輕點按鈕，或在操作過程中感到無所適從，這會帶來負面的體驗，並且浪費時間。
按鈕的大小反應著在屏幕上優先順序，愈是優先的重點便會是愈大的按鈕表示，或是使用鮮明的對比色來凸顯，增加使用者的注意力。而在操作 UI 使用者介面過程中，按鈕需考慮對使用者觸控的友好度，按鈕太小，往往導致會有輸入錯誤的情況發生。
麻省理工學院觸控實驗室的研究發現，指尖的平均值在 10-14 mm之間，指尖為 8-10 mm。這使得 10mm x 10mm 成為合適的最小觸控尺寸。
下篇請看此連結
相關文章:
隱私是基本人權！蘋果新功能「App 追蹤透明度」
Google 加強隱私，讓你快速刪除15 分鐘內搜尋紀錄
Google 為保護隱私，棄Cookie 卻改用人工智慧？
Facebook 開源Python 語言的安全與隱私工具Pysa
人工智慧也有喜怒哀樂啦!
人類又輸了?人工智慧設計IC晶片6小時就搞定！
AI打造史上最難羅斯方塊!等高手破解!
- 9月 03 週四 202021:38
UI/UX 設計工作細節剖析5-如何相得益彰
UI/UX 設計工作細節剖析,本篇:5-如何相得益彰
- 9月 02 週三 202021:37
UI/UX 設計工作細節剖析4-皆需研究驗證
- 9月 01 週二 202021:35
UI/UX 設計工作細節剖析3-UX設計的優點
- 8月 31 週一 202021:32
UI/UX 設計工作細節剖析2-UI設計的優點
