布萊恩的創業小窩

  這篇將告訴你如何將 UI設計 和UX設計完美搭配!壓軸果然最重要!! 本篇為【UI/UX 設計工作完整剖析】系列的第 5 篇，完整連結如下： 1- 為何UI/UX容易搞混？ 2- UI設計的優點 3- UX設計的優點 4- 無論UI/UX都需研究驗證 5-如何讓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 領域邁進，那麼最重要的還是思考自己對哪種設計類型感興趣。如果還不熟悉設計領域，建議這兩個方面都可以嘗試一下，有了在這兩個領域的實際經驗，不僅可以更了解自己適合哪個領域，也可以使你無論最後選擇哪一個，都能成為更好的設計師！     延伸閱讀： 全球首台MIT人工智慧貓砂盆,為你家貓貓的把關!(上) 只能用Java寫出"Hello World"嗎?今天教...

  事前研究驗證對 UI 設計和UX設計到底有多重要?資訊都在這篇啦! 本篇為【UI/UX 設計工作完整剖析】系列的第 4 篇，完整連結如下： 1- 為何UI/UX容易搞混？ 2- UI設計的優點 3- UX設計的優點 4- 無論UI/UX都需研究驗證 5-如何讓UI/UX相得益彰   研究是關鍵！無論 UI 、 UX 都需要研究驗證 UI 、 UX 若想要盡善盡美，最重要的的就是要做各種事前研究！ 無論是 UI 設計 或 UX 設計 師，都必須先做各種功課——盡可能收集資料、行為數據以研究使用者的需求，思考、分析和預測使用者在當下可能的行為、行為背後的動機以及隨之而來的體驗感受。 而研究所得的數據資料將應用在初版設計上，接著有的 UI 、 UX 設計師會透過真人測試或使用者訪談，取得使用者最直接的回饋、觀察並記錄使用者使用產品的整個過程、發現需求並構思解決方案，以確定設計能朝著正確的方向前進。 即使無法進行真人測試，也會透過 A/B 測試、易用性測試（Usability test）等方式在開發時就先測試找出問題，進一步對設計進行修改或優化。 推薦閱讀： 使用 A/B 測試來改善網站 UI 設計的 30 個例子 而這樣「研究分析、設計開發、測試反饋、修改優化」的流程會重複多次，這樣的開發法又被稱為疊代式開發。與傳統的瀑布式開發相比，疊代式開發能降低風險、提早得到使用者反饋，也具有更高的效率和成功率。 採用這種方法，可以在完全確定設計需求之前就開始進行開發，在一次疊代中先完成一部分設計，再通過使用者的回饋來細化，再開始新一輪的疊代。 對於 UI 設計 師  和 UX 設計 師來說，事前研究都至關重要，也都使用類似的方法，以求規劃出得宜的設計。 本系列文章未完，請 點此 看下一篇 延伸閱讀： 本季Python和Java的對決,究竟鹿死誰手? MIT的人工智慧貓砂盆,成為家貓的一大福音!(上) 前端工程師若是也將這後端的MySQL也背上身,肯定會加分不少! 美女PM/UI設計師真實身分起底！二度就業婦女的斜槓人生 第一次上程式設計課程該選 Python 還是 Java？有什麼差別？ 五部人工智慧電影告訴你：未來人類會與 AI 談戀...

這篇要介紹的是另一個主角 UX設計 ,趕快往下讀,接下來還有更有用的章節在等你~   本篇為【UI/UX 設計工作完整剖析】系列的第 3 篇，完整連結如下： 1- 為何UI/UX容易搞混？ 2- UI設計的優點 3- UX設計的優點 4- 無論UI/UX都需研究驗證 5-如何讓UI/UX相得益彰     什麼是 UX 設計 ？ UX 表示「使用者體驗」（User experience），顧名思義強調的是「使用者的感受」。 為了帶給人們良好的體驗，必須先進行使用者洞察、產品研究、市場趨勢研究，到建立資訊架構、規劃任務流程、繪製線框圖（Wireframe）和與 UI 設計 師溝通互動設計與視覺設計間的怎麼互相調和，最後交棒給工程師。 而使用者會得到怎麼樣的體驗，取決他們如何與應用程式互動：希望體驗流暢、直觀？那導引要設計的合乎邏輯；想讓使用者覺得自己有效地完成任務、而不是在打一場戰爭？這都取決於 UX 設計 師的功力。 ▲ 設計思維是一種以人為本的創新方法，它汲取了設計師的靈感，將人的需求，技術的可能性以及業績成功的需求整合在一起(來源：Unsplash)   當然使用者介面和體驗有著相輔相成、缺一不可，因此 UX設計師會跟 UI 設計 師密切合作，這也是為什麼許多人會混淆兩者。不同的是， UI 設計 師的任務是確定使用者介面的外觀，而 UX 設計 師負責確定使用者介面的結構、功能、操作方式和反饋體驗。 簡而言之，UX 如果設計良好、直觀又流暢，則使用者將獲得良好的體驗；反之則可能會把使用者趕跑， UX 設計 師的工作就是努力避免出現第二種情況。那一個好的 UX 設計 會具有哪些特色呢？ 好的 UX 設計 會具有的優點： 身為 Mailchimp 使用者體驗設計總監的 Aarron Walter 在他的《為情感而設計》（Designing for Emotion）一書中，告訴讀者如何才能讓使用者愛上你的網頁、產品或應用程式。 此書中參考馬斯洛需求理論、提出「使用者需求理論」，成為 UX 設計 師思考與決策的重要參考： ▲ 「使用者需求理論」金字塔從底層至頂層依序為：功能性、可靠性、實用性、趣味性 「使用者需求理論」金字塔從底層至頂層依序為：功能性、可靠性...

  UI設計 是此章節的主角~讓我們一起來看看它有哪些優點,以及如何好好使用它?   隨著對 UI、UX 的認識日漸普及，目前的分工也越來越明確了，接著讓我們來分別看看 UI 和 UX 究竟是什麼吧！   本篇為【UI/UX 設計工作完整剖析】系列的第 2 篇，完整連結如下： 1- 為何UI/UX容易搞混？ 2- UI設計的優點 3- UX設計的優點 4- 無論UI/UX都需研究驗證 5-如何讓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 設計 和UX設計讓人好混淆!不想搞混不想走冤枉路,別錯過這系列文章!! UI vs. UX 設計 - 為什麼容易搞混？ UI 設計 和 UX 設計 常常被混在一起使用、或將兩者視為同一種專業，也有不少公司開出「 UI 設計 師」的職缺，卻要求應徵者兩種能力兼而有之。 除了因對 UI、UX 不甚了解外，其中一個原因是 UX 包含的事情較為廣泛：從介面設計、視覺風格、程式功能和運作效能等等都是其中一環，與 UI 設計 或多或少有所重疊。而且許多專業設計師對這兩種專業都有涉獵，久而久之就常見 UI、UX 並稱的狀況了。 ▲ UI、 UX 設計 雖為不同專業，但在某些方面會有重疊。(來源：Asinthecity)   本篇為【UI/UX 設計工作完整剖析】系列的第 1 篇，完整連結如下： 1- 為何UI/UX容易搞混？ 2- UI設計的優點 3- UX設計的優點 4- 無論UI/UX都需研究驗證 5-如何讓UI/UX相得益彰 本系列文章未完，請 點此 看下一篇     延伸閱讀： 人工智慧人臉辨識還不完善,來看看它出了什麼包!(上) 把行銷變得更簡單!Python是如何做到的?(下) 透過學習,人工智慧也能做出屬於自己的威士忌了!(下)   前端工程師該懂的後端技能 : MySQL教學-DDL DML DQL DCL 使用 Java、Python、C 等 22 種程式語言寫出「Hello World」！ 人工智慧電影/影集：Netflix《我的全像情人》探討人與 AI 是否有真愛 介面、體驗大不同！UI設計/UX設計工作內容完整剖析

本篇為「想使用A/B測試?這裡有30個改善UI設計的例子!」的第 4 篇，第 3 篇請點此 連結 用A/B測試改善 UI 設計 的例子終於要在今天分享完成啦,希望大家都將收穫滿滿~ 範例24：嘗試銷售「好處」而不是功能 克里斯‧古利博（Chris Guillebeau）在《100美元創業》（The $100 Startup）一書中寫道，人們真的很在乎愛情、金錢和自由，也希望同時能減少壓力、衝突和麻煩。 人們在挑選產品時，考慮的點除了性能外，更在乎這個產品能如何帶給他們好處 －－ 例如若能同時幫他省錢又省力就太好了。而這就是產品能帶給顧客的價值所在，也是他們會掏錢的關鍵。所以網頁的說明別只向顧客說明產品或服務內容，說明能為顧客帶來哪些好處吧！   範例25：謹慎設計「沒有符合的產品」的網頁 如何在網頁上呈現數據是一套學問，只是許多 UI 設計 擅長表現 1000 個以上的數據，結果卻忽略了「零數據」的情況－－當使用者想搜尋符合特定條件的商品未果時，跳出的「搜尋到 0 個商品」。或者另一個情況：當初使用者查看您的網頁時，在沒有任何引導的情況下操作，導致顯示 0 數據，這會有讓使用者感覺被忽略的風險。 此時，有 sense 的 UI 設計 師會使用「網頁使用教學」或提示來取代冰冷的「搜尋到 0 個商品」頁面，讓使用者感受這個網頁是有人性的，營造暖心的 UX 使用者體驗！ 推薦閱讀： 改變 UI/UX 竟讓友情加溫、麵包烤更香！Netflix 紀錄片揭露設計師巧思   範例26：讓使用者能選擇「不參加」 傳統行銷策略上，會只有一個寫著「我想要...」的方框（check box）以供勾選，若不想參加則可以不勾選。某些粗魯的行銷手段甚至會預設設為勾選，常讓使用者一不留意就「被答應」了 。 更好的做法是將正反向的選擇各放一個方框，告訴使用者「你可以要也可以不要」，然後再替使用者默選其中一項。 因為此舉可以減緩當使用者不想參與時的牴觸感，亦可可讓使用者潛意識產生「所有人都照原樣進行，那我也這樣做吧」的想法，進而讓我們的目的更容易達到，還不會引使用者的反感。畢竟行銷道德也會影響使用者對品牌的評價。 範例27：保持一致性，避...

本篇為「想使用A/B測試?這裡有30個改善UI設計的例子!」的第 3 篇，第  2  篇請點此 連結 前面改善 UI 設計 的例子你都看懂了嗎?準備好了我們繼續往下看~ 範例17：顯示出項目的即時動態 在 UI 設計 中，常會以不同方式表現出項目的不同狀態，例如：E-mail 上可標記出未讀或已讀、帳單明細會顯示已繳清或未繳的帳目等。而向使用者顯示項目所處的狀態是提供反饋的好方法。 即時動態可以幫助消費者確認是否已經操作過了、操作是否成功、以及接下來應該進行什麼動作   範例18：把引導型按鈕的敘述改寫為「能帶給用戶哪些好處」 想像一下若是眼前的網頁上有兩個按鈕，其中一個標示「能替你省下一大筆錢！」，另一個寫著 「點這裡註冊」，肯定大部分使用者都會被前者吸引。 前者就是所謂「能帶來好處的按鈕」，能替使用者產生價值；而後者則是「任務導向的按鈕」，代表使用者耗費時間跟精力。而「能帶給使用者好處」的按鈕自然有較高的轉換率。   範例19：直接操作比多階層下拉式選單更直覺 直接處理畫面上的資訊，有時會比使用整合工具列還直覺，如多階層下拉式選單（context of button）雖然十分常見，但過多的階層可能會增加操作的步驟，所以下次在煩惱 UI 設計 該如何處理時，不妨考慮減少階層或直接操作的方法。   範例20：若當下就可以操作，就不要再多開分頁！ 當我們希望使用者做有價值的動作，如：留下聯絡方式、基本資料等，最好把填寫用的欄位或表單放置本頁上。若能與頁面整合在同一層，會比讓使用者連結到別頁輸入資料來的好。 精簡流程、讓使用者花最少的時間就能了解頁面資訊，並將簡單易懂的表單放置於該頁面上。除了方便性，也可藉此讓使用者預估填寫所需的時間，會更加增加使用者填寫的意願。   範例21：以過渡形式表現操作導致的 UI 介面改動 當使用者在與 UI 介面互動時， UI 設計 成能藉由隱藏、顯示、移動或調整大小等變化來回應使用者的行為，也能協助使用者理解介面的使用方式 其實在變化過程中增加一些動態變化，也能達到尊重使用者的效果：故意延遲、以過渡形式表現尺寸或位...

本篇為「想使用A/B測試?這裡有30個改善UI設計的例子!」的第 2 篇，第 1 篇請點此 連結    改善 UI 設計 例子的分享才剛開始呢,繼續學習吧! 範例9：清楚描述 TA (目標客群)，而不是宣稱「適合所有人」 網站是瞄準特定族群還是面向普羅大眾？即使鎖定客群的策略有風險，讓網站在短期內失去一些潛在客戶，但誠實與公開透明才是與消費者信任的基礎。 網站清楚描述產品或服務的目標族群畫面，可以讓網站吸引到相似特質的使用者，同時透露出的「排他性」會讓使用者感到自己是被重視的，並建立出親近感。 範例10：不會有人被優柔寡斷吸引，多使用肯定語氣吧！ 當你收到一封語句充滿「也許、可能、說不定」的信件，以及收到一封肯定且充滿信心語句的信件，哪個寄件人會讓你覺得比較能信任？相信大部分的人都會認為答案明確的信能讓人安心吧！ 優柔寡斷會降低信任感，如果網頁上常使用問句或不確定性的字詞，例如：有興趣嗎？想購買嗎？會讓消費者覺得你對產品或服務信心不足，這時候可以使用更具權威性、專業性的語句，像是如何帶給顧客良好的產品或最佳的 UX 使用者體驗。 範例11：善用色彩對比度來凸顯號召性用語 醒目的行動呼籲性（CTA，Call-to-action）可以使你的 UI 介面更加強大。有多種方式能輕鬆提高 CTA：如透過深淺色調、陰影、漸層或對比色的手法來增加畫面上的對比性，提升被使用者注意到的機會。 範例12：標示出產品的原產地 為產品添加名稱、圖片與原產地標示都能展現出 UI 設計 中獨特性的方法。特別是提到國家、地區或城市，因為這正如人們自我介紹來自哪裡一樣，是一個非常人性化的交流方式，也會顯得更加友善。 另外，說明原產地故事也能讓產品與產地名聲達到雙贏。 範例13：別讓使用者填太長的表單 人類天生就牴觸勞動密集的行為，這個理論同樣適用於讓顧客填寫表單，每多一個表格就增加使訪客轉身放棄的風險！並不是每個人都能飛快地打字，更別說在移動裝置上打字仍然不輕鬆。檢視是否每個表格都有必要回答，並盡可能減少表格數量。 如果必填欄位真的為數眾多，可以嘗試讓最重要的資訊先讓使用者填寫完，提交後再出現一個單獨的頁面，請使用者繼續填寫第二...