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 課程找好工作 : 品保花了一年順利轉職程式設計師 !!
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
UX設計, UI 設計 懶人包讓你第一次接觸就上手!!概念不再霧煞煞!!第一篇就來告訴你UX,UI到底哪裡不一樣!! 本篇為【UX,UI設計懶人包 】系列的第 1 篇，完整連結如下： UX,UI設計懶人包:UX,UI到底哪裡不一樣?! UX,UI設計懶人包:UI設計的優點是什麼?! UX,UI設計懶人包:UX設計的優點是什麼?! UX,UI設計懶人包:UX,UI都要研究驗證?! UX,UI設計懶人包:如何讓UX,UI搭配得宜再加分? UI vs. UX 設計 - 為什麼容易搞混？
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
對UI 設計 有興趣嗎?那就快以此培養自己的第二專長吧!!當個有為的斜槓人!!
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
要怎麼樣才能讓 UI 設計 本篇為第 4 篇，第 3 篇請點此 30個範例清楚示範A/B測試如何改善網頁的UI設計!!(3) 範例24：嘗試銷售「好處」而不是功能 克里斯‧古利博（Chris Guillebeau）在《100美元創業》（The $100 Startup）一書中寫道，人們真的很在乎愛情、金錢和自由，也希望同時能減少壓力、衝突和麻煩。 人們在挑選產品時，考慮的點除了性能外，更在乎這個產品能如何帶給他們好處 －－ 例如若能同時幫他省錢又省力就太好了。而這就是產品能帶給顧客的價值所在，也是他們會掏錢的關鍵。所以網頁的說明別只向顧客說明產品或服務內容，說明能為顧客帶來哪些好處吧！ 範例25：謹慎設計「沒有符合的產品」的網頁 如何在網頁上呈現數據是一套學問，只是許多 UI 設計 擅長表現 1000 個以上的數據，結果卻忽略了「零數據」的情況－－當使用者想搜尋符合特定條件的商品未果時，跳出的「搜尋到 0 個商品」。或者另一個情況：當初使用者查看您的網頁時，在沒有任何引導的情況下操作，導致顯示 0 數據，這會有讓使用者感覺被忽略的風險。 此時，有 sense 的 UI 設計 師會使用「網頁使用教學」或提示來取代冰冷的「搜尋到 0 個商品」頁面，讓使用者感受這個網頁是有人性的，營造暖心的 UX 使用者體驗！ 推薦閱讀：改變 UI/UX 竟讓友情加溫、麵包烤更香！Netflix 紀錄片揭露設計師巧思
範例26：讓使用者能選擇「不參加」 傳統行銷策略上，會只有一個寫著「我想要...」的方框（check box）以供勾選，若不想參加則可以不勾選。某些粗魯的行銷手段甚至會預設設為勾選，常讓使用者一不留意就「被答應」了 。 更好的做法是將正反向的選擇各放一個方框，告訴使用者「你可以要也可以不要」，然後再替使用者默選其中一項。 因為此舉可以減緩當使用者不想參與時的牴觸感，亦可可讓使用者潛意識產生「所有人都照原樣進行，那我也這樣做吧」的想法，進而讓我們的目的更容易達到，還不會引使用者的反感。畢竟行銷道德也會影響使用者對品牌的評價。 範例27：保持一致性，避免使用者重新學習 世紀最有影響力之一的設計師唐．諾曼在《設計的心理學》中闡述，產品設計的最終目的，是為了讓產品符合使用者的預期。這個概念也是人因工程的核心概念之一，也就是「一致性」。維持「一致性」的產品易學易用、錯誤較少，可以減少心智工作的負荷，可以說是人人都期望中的產品。 而網頁的一致性同樣能幫助使用者容易學習，若破壞一致性原則，使用者就得重新學習一次。在介面上，一致性可藉由如顏色、形狀、大小、標記或語言等方式完成。 不過，當有需凸顯的內容時，依然可以使用「不一致」的元素吸引使用者注意。 範例28：善用「自動填入」以避免使用者重複操作 從 UX 使用者體驗與轉換率的角度來看，最糟糕的事莫過於一遍遍地詢問人們已經提供的資料。提供預設值或自動填入之前填過的資料，再讓使用者檢查正確性，都比每次要他們重新輸入來的好。 盡量減少使用者的操作流程並節省他們的時間，絕對是有益處的。 範例29： UI 設計 應要保留大多數人都習慣的操作方式 同樣是基於「一致性」原理，維持常見的操作習慣也是很重要的。如果在整個 UI 介面上保持慣常的操作模式，使用者自然不會遇到太困難的阻礙。如圖例，人們已經習慣在介面右上角會有表示關閉的「X」圖示，就如呼吸般自然。 當然，新的操作模式也許可以帶來耳目一新的感覺，但在推翻傳統，必須謹慎思索改革的目的與成效。 範例30：「做了能避免⋯⋯」的行動呼籲內容比「做了能得到⋯⋯」更好 損失規避理論（Loss aversion）指出，當人們面對同樣數量的收益和損失時，會認為損失更令他們難以忍受。也就是說，人們當然喜歡獲得，但更討厭失去！ 這個理論可以套用在產品設計和使用者溝通。例如若產品的目的是保護客戶現有的財富或安全等等，比起推銷客戶還未擁有的東西更能說服客戶購買。 在上圖的網站 UI 設計 A/B 測試中，左側的行動呼籲是「請這樣做，以免失去你的健康、財富或朋友」；右側的則是「請這樣做，就可以增加你的健康、財富或朋友」。左側的「恐嚇式描述」會讓人聯想到事情發生時（如失去財富等）的嚴重性，就按下「Do This」按鈕以先預防，因此比起右側的敘述更有「讓人不敢拒絕」的說服力。 更多關於UI或其他類型文章請點閱下方連結~ 其他閱讀 特效不夠 AI 來湊！迪士尼換臉技術達百萬畫素 Google Analytics 「工作階段」定義與範例一次解析！ 亞馬遜人工智慧出包 搞混國會議員與罪犯 人工智慧再突破！史上最強解馬賽克技術 64 倍解析度還原成無碼 為何各個 UI 設計師都愛用圓角矩形 ? 真的有比較好 ?( 上 ) 考取 APCS 認證非知不可的攻略秘笈就看這篇 !!( 上 ) 人工智慧也會騎重機飆車 ?! 頂尖車手擔憂快失業 !!
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
要怎麼樣才能讓 UI 設計
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
要怎麼樣才能讓 UI 設計 本篇為第 2 篇，第 1 篇請點此 30個範例清楚示範A/B測試如何改善網頁的UI設計!!(1) 範例9：清楚描述 TA (目標客群)，而不是宣稱「適合所有人」 網站是瞄準特定族群還是面向普羅大眾？即使鎖定客群的策略有風險，讓網站在短期內失去一些潛在客戶，但誠實與公開透明才是與消費者信任的基礎。 網站清楚描述產品或服務的目標族群畫面，可以讓網站吸引到相似特質的使用者，同時透露出的「排他性」會讓使用者感到自己是被重視的，並建立出親近感。 範例10：不會有人被優柔寡斷吸引，多使用肯定語氣吧！ 當你收到一封語句充滿「也許、可能、說不定」的信件，以及收到一封肯定且充滿信心語句的信件，哪個寄件人會讓你覺得比較能信任？相信大部分的人都會認為答案明確的信能讓人安心吧！ 優柔寡斷會降低信任感，如果網頁上常使用問句或不確定性的字詞，例如：有興趣嗎？想購買嗎？會讓消費者覺得你對產品或服務信心不足，這時候可以使用更具權威性、專業性的語句，像是如何帶給顧客良好的產品或最佳的 UX 使用者體驗。 範例11：善用色彩對比度來凸顯號召性用語 醒目的行動呼籲性（CTA，Call-to-action）可以使你的 UI 介面更加強大。有多種方式能輕鬆提高 CTA：如透過深淺色調、陰影、漸層或對比色的手法來增加畫面上的對比性，提升被使用者注意到的機會。 範例12：標示出產品的原產地 為產品添加名稱、圖片與原產地標示都展現出獨特性方法。特別是提到國家、地區或城市，因為這正如人們自我介紹來自哪裡一樣，是一個非常人性化的交流方式，也會顯得更加友善。 另外，說明原產地故事也能讓產品與產地名聲達到雙贏。 範例13：別讓使用者填太長的表單 人類天生就牴觸勞動密集的行為，這個理論同樣適用於讓顧客填寫表單，每多一個表格就增加使訪客轉身放棄的風險！並不是每個人都能飛快地打字，更別說在移動裝置上打字仍然不輕鬆。檢視是否每個表格都有必要回答，並盡可能減少表格數量。 如果必填欄位真的為數眾多，可以嘗試讓最重要的資訊先讓使用者填寫完，提交後再出現一個單獨的頁面，請使用者繼續填寫第二重要的資訊。 範例14：別隱藏頁面上的選項，大方展現吧！ 下拉式選單的優點在於可以增加頁面的空間，若是要選擇可預期、已熟悉或高度重複操作的項目（如：生日、日期或地區）那使用下拉式選單是個不錯的策略。 但對於使用者來說，下拉式選單隱藏了一組他們要努力去發現的選項。這些選項若是跟產品有關，而且是交易流程中必經的，那你可以考慮不要隱藏這些選項，這樣可以提升網頁著轉換率 範例15：別讓使用者覺得已經「滑到最底了」 長型的一頁式網站是趨勢，但若是 UI 設計 不良、看到一半就讓使用者誤以為「已經滑到最底了」，這可是會大幅扼殺轉換率的。 UI 設計 師可以建立一種固定的視覺模式或節奏，例如圖標或是小動畫，來引導使用者「網頁還沒看完，下面還有內容」。設計時也需注意欄位之間留白區域的尺寸：過大的空隙會讓人誤以為已經沒有內容了。範例16：保持焦點，不要用連結淹沒使用者 為了滿足使用者可能的所有需求，有的網頁會在上下左右都貼上「連結」，但其實每多安插一個的連結（例如：「按這裡以了解更多」），就會增添讓使用者分心的風險，讓他們沒辦法滑到最後、看到你的 CTA（行動呼籲）。 附上連結不是錯誤，只是數量與位置都要妥善規劃。減少多餘的連結，可增加讓使用者注意到頁尾 CTA（行動呼籲）的機會。 本篇為第 2 篇，第 3 篇請點此 30個範例清楚示範A/B測試如何改善網頁的UI設計!!(3) 更多關於UI或其他類型文章請點閱下方連結~ 其他閱讀 特效不夠 AI 來湊！迪士尼換臉技術達百萬畫素 Google Analytics 「工作階段」定義與範例一次解析！ 亞馬遜人工智慧出包 搞混國會議員與罪犯 人工智慧再突破！史上最強解馬賽克技術 64 倍解析度還原成無碼 為何各個 UI 設計師都愛用圓角矩形 ? 真的有比較好 ?( 上 ) 考取 APCS 認證非知不可的攻略秘笈就看這篇 !!( 上 ) 人工智慧也會騎重機飆車 ?! 頂尖車手擔憂快失業 !!
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
要怎麼樣才能讓 UI 設計 UI 設計 的知識網站「GoodUI.org」整理分享了許多已經 A/B 測試的 UI 設計 ，先幫忙把常見的網頁排版都測完，幫助 UI 設計 師/網頁設計師們省下許多功夫！什麼是A/B測試 A/B 測試（A/B Test）運用了統計學的原理，顧名思義就是眼前有「A 版」與「B 版」兩種方法，為了測試哪種方法能獲得更好的市場反應，將 2 種版本同時上線，將消費者導入 A 或 B 版網頁做測試。 A/B 測試的優點在於可以得到實際的數據，而非依靠主觀意見來決定網站的架構與UI 設計 ，也能不落傳統思維的俗套。只是各個版本需運行一段時間，待累積足夠的數據，才能確保測試的準確性，也需耗費不少成本。 範例1：嘗試使用單欄排版取代多欄 多欄式排版的 UI 設計 有分散頁面焦點的風險，而單欄式排版可以更好地安排內文敘述，同時從上而到下引導讀者的視覺動線也更加直覺，也能避免於閱覽者分心。最後可以安排醒目、富有號召力的內容做結尾。 範例2：在行動呼籲前先給予誘因 在 UI 排版上，先給予像是「送禮」等誘因，是一種基於互惠原則的有效說服策略，同時也是能優化 UX 使用者體驗、改變顧客想法的最簡單方式。即使聽起來似乎很理所當然，但嘗試表現出友善的態度，如一封感謝信、小紀念品等，也能讓網站受眾的 UX 體驗更佳。這個微小的 UI 調整，也許會在未來帶來出乎意料的好處。 範例3：嘗試合併類似功能的欄位，避免版面破碎化 範例4：讓社群證明價值，不要自吹自擂 社群的廣泛好評對於提高轉化率是很好的說服策略，當客戶看到其他用戶支持並討論您的產品服務，會增進他們想深入了解的動機。 嘗試蒐集過往客戶的推薦文、滿意度證明或各種可以佐證的數據證明，並放在網頁上吧！ 範例5：不要害怕重複顯示引導指示，只要放在不同位置就好 在跨度大或多分頁的網站中，重複出現讓使用者點擊的行動呼籲是可行的，但當然不是指讓「購買」等按鈕在同一畫面重複顯示10次，這麼做肯定會惹惱使用者……。 重點在於合理規劃欄位分配，因長長的一頁式網頁已相當能被大眾接受，不需像過去一樣，把所有網頁元素都壓縮在一個螢幕大小。所以在一頁式網頁的最上方設置一個適中的點擊按鈕、最下方放置一個醒目的點擊按鈕，也是符合UX使用者體驗的原則。 根據 A/B 測試出來的使用者習慣，當使用者「滑」網頁到最底時，看到可點擊的按鍵，他們會停下來思考接下來要做什麼 —— 例如點下那個「購買」鍵。 範例6：讓「可點擊」和「可選擇」的外觀有差異 為了清楚的引導訪客使用網站介面，UI 設計 師要明顯區分出「可點擊」（如連結或按鍵）、「可選擇」（如選單）和純文字的樣式，不只在設計上要有所區別，同時上方描述文字也必須簡潔清楚。可以利用視覺元素，例如：顏色、深淺和對比度等，來達到又美觀又可以區分的效用。 例如以圖例來看，設計師選擇「藍色」做為網站上可點擊按鍵的色調，而選擇「黑色」為當前所在頁面的名稱。簡明扼要的顏色應用就能達到不言而喻的效果。最重要的是：千萬別使用過多的顏色混淆使用者。 推薦閱讀：為落實“數位優先”的UI設計...Audi,福斯竟將LOGO壓扁了!
範例7：突顯最推薦的項目，避免讓所有項目都看起來相同 有心理學研究表示，當人們眼前的選擇越多，反而會陷入一種「分析癱瘓」的狀態，導致從選擇中挑選的機率越低。 UI 設計 師為了避免這個困境，比起單純陳列所有的項目，強調突出最主要的商品或服務是更好的做法。推薦閱讀：UI設計師的配色攻略：5個黑色的設計意義/用法
範例8：讓使用者主動選擇「復原」，而不是重複詢問意圖 想像一下，當按下按鍵或連結，網頁可能會出現兩種提示：第一種是在介面底部出現「復原」（undo）鍵，讓你回復至上一步；另一種則是跳出視窗要你「確認即將要進行的操作，確認後無法復原」。這兩者會帶給消費者什麼不同的使用者體驗 （UX）？ 跳出視窗要你「確認自己在做什麼」會讓使用者覺得備受質疑，而「復原」提供使用者就算操作錯誤也可以回復到上一步的功能，則會讓人感到友善、包容與尊重。 另外，若使用者需重複的進行某項操作，網頁不斷跳出提示視窗，也讓使用者感到操作效率低下，產生不佳的 UX 體驗。 本篇為第 1 篇，第 2 篇請點此 30個範例清楚示範A/B測試如何改善網頁的UI設計!!(2) 更多關於UI或其他類型文章請點閱下方連結~ 其他閱讀 特效不夠 AI 來湊！迪士尼換臉技術達百萬畫素 Google Analytics 「工作階段」定義與範例一次解析！ 亞馬遜人工智慧出包 搞混國會議員與罪犯 人工智慧再突破！史上最強解馬賽克技術 64 倍解析度還原成無碼 為何各個 UI 設計師都愛用圓角矩形 ? 真的有比較好 ?( 上 ) 考取 APCS 認證非知不可的攻略秘笈就看這篇 !!( 上 ) 人工智慧也會騎重機飆車 ?! 頂尖車手擔憂快失業 !!
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
在UI設計領域裡常見的圓角矩形設計你一定見過~但你知道設計背後的涵義嗎?還不知道的同學一起來看看吧!!(下) 本篇為上篇，下篇請點此 有圓角才是好UI?!其實圓角設計的背後含意是....(上) 1. 認知負荷論（cognitive load theory） 認知負荷理論是由澳大利亞新南威爾士大學的認知心理學家 John Sweller 於1988 年提出，他假設人類的認知結構由工作記憶和長時記憶組成。其中工作記憶也可稱為短時記憶，容量十分有限，一次只能記下 5～9 條簡單的訊息。 著有《視知覺》（Visual Perception）的瑞士物理學家、藝術家 Jürg Nänni 也曾提出：視網膜中區處理「正圓形」是最快速的，而處理多稜角的形狀則較吃力，速度也較慢。 結合以上理論我們可以得知：「圓角」更容易被大腦處理，因為它能夠降低大腦的認知負荷，也有利於在同樣時間內接受更多資訊。故比起一般的矩形，人類的大腦更願意接納圓潤的圓角矩型。 2. 視覺動線論 視覺動線是指在讀取眼前資訊時，視覺移動時所構成的方向路徑。這表示視覺動線決定了設計的焦點所在、擺放的位置與順序。 人眼在擷取資訊時，通常不一定會意識到有視覺動線隱藏其中，但眼睛卻會自然而然地依照視覺動線的設計來移動。 而圓角的「曲線」能自然地、圓滑地帶動一般人的視覺動線，而不會感到突兀與刺眼。 3. 曲線偏坦論（Contour Bias） 以演化心理學的觀點來看，人在面臨可能造成危害的事物時，會湧現出恐懼、不安與抗拒的情緒，這是人類經歷長時間的演化後遺傳下來的「適應體」，目的是幫助我們存活，提高生存機會。 除了心理學，腦科學也指出當面對尖銳的物體時，大腦的杏仁核活性會增強。杏仁核是邊緣系統的皮質下中樞，有產生情緒的功能，能產生恐懼記憶並引發應急反應，讓身體能逃離危險。 所以，人類對於形狀銳利的物品往往有先天的排斥，如會連想到尖銳物的方角矩型；對於有曲線的圓融物體則會有較高的接納度，讓圓角矩型不被人腦淺意識抗拒。 圓角不是萬靈丹 善用不濫用才是好的 UI 我們已經知道了圓角佔有許多先天優勢，但並非一股腦地選擇圓角就是正確答案。 在 UI 設計的領域，需要考量的有品牌識別、選用字體、色彩配置以及邊緣線條的採用等等，今天企業若要一切都端正穩重，那圓角就不一定是最佳解答；並且若是矯枉過正，使用弧度過大的圓角可能會看起來不專業，造成反效果。 UI 師能塑造出怎麼樣的品牌視覺，背後有許多的「眉眉角角」，需要不斷吸收新知、訓練思考，長時間累積自我的美學素養。更多UI或其他程式語言相關文章請點下方連結!! 其他閱讀 AI 人工智慧救地球！ Google ： AI 保護環境還比人類快 3000 倍 CSS 教學 -display 與 visible 屬性介紹 用 Python 寫出唐鳳「番茄鐘工作法」程式，讓 AI 幫你集中注意力 ! AI 機器狗 Aibo 成最新愛寵 真狗會被取代嗎？ 新式身分證今年要登場啦 !UI 人快來看看有何設計要點吧 !( 上 ) 不懂網站前端在做甚麼 ? 零基礎學員非讀這篇不可 !! 人工智慧狗狗 Aibo 超擬真 !! 真狗要被取代了嗎 ?( 上 )
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
在UI設計領域裡常見的圓角矩形設計你一定見過~但你知道設計背後的涵義嗎?還不知道的同學一起來看看吧!!(上) 「圓角矩形」是近年盡人皆知的 UI 設計優勢，自 iPhone 4 發售至今日，到處都可以看到這個乍看簡單、但其實富有深意的幾何圖形。 然而圓角矩形何以能擄獲 Steve Jobs 以至於世人芳心呢？箇中緣由，其實也藏在哆啦 A 夢身上！ 「圓角矩形」在現代 UI 中代表簡約、清爽與和平易近人。這些印象是因幾何圖形能帶給人們的心理暗示，任何圖形設計元素如形狀、線條、顏色、紋理和圖案，都能淺移默化地影響人們的感官認知，從而讓平面圖形附上不同的喻意。 乍聽之下有點形而上學，但其實我們從童年開始就不斷在接收幾何圖形的心理暗示了——許多卡通動畫中的角色，也都被賦予了「幾何暗示」！ 三角形的小夫、方形的胖虎……哆啦 A 夢中的幾何暗示 ▲ 哆啦 A 夢中的五個角色造型都跟個性息息相關（圖片取自 flickr）
陪伴許多人長大的國民作品《哆啦 A 夢》（ドラえもん），其中的主要角色個個形象鮮明、深入人心，是運用幾何圖形設計角色的好範例： 自戀愛現、在狡猾的同時又常有鬼點子的小夫，從是身形、嘴形到髮型都呈現三角形；而個性粗暴、蠻不講理，但在緊要關頭時又展現了正直的胖虎，無論臉型與身體都呈現寬大的方型。 至於個性善良溫柔、富有同情心的靜香，臉型與整題造型都較圓潤，沒有稜角；至於最備受喜愛的哆啦 A 夢，整個角色從頭到手都是圓型設計。 VIDEO ▲藝術家實際示範如何以基礎的圓型、三角形與方形設計角色形象。 不只日本，歐美的畫家、藝術家、動畫師等角色設計專家們也時常以「幾何造型」為基底，藉此創造出引人入勝、個性鮮明的角色，足見一個好的幾何設計所具有的優勢。 卡通之外 賈伯斯也瘋狂的圓角設計 不只卡通動漫畫之外，許多商業產品也為了讓客戶留下良好的第一印象，採用親民的圓角設計。 話說從頭，要談圓角矩型，就不得不談它成為設計趨勢的轉折點——iPhone 的發布。Steve Jobs 認為：所有物件都有圓角，而且相較於圓形與橢圓形，圓角矩形設計在生活中其實更為常見。 VIDEO ▲ 2020 年發售的 iPhone SE 依然保留標誌性的圓角設計。 1981 年，Steve Jobs 要求當時任職蘋果的電腦工程師 Bill Atkinson 設計出可以快速畫出圓角矩形的方法。當時已能快速繪製出長方形、圓形與橢圓形的 Bill當下便反駁：「圓角的矩形很難用電腦技術畫出來，而且又不必要！」 Steve Jobs 二話不說便把 Bill 從座位上拉起來，指著房間內的白板、桌椅等所有圓角矩型的物品。更帶著他出門上街，指出大街小巷每個小角落的圓角矩形給他看：「你看，到處都有圓角矩形！」 最後，在一個「禁止停車」的圓角矩形路標牌被指出來後，Bill 認輸了。「好啦，我放棄。我回去看看是不是真的跟我想像的一樣困難。」 隔天下午，Bill 就研究出快速繪製圓角矩形的方法。如今在 iOS 系統裡，這個幾何圖形已經成為其 UI 介面傳承的一部分。 不只是「好看」 圓角設計的背後深意 近年 3C 產品硬體設計上都大量使用圓角，UI 介面設計也順其自然地大量採用圓角。除了是為了要「跟上潮流」，圓潤的造型也的確讓產品設計加分。舉凡服務性產品、企業官網、社群媒體、網路商店等，需要 UI 介面的地方全都導入圓角設計。但是圓角「好看」的背後，到底是什麼原因？ 人們為何會熱愛圓角的科學根據尚未定論，大致有以下三種說法：
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
今天要來跟大家介紹新式身分證的UI設計~快一起來看看有甚麼亮點吧!!(下) 本篇為下篇，上篇請點此 UI學員看過來!即將登場的新式身分證有甚麼特別的呢!(上) 卡面設計簡約質感，劃出你的隱私空間 新式身分證除了極簡風的 UI 介面之外，到底還有哪些亮點呢? 翻翻我們手中的現有身分證吧！現有的卡面樣式是 14 年前的設計，在今日文武百業都數位化的時代，早已不敷現況使用。政府為展現數位化決心、並因應逐日被重視的個資隱私，卡面與功能都已大幅變化，讓我們逐一細說如下： 一、隱私保護升級、遺失也不怕洩個資 除充滿質感的外觀，資訊呈現上也做不少調整。伴隨著個資保護意識抬頭，新版 ID 的 UI 介面一改過去拿出身分證便個資全都露的尷尬感，將大多數的個人資訊儲於晶片內。 新式 ID 僅保留個人基本資料：姓名、身分證字號、出生日、人像等，至於其他更私密的資訊如父母姓名、出生地等，都於晶片內加密保護，且需經本人同意、輸入身分證後 6 碼及自訂的 2 組密碼後，機關才能讀取資料。 萬一不小心遺失身分證，更可直撥「1996」專線掛失，自然人憑證就立即停用！失主也可申請紙本臨時證明，供掛失補辦期間使用。 而原有的身分證因為有密碼保護機制，所以毋需擔心晶片內容被讀取、盜用； 而晶片則是封裝後無法再取出、無法被側錄或複製偽造。 除此之外，數位身分證沒有儲存的功能，所以使用時不會留下紀錄，避免被第三方監控，真正保障各資安全。 二、兼具駕照健保卡功能，還可綁定手機！ 今年 10 月後，若數位身份證執行狀況順利的話，政府將進入開發「行動身分證 APP」的階段，並將身份證與健保卡、駕照等證件「多卡合一」！如此一來，出門就真的不用帶一堆證件在身上，無論是要看病、驗車、遇到警察臨檢等等，只需一機在手便可搞定要各項大小事！ 三、辦事不用往外跑，數位 ID 網上搞定！ 身分證數位化的最大特點就是，任何需要證件才能辦理的業務，也都同步數位化，能在線上直接辦理。透過政府骨幹網路 (T-Road) 串接政府各機關、部門的獨立系統資料股，民眾最快在今年 10 月之後，就能在網路上辦理公投連署、健保、社福、津貼、勞保、年金、護照簽證等 16 項業務！這樣就不需要為了印身分證、臨櫃申辦事務而東奔西跑了 新版身分證不僅在 UI 介面的設計有乾淨利落、資訊分明的特點，更在技術、使用、便民性上有著巨大的突破！未來在其他功能上的結合，更是指日可待！讓我們一同期待 10 月份新卡的蒞臨吧！ 更多UI相關文章請點下方連結或至本部落格首頁點選喔~ 其他閱讀 JavaScript 入門教學 #18 ｜創造 JavaScript 物件 (Objects) 你是我的眼！ Google AI 眼鏡助視障朋友「看見」世界 差點被拋棄的冠軍程式語言 -Java 入門教學（一） Java 身世之謎／寫出第一個 Java 程式 APCS 是什麼？所有 APCS 檢定的問題這篇都會回答你！ 品牌重塑 UI 怎麼做 ? 奧迪 , 福斯絕佳範例 !!( 上 ) UI,UX 設計課程沒教的設計心理學就看這篇 !! 優質 SEO 速成班 : 長尾關鍵字提高轉化率
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
今天要來跟大家介紹新式身分證的UI設計~快一起來看看有甚麼亮點吧!!(上) 睽違14年，今年10月即將入手的 eID，新功能你期待嗎? 還記得 2018 年內政部舉辦的「新版身分證」設計競賽嗎? 當時任職 HTC，參與 HTC Sense UI 介面設計與 HTC Themes 設計的魯少綸，他的作品「形｜SHAPE」以簡潔的 UI 廣獲評審青睞，獲得「設計獎」，更成為新式身分證的設計依據。 ▲ 新身分證得獎做品：左圖為設計獎、右圖為人氣獎 不過在網路票選過程中，「形｜SHAPE」僅獲得 46 票，與獲得近 10 萬票卻只得了一個「人氣獎」的作品「嶼民在地」票數相差懸殊，引發網友們不滿。「不禮貌鄉民團」在臉書上貼出比較，質疑為何 9 萬 6 千票的作品卻輸給僅有 46 票的作品，引發論戰。 對於爭議不斷的新身分證競賽結果，設計師聶永真表態：不要用民粹霸凌設計獎得主！究竟新式身分證除了極簡風的 UI 介面之外，到底還有哪些亮點，值得設計師為它發聲呢? 新身分證 UI ：高延展性、整齊易讀、具包容性，獲評審青睞 ▲ 新身分證版面切成單純的左右兩塊，給予長短不一的字數有很大的延展性，版面也更整齊易讀。 左右區塊排版，簡潔易讀 據「身分證再設計官網」所寫的官方勝選理由，「形｜SHAPE」以整齊的排版勝出。其實由上圖不難發現：「形｜SHAPE」無論是正面、反面，都只有切成單純的左右兩個區塊。正片的左區塊約佔了整體版面的 2/3、背面則占了約 3/4。 延展性強：無論文字多長都能排進去！ 作者將姓名、地址以及「中華民國國民身分證」的中英文字樣⋯⋯等等字數較多的資訊，巧妙的置於較大的左區塊，讓整張身份證有整齊分明的排版；且左區塊的文字內容有足夠的空間可以延展，因此無論地址、姓名的長度多長，都能在雙語的排版上明暸易讀。 低調呈現台灣意象 質感律動感都到位 另外，作者也將代表台灣土地的圖樣，低調的詮釋在細節中：身分證簡約的白底，搭配玉山山脈的等高線圖的壓紋，上頭還印有台灣島狀的光影變化箔膜。對比其他直白地使用具體的台灣島外型、101 等圖樣，兼具律動感與藝術感的等高線線條作為背景，確實是十分令人玩味的呈現方式。 本篇為上篇，下篇請點此 UI學員看過來!即將登場的新式身分證有甚麼特別的呢!(下) 更多UI相關文章請點下方連結或至本部落格首頁點選喔~ 其他閱讀 JavaScript 入門教學 #18 ｜創造 JavaScript 物件 (Objects) 你是我的眼！ Google AI 眼鏡助視障朋友「看見」世界 差點被拋棄的冠軍程式語言 -Java 入門教學（一） Java 身世之謎／寫出第一個 Java 程式 APCS 是什麼？所有 APCS 檢定的問題這篇都會回答你！ 品牌重塑 UI 怎麼做 ? 奧迪 , 福斯絕佳範例 !!( 上 ) UI,UX 設計課程沒教的設計心理學就看這篇 !! 優質 SEO 速成班 : 長尾關鍵字提高轉化率
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
UI,UX設計師除了專業知識以外還要涉獵一點心理學才能抓住大眾的心!!不要錯過今天的文章拉~
最近學習了米勒定律和希克定律。 其中關於如何提升視覺感知，有對我很有幫助，其中有一條：平均每個人在記憶時候最大數量為7個。
Java瑪奇朵 發表在
痞客邦
留言 (0)
人氣(
