<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          產品體驗增長中的3個核心招式

          周周

          本文將以「產品與用戶之間的信任」為出發點,從產品體驗的角度,對比產品體驗層面的差異化,為大家提供設計思路,助力產品數據的增長,設計出既好看又好用的產品界面。

          超全面的UI界面字體選取與使用指南

          純純

          最初的圖形界面

          文字和排版可以追溯到五千年前,而圖形化界面僅僅只有40年的歷史。最關鍵的轉折點出現在1973年的施樂,最早的圖形化界面出現在了他們的Alto電腦上,而這個設計就是現如今圖形化界面設計的基礎。在Alto 的界面誕生后的10年里,幾乎是它一家獨大,并且它也被大家視作為數字技術的未來。

          絕對專業!超全面的UI界面字體選取與使用指南

          早期的Alto 在80年代進化為著名的施樂之星,而施樂的這個設計方案也成為了第一個商用的操作系統圖形化界面。

          絕對專業!超全面的UI界面字體選取與使用指南

          不過不論是Alto 還是施樂之星,都沒能真正意義上崛起。不過施樂的圖形化界面最終深深的影響了蘋果和微軟的道路,比爾蓋茨和喬布斯先后在施樂的研發中心觀摩了施樂之星的運作,而喬布斯更是在1984年先人一步發布了著名的Macintosh 系統,也就是后來我們所熟知的Mac OS。

          絕對專業!超全面的UI界面字體選取與使用指南

          Macintosh 的發布不僅僅意味著相對成熟的GUI的出現,而且它為大眾帶來了真正意義上的自定義字體的功能。這款系統內置了許多以著名城市命名的字體,也正是在此之后才有越來越多的著名字體的數字版本在數字平臺上發布并應用。

          絕對專業!超全面的UI界面字體選取與使用指南

          仔細觀察這些早期的字體,我們能夠發現,雖然已經是圖形化的界面,但是其中絕大多數的界面元素都還是以純文本的形式而存在,它們以一種奇妙的方式被整合到一個界面當中。循著界面的發展歷程沿路看過來,不難發現,文本和排版幾乎是貫穿始終的主線,它是一個不容忽視的核心類別。

          文本即界面

          界面中的每一個文字、每一個字符都很重要。好的文本是好的設計。文本是最根本的界面,是我們設計師來塑造和打磨這些信息。

          看看下面的天氣界面的設計,想象一下將所有界面元素都擺在桌上會是什么樣的效果:無非就是兩張圖,幾個圖標和一大堆文本。

          絕對專業!超全面的UI界面字體選取與使用指南

          作為設計師,工作并不是將一堆隨機的內容和元素排布在屏幕上,讓它們看起來夠漂亮就行了。真實的情況是,我們要從最核心的內容和文本開始著手,然后從這里著手細化,并完善出其他的部分。這就是我們工作的核心。

          文本的清晰度同樣扮演著關鍵性的角色。如果我們的大腦花費一兩秒鐘單純只是分辨一個字形,那么清晰度上的微小差異是無傷大雅的??墒钱斔鼈兘M合成為大段的文本,不同的字母組合構成不同的詞匯、段落的時候,清晰度的影響就更大了,排版的重要性也顯得更加明顯了。

          當然,影響界面設計的文本屬性還有很多,比如平衡性,定位和層次結構,但是好的文案和排版的影響至少占據整體影響的95%。

          在偉大的設計師眼里,文本不僅承載內容,而且可以構成界面。
          – Oliver Reichenstein

          我們如何閱讀

          既然屏幕上的文本顯示是如此的重要,那么我們應當先了解人們是如何閱讀的,而文本顯示又是如何影響我們設計決策的。

          讀過Billy Whited 的文章《Setting Type for User Interface》之后,讓我對于文本閱讀的效率有了更深的認知。一個少于20個字母的獨立單詞放在句子中會更快被理解,而單獨放置的時候我們需要耗費更長的時間來識別。

          其實這個研究結果也表明我們閱讀較長句子的時候,并非是逐個單詞地閱讀,而是跳躍著閱讀功能性的詞匯,我們將這種閱讀方式稱為離散跳躍式閱讀,俗稱掃視。

          絕對專業!超全面的UI界面字體選取與使用指南

          掃視讓我們的閱讀能力更強,我們甚至會跳過短的功能性詞匯。

          我們應當記住這一關鍵特征,因為我們的界面中所承載的詞匯大多是孤立的單詞。簡單說來,界面是無法利用掃視這種方式來獲取信息的。

          總的來說,單詞在閱讀中發揮著無比重要的作用,無論是作為內容還是作為界面元素,均是如此。無疑,選擇合適的字體就相當重要了。

          絕對專業!超全面的UI界面字體選取與使用指南

          過去,人們常常認為眼睛和大腦是通過單詞的外輪廓(Bouma Shape)來識別單詞,當然,后來的研究證明這個想法是錯的,單詞的可讀性和易讀性的影響因素不止是外輪廓,字母本身的形態、細節和清晰度同樣深入的影響著它的識別度。

          是什么讓字母清晰可讀?

          其實這個問題一開始并不是那么好回答。閱讀很大程度上依賴于我們的習慣,越常見的內容對我們而言越容易識別。這樣一來,我們就不那么容易判斷讓字母清晰易讀的影響因素了。為了了解這一點,我們需要將句子分割為單詞,分解單詞為字母,在字母中查看細節。

          早在2008年,維多利亞大學心理學系根據測試結果得出結論,大寫和小寫的拉丁文字母是最容易識別的,也最易于閱讀。

          絕對專業!超全面的UI界面字體選取與使用指南

          這項研究有趣的地方在于,它揭示了一個事實:每個字母延伸出來的線性端點是最易于識別的地方,也是每個字母的特點所在。

          絕對專業!超全面的UI界面字體選取與使用指南

          上面的圖片標識出了這些最易于識別的部分。每一款字體在這些部分應當設計為最通用、最為人所熟悉的樣式,同樣的,它們也應該強調每個字母的差異。

          在2010年的時候,另一項由 Sofie Beier 和 Kevin Larson 開啟了一個新的研究項目,這項研究專注于測試經常被誤讀的字母和字符的識別度。

          絕對專業!超全面的UI界面字體選取與使用指南

          這項研究表明,在相同的字體和相同的尺寸、相同字重的情況下,有些字體或者變體的細節確實比其他的更加清晰、更易于識別。這項研究的結果說明,纖細的字體加粗之后識別度效果會明顯會增強,而字母的X高度如果能夠占據上伸區或者下探區的空間,識別度會更好。

          絕對專業!超全面的UI界面字體選取與使用指南

          為了更好的理解字體的清晰度的概念,你可以下載我所開發的這款工具 Legibility APP 來測試不同字體在模糊、炫光等多種不同情況下的清晰度和辨識度。這是一款處于測試階段的工具,可以在Chrmoe、Opera和Safari 中運行。

          UI中的字體使用

          理解了用戶閱讀的方式和字體可讀性的影響因素之后,我們應當開始了解UI中的字體的幾個關鍵因素。下面是UI中字體使用的10個關鍵因素。

          1、可讀性

          可讀性是UI中字體所需考慮的首要因素。字母字形必須清晰可辨,作為UI元素,其中不同的字母必須可以被用戶輕松辨別出差異。許多經典的字體,甚至包括 Helvetica ,都沒辦法清晰分辨 字母 i 的大寫形態 I,和大寫字母 L的小寫形態 l,這在界面設計中無疑是有影響的。

          絕對專業!超全面的UI界面字體選取與使用指南

          上圖中,左邊的字體為 Source Sans Pro , 右邊為 Helvetica,無疑對于 Illiterate 這個詞Helvetica 字體下前三個字母完全無法分辨。有部分用戶也同意Helvetica 并不適合作為UI界面的顯示字體而存在,因為這款字體終究是為平面印刷顯示而設計的,并非為屏幕而生。

          在iOS 7 時代,蘋果短暫地將 Helvetica 作為系統的主要顯示字體的時候,曾對特定的用戶群體造成過信息識別的困擾。這也最終催生了我們現在所看到的蘋果官方字體 San Francisco。舊金山是為UI界面而生的字體,它的x高度比Helvetica 更高,字母間距更寬,字母間的識別度更高。

          絕對專業!超全面的UI界面字體選取與使用指南

          2、適度

          一款理想的UI界面所用的字體,不應當過于“顯眼”,而該是悄無聲息,“隱型”的。當用戶在試圖完成某項任務的時候,字體不應當給用戶以“出戲”或者“顯眼”的感覺,也就是說,字體不應當超出用戶的認知負荷,而內容和信息才應該成為真正的關注點。

          絕對專業!超全面的UI界面字體選取與使用指南

          3、靈活

          給UI界面使用的字體應當具有靈活性。我們曾經為 Medium 做過用戶體驗設計,作為一個網頁博客平臺,我們很難去控制用戶的能力、內容、瀏覽器、屏幕尺寸、網絡帶寬和連接速度,包括輸入法。

          所以我們最終為它所選取的字體應當支持大量不同的內容,在不同的尺寸下擁有良好的識別度,能夠兼容不同的設備,尤其是在小屏幕上。Sans serifs 字體就是專門為小尺寸低分辨率屏幕而定制的。

          絕對專業!超全面的UI界面字體選取與使用指南

          4、x高度的上限

          x高度的參考標準是小寫字母x的高度,同等尺寸下,x高度更大的字體更易于識別。不過x高度也不是越大越好,當x高度超過一定限度的時候,小寫字母n和小寫字母h就很難分辨了,這一點應當注意。

          絕對專業!超全面的UI界面字體選取與使用指南

          5、更大寬高比

          字母的寬度和高度的比例也是相當重要的一個屬性。寬度和高度比例越高,字母在小屏幕上的識別度就越高。

          絕對專業!超全面的UI界面字體選取與使用指南

          6、寬松的字間距

          字母之間的間距和字母內部的空間同樣是影響字母可讀的因素。字母間距太小同樣會影響整體的可讀性,而好的顯示字體會更好的控制字母間距,確保單詞在視覺上的“透氣性”,甚至可以營造出一種韻律感。

          不過字間距不是越寬松越好,太過寬松會讓整個單詞看起來過于松散。有一個值得參考的標準,就是字母之間的間距應當比字母內的開口縫隙略小一點。

          絕對專業!超全面的UI界面字體選取與使用指南

          7、低筆觸對比度

          許多字體不同的筆畫粗細不同,而對于UI界面而言,筆觸間的對比度越小識別度越好。較大的筆觸對比度下,字體在小尺寸屏幕上,較細的筆畫會難于分辨。

          絕對專業!超全面的UI界面字體選取與使用指南

          8、OpenType 功能

          OpenType 功能對于字體而言是相當重要的。支持OpenType的字體擁有更大的靈活性,對于不同的語言和特殊的字符有著更為優良的兼容性。

          絕對專業!超全面的UI界面字體選取與使用指南

          9、備用字體

          接下來要說的情況可能大家多少都碰到過。網頁在完全加載出來之前,部分內容因為字體沒有加載而無法顯示。

          絕對專業!超全面的UI界面字體選取與使用指南

          其實這可以通過先加載本地字體,顯示內容,等網頁字體加載好了之后再行替換,以達到無阻塞顯示。這種方法的缺陷是需要預先設定一個可調用的本地備用字體。

          絕對專業!超全面的UI界面字體選取與使用指南

          10、Hinting

          Hinting 指的是為了字體為了保證最大的可讀性而針對顯示器狀況進行調整的過程。Hinting 可以通過匹配顯示器的像素柵格讓字體顯示更加清晰,降低誤讀的可能性。

          這項技術最初是由蘋果公司所提出的,不過因為TrueType 字體技術的出現,Hinting 正在消失。

          絕對專業!超全面的UI界面字體選取與使用指南

          未來

          隨著新的UI標準、排版技術的提升,字體技術也在不斷的進步,在不遠的未來,字體會從傳感器獲得信息,更好的兼容不同的環境、隨著亮度、設備、距離而進行智能化的調整,甚至復雜而龐大的中文字體,也可能作為靈活的網頁字體而存在。

          絕對專業!超全面的UI界面字體選取與使用指南

          字體會讓我們的工作更加便捷

          絕對專業!超全面的UI界面字體選取與使用指南

          讓界面交互更快,更加觸手可及

          絕對專業!超全面的UI界面字體選取與使用指南

          讓UI更加易用

          絕對專業!超全面的UI界面字體選取與使用指南

          更加便捷

          絕對專業!超全面的UI界面字體選取與使用指南

          也更加清晰而高效





          文章來源:優設  作者:陳子木

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          從零開始設計產品的 10 個 UI/UX 啟示

          純純

          Peter Drucker 說過:「量化才能管理。」這個格言后來成為了我的信條。我決定將我的目標量化,將它分解成為最基礎的習慣來執行,并且以每天一定量的執行,來實現最終的目標。

          從零開始設計產品的 10 個 UI/UX 啟示

          我們先構建了一個免費的 Chrome 插件 Confetti ,這是一個能夠幫你追蹤日常習慣的工具,每次完成一個任務,都會有五彩繽紛的紙屑效果出現,祝賀你守住了習慣,達成目標。

          從零開始設計產品的 10 個 UI/UX 啟示

          以下見解希望對你有所幫助!

          1、一開始就要界定好產品特性

          從零開始設計產品的 10 個 UI/UX 啟示

          一開始,我和 Wilson 就決定使用3屏的主要功能,并構建了一個粗糙的原型。但是,我們沒有足夠的遠見,無法設想我們的產品最終的方向,也沒有對全部的想法進行深入的打磨。

          最終,我們向后退了一步。我們回過頭來,確定了最小可執行原型的發布日期,以及真正的核心功能。我們在 Notion 上創建了一個文檔,并且開始梳理和管理哪些功能是「必需品」,哪些功能「如果有了會更好」。比如,登錄、注冊、新用戶引導是必不可少的功能。但是,我們認為「重新排列習慣」是一個提升體驗但是并不亟需的功能。

          我們基于這一點,我們開始抓住核心功能,盡可能讓它們足夠易用,強化核心特性。通過確定核心功能的優先級,并且確定發布日期,借此緩解我們的精神壓力,確定我們不會被成堆的功能所淹沒。這也似地我們有足夠的動力解決核心功能。

          2、有很多流程和狀態需要搞定

          從零開始設計產品的 10 個 UI/UX 啟示

          在設計產品的時候,我經常被提醒要處理好每一個邊緣情況,填好每一個坑,確保體驗的順暢。從零開始構建產品是一把雙刃劍:基于自己的構想來創造產品是令人興奮的,但是相應的,我需要經常在舒適區以外處理問題。

          我一直在 Skookum 從事產品設計的工作,而這些工作通常都是在一定的約束條件下進行的,但是現在所要處理的產品則不同。之前的產品都可以借助現成的設計系統,有早已搭建好的設計語言,有完整的組件,有明確的 UI 狀態,有非常明確的基礎架構,但是這次是我自己的產品,所有的這些都沒有。而且,這個產品還可能會存在幾種極端的情況、流程和狀態。

          比如,在注冊流程中,按鈕會有默認、禁用、激活、填充、錯誤、懸停等幾種狀態,但是除了這些之外,我還需要考慮諸如密碼重置的流程和體驗,這可能會涉及到 6 個高度相似的 UI 界面狀態:

          1. 輸入 Email
          2. 重新發送 Email
          3. Email 通知設計
          4. 輸入新的密碼
          5. 錯誤界面
          6. 成功界面

          這個過程中,有很多東西都令我一度感到迷惑,這也引發出我下一個要說的要點……

          3、創建用戶流程

          從零開始設計產品的 10 個 UI/UX 啟示

          項目開始之后,我很快就遭遇了組織架構問題。因為我是在工作之余來創建這個產品,這導致我犯了一個非常嚴重的錯誤:我沒有按照傳統的產品流程來創建產品,這隨后導致了一系列的問題。

          按照標準的產品設計流程,我需要從用戶流程開始創建,定義用戶可能會執行的流程,并且針對主要的流程界面進行必要的總結說明。因為這個項目和之前的工作不一樣,我一開始就忘記了遵循流程這件事情,我錯誤地將它視作為一個包含幾個簡單界面的簡單項目(是不是聽著特別耳熟?很多所謂的小項目翻車都是從這里開始的)。這樣一來,當我開始處理諸多按鈕的不同狀態和界面變化的時候,整個用戶流程變得混亂不堪,并且我很難確定其中的體驗漏洞有哪些。

          最終我停止了這種隨性的設計方式,并且在 Whimsical 當中創建了完整的用戶流程。于是我很快清楚了那些環節有所缺失,以及整個界面流程的走向。

          按照用戶流程來梳理界面的時候,可以對于整個產品的屏幕狀態有所了解,并且隨著產品的發展膨脹,用戶流程的重要性會隨之增長,成為至關重要的部分。

          4、交互應該反饋到UI中

          從零開始設計產品的 10 個 UI/UX 啟示

          的確,在完成整個 UI 之前,不應該開始向著項目當中添加動畫。但是,不添加并不意味著你無需考慮。實際上,不同的微交互和動畫對于實際的體驗影響是巨大的。你在思考 UI 設計的時候,就應該考慮到微交互和動畫的使用,避免在后續動效和交互落地的時候,進行不必要的修改。

          比如,當我在設計「達成成就」這一體驗的時候,我就考慮到了需要用到的微交互的效果,所以在我設計 UI 的時候可以順著我自己的喜好來進行設計,并且將可能會用到的動效拖到某個角落暫時記下來,避免在設計 UI 的階段,影響了整體的流程和效果。而后續加入動效的時候,就會方便很多。

          我認為,將 UI 和交互結合起來考慮是非常重要的,因為兩者共通塑造了體驗。如果在設計 UI 的環節直接加動效,會讓整個設計過程變得復雜臃腫。

          5、盡早獲得反饋

          從零開始設計產品的 10 個 UI/UX 啟示

          其實這也是我在這個項目中犯的一個大錯:等了太長時間才獲得反饋。

          我通常是在晚上回家和周末才有空推進這個項目,在很長的一段時間內,我沒有真正告訴任何人。

          當我終于同我的家人、朋友、用戶以及網上樂于嘗鮮的用戶公布了這一產品之后,他們在使用過程中,開始注意到了很多細節上顯而易見、但是我并沒有發現的問題。我意識到我作為產品的設計者,是很容易陷入并沉迷用戶體驗當中比較孤立的一部分,反而會忽略很多顯著的問題。

          回想一下,如果我能盡早向用戶和朋友展示設計和原型,那么我會在更早的時候發現問題,并且在獲得反饋之后才進入開發階段,彌補大量的損失。

          6、在別處獲得啟發很重要

          從零開始設計產品的 10 個 UI/UX 啟示

          很多設計師會認為,所有的想法都必須是原創的才行,否則就是欺詐。但是稍微想想,其實徹底的原創其實很少的。當你看到一個優秀的產品,它優秀的配色和恰到好處的交互可能會讓你覺得:「已經有人做出來了,我的想法在它面前完全沒法比擬?!?

          這種思維方式其實有著極大的缺陷,并且抑制了你的創造力。

          當我發現我的設計有缺陷的時候,我會竭盡全力去搜索和了解更多網上已有的設計。我會觀察和思考別的公司和產品是如何設計新用戶引導流程的,如何管理用戶個人信息的。我從來都沒有復制被人的體驗,但是會隔三差五去鉆研別人所創造出來的優秀細節,然后將這些細節借鑒到我的設計當中。

          我最喜歡的一個范例,是從模態狀態下,旋轉退出的效果。這是我偶然在一個網站上看到的效果,因此我決定將它添加到 Confetti 當中,我還在著陸頁的按鈕中加入了類似的特效。

          事實上,一切設計都是混搭創造出來的。你借鑒細節并不意味著抄襲,不要害怕去發掘和學習別人的優勢和亮點,你要學會有機地拆解和借鑒,靈活地運用到自己的設計當中,它就像調制雞尾酒一樣有趣。

          7、勇敢面對身份的變換

          從零開始設計產品的 10 個 UI/UX 啟示

          當我們開始設計的產品的時候,我和 Wilson 頭頂上的身份就一直在變。我們是 UI設計師,要負責UX,要做交互,也制作動效,要進行平面設計,還要考慮市場營銷,要管理產品,我們也要扮演其他的角色。

          職責如此之多,以至于我們不可避免地遇到我們能力范圍之外各種新問題。我們必須承認自己陷入了困境,尋求外部幫助成了必要的選擇。

          專注于自己專業的領域,其他不專業的方面來尋求外部幫助是非常合理的。比如在一個項目當中,一位藝術家負責了絕大多數的風景插畫,另一位藝術家則完成了肖像畫的部分,這很正常。

          我希望產品的外觀和功能能夠保持高度的一致性,并且我確實做到了。但是不要誤會我的意思,我并非是不敢走出舒適區去學習代碼開發,而是在這樣的項目當中,我并不適合從UI和UX領域延伸出去,畢竟完成項目的開發優先級比學習代碼更高。

          8、保持簡單更重要

          從零開始設計產品的 10 個 UI/UX 啟示

          盡管給 MVP 安排好了發布時間,可以防止這個項目被無限膨脹的功能特性和工作量所淹沒,但是這樣依然無法防止我們基于已有的功能進行改進。

          很多人都喜歡 Reid Hoffman 的一句話:「如果你對于產品的第一版感覺不尷尬,那你一定是發布晚了?!共贿^,我們正式發布的第一版的產品,并不會顯得太尷尬,但是目前來看,當時那種簡單直觀的狀態,比起再花費好幾個月時間反復打磨之后再發布,來得更好。

          在發布新產品之前,我們必須考慮2個問題:

          1. 我們是否相信我們所構建的產品,能夠為用戶帶來價值?
          2. 我們是否竭盡全力了?

          這些問題讓我們最終能夠達成目標,且按時發布,避免分心。專注交付最核心的功能,而不是被一堆冗余的次要特性所壓倒。

          9、良好的交接更加省事省時

          從零開始設計產品的 10 個 UI/UX 啟示

          從項目一開始我就一直在做項目的管理和組織設計素材,以便后面進行開發。不過,由于我一開始就使用了 Zeplin 這樣的協同工具,確保了我可以輕松地將所有的素材都順暢地交給負責開發的 Wilson。作為一款設計系統工具,Zeplin 讓我無需浪費時間對素材進行分類,非常便捷。

          在交接的過程中,我還做了一些優化:

          1. 將所有的界面都組織到了 Zeplin 當中,并且進行了處理
          2. 我給所有的畫板進行了針對性的命名,方便檢索
          3. 我在 XD 中標注了需要導出的素材
          4. 我保留了舊有的界面存檔,并且確保交付的新版界面是最新的

          10、一次寫明所有的UX文案

          從零開始設計產品的 10 個 UI/UX 啟示

          在設計 UI 的時候,界面中的文案部分是臨時編寫的,這促使了一次設計完成之后,整體的文案是不一致、不協調的。

          我很希望一開始就創建了一個單獨的文檔,一次性將文案部分全部重寫,包括提醒、注釋、標簽、彈出框提醒等等。而實際上,我的文案都是在設計 UI 的時候附帶著寫下來的,導致整體的一致性嚴重缺乏。

          這種文案本身在調性上的缺乏,導致了整個產品在語氣和用詞上是混搭式的,一致性很差。

          所以,在產品上線發布之后,一直在對文案進行修修補補。



          文章來源:優設(陳子木)   作者:Danny Sapio





          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          UX設計全方案思考與呈現

          純純


          配色/圖標什么的是基礎嗎?

          之前一直沒有太多關注過如何定義一個 APP 的配色,或者如何畫一個漂亮的 icon。曾經的上級指示都是這些基礎對商業的不可量化。于是我在思考一個問題,就是沒有直觀商業價值的設計要素都失去了意義變成了所謂基礎的事情嗎?

          半年前面試字節的時候,面試官問了我有關配色的定義,細節到為什么是這個色值。當時十分震驚于這么細節的問題,之后我就想起了之前有位朋友給我發送過一份有關支付寶「藍」的定義 pdf,洋洋灑灑幾十頁就是為了解釋他們為啥用這個有點臟的藍色#108ee9 當主色。

          所以其實 APP 的配色/圖標與主品牌是一脈相承的,它是品牌的延續與象征。它以最直觀的態度傳達給用戶,這個產品以及品牌的調性,并以此建立最強有力的視覺識別性。所以我覺得它是可以有條件地展示在我們設計方案里的,但一定注意它的篇幅和表達的方式,維度在品牌傳達這一層就對了。

          至于如何展示和定義你的 APP 配色,一般 2 類情況。

          1. 在品牌主視覺配色基礎上的適配

          這種情況一般適用品牌主視覺方案已經設計完畢,APP 端作為延續。這個時候一般注意配色從 CMYK 模式到 RGB 的轉換,所以作為 APP 的配色,具體色值上可以稍作調整,使它更適配于 LED 屏的用戶感知與舒適度。

          另外可以使用透明度進行色彩分階段,一般從 0-100% 分為 10 階就足夠我們日常界面設計使用了。

          從零到一系列:UX設計全方案思考與呈現

          2. 0-1定義APP配色

          這種情況下我們從感性和理性 2 個角度去定義顏色。

          從感性的角度分析:情緒板應該大家都熟知的了,根據不同的行業和用戶定位得到相應的關鍵詞。對應不同的關鍵詞再搜集對應的圖片,從圖片和自然感知中提煉出主色。

          從理性的角度分析:我們把色彩分為對比色、近似色、復合色、單一色、三角對立色和漸變色六種。根據產品的類型和定位,我們決定使用什么樣的配色。比如一個年輕大學生專用的社交型 APP,我們可能就傾向更多地使用對比色這樣的撞色得到更多潮流與青春的味道。

          從零到一系列:UX設計全方案思考與呈現

          至于圖標的話我就更不用多說了,大家肯定都記得那些非?;A的繪制圖標的法則。個人認為圖標也不太需要放一個單獨的篇幅去展示,除非它有一些新奇有趣的亮點。

          界面框架,只是框架而已嗎?

          在之前的文章中有寫過,匹配產品定位的界面框架一旦輸出,對整個 APP 之后的迭代與功能設計都有很直接的影響。定義整體的UX 框架方案,是實踐設計目標與策略的過程,基本圍繞著這 3 個出發點:匹配產品定位、滿足業務拓展性、符合舒適度美學 。

          1. 定義整體框架

          首先我們從宏觀角度分析,一方面產品的業務線處于什么情況,是相對獨立的業務主線產品(舉例:拉勾)?還是平臺級產品(里面包含了許多垂直的業務線,舉例淘寶)?如果是平臺級產品在整體框架設計時就需要考慮跨端跨業務的框架拓展型。

          舉個例子,就是在定義平臺框架的時候要考慮這個框架與容器是不是同時適用于底下的子業務線,同時當這個框架到了 H5、小程序、PC 的時候需要做哪些適配調整,是否都可以很好地進行兼容適配。

          另一方面,整體框架設計的類型是否符合設計目標。舉個例子,無框式超大留白的框架設計雖然看上去很厲害,但在大部分商業產品中它的實用性卻非常低的。假設說我們今天需要做一個電商類的 app,設計目標是希望能夠提升業務轉化以及購買效率,那么展示效率與功能分區就顯得尤為重要,它就更適合一個相對緊湊的卡片式為主的框架設計。

          其次從微觀的角度來說,遍地就都是細節了。舒適度美學這一說,其實難免有些抽象,我們把它轉為相對合理一些的落地原理就會清晰很多,像大家熟知的間距 4 倍數原理、對齊原則等等。但是這些微觀的內容不建議大家放到方案展示里,因為它并沒有針對單個方案的特殊性,更像一種大眾共識。

          從零到一系列:UX設計全方案思考與呈現

          △ 多說無益,直接上最終的效果圖,方便大家參考

          2. 具體容器解析

          我們特地把單獨的容器部分拿出來解析,是因為自定義容器是展示核心業務最主要思考呈現,同時還可以配合運營做很多提升業務效率的配置。在做具體設計的時候,我們需要區分「端上固定」模塊和「運營配置」模塊之間的差別。

          「端上固定」模塊

          顧名思義就是開發端上需要寫死的模塊。寫死的模塊意味著,無論一個配圖還是一句文案,也只有開發童鞋修改后通過發版才能實現內容變更。一般適用于相對固定的產品功能以及 UGC 用戶生產內容。比如:拉勾上傳簡歷功能、斗魚的直播間列表。

          「運營配置」模塊

          相對「端上固定」,「運營配置」就不需要跟著發版,可以隨時后臺上傳替換模塊內的內容,適用于需要 PGC 生產的內容。說到這里很多童鞋可能馬上就聯想到 banner,彈窗的運營位了,但其實除了這些之外還有很多容器模塊是需要靈活配置為「運營配置」模塊才能更有效地提升運營業務價值。

          我們可以這樣來區分「運營配置」模塊類型。

          一種是純運營配置模塊,即設計與開發輸出框架、定好配置字段限制之后,運營可以獨立完成后臺配置的。比如:資訊 app 0-1 前期的資訊列表內容。

          另一種是運營設計配合模塊,即需要設計配合運營輸出一定的設計圖才可以進行后臺配置的。比如:常見的 banner、彈窗、熱門推薦專題等。

          在 0-1 的設計方案中,更推薦大家展示「運營配置」模塊的內容與解析,因為 0-1 是個以拉新為主的階段,運營顯得尤為重要,所以我們的設計需要側重考慮整體的運營效率與轉化。

          從零到一系列:UX設計全方案思考與呈現

          如何展示亮點設計?

          在我們概述完大部分的整體思考路徑與設計方案后,我們需要由面到點,從全局提煉細節,突出自己的設計方案亮點。

          而如何提煉這個亮點呢?是挑一個我設計的最好看的界面呢?還是直接放最復雜的那個流程?以下是推薦選擇的亮點設計:

          1. 完成理論實踐,并可以量化價值的設計case

          大家應該都了解,一些和設計息息相關的數據 UV/PV/GMV/ 相關業務指標等,以及一系列在實踐中很好應用來解釋設計方案的理論支撐比如 5W1H、GSM 與五度分析……這些數據和理論是支撐我們設計更飽滿更有說服力的重要支點。

          雖然在 0-1 的項目里,我們基本不太用得上優化數據比對(因為產品初期用戶數量少,產品體驗路徑也是一直處于不斷試錯階段),但是我們還是可以借用上文所述的一些方法論或者 A/B test 來完成我們的方案思考過程展示。

          從零到一系列:UX設計全方案思考與呈現

          那些你在完成踐行設計策略完成設計目標時獲得的數據指標要提前預知,養成習慣之后,你就可以快速輕松地察覺到哪里有可以做 A/B test、進行埋點數據比對的地方了。

          2. 影響上中下游環節的設計case

          除了對業務提升價值的項目外,我們有時候也需要注意對品牌設計、產品、運營、技術等上中下游造成影響力的設計項目。通常這類設計大部分也都是設計自驅發起的,能起到提升各方人效和業務效率的作用。

          舉例的話,我能馬上聯想到的就是多方協作的大型線上組件庫,可以參考阿里的 Ant design、滴滴的魔方,在之后的版本拓展中甚至可以延展成功能更加強大的多方協作 UX 設計資源中心。

          從零到一系列:UX設計全方案思考與呈現

          規范與組件庫的定義真的備受關注?

          感覺近期面過的 80% 的公司都對組件庫的定義非常關注,所以我們要做的不僅僅只是放一個視覺規范或者組件庫的全景圖,而需要對組件庫進行拆解。



          文章來源:優設(土撥鼠)   作者:Nana的設計錦囊



          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          界面交互動效核心知識的分類與總結

          純純

          一.  什么是界面交互動效?

          界面交互動效是展現界面間的轉換和界面內元素變化的交互反饋。而效果就表現在觸發與結束的過程中,表現清晰的層級關系,自然的引出與結束。交互動效有著承上啟下的重要作用。

          二. 界面交互動效是用來干什么的?

          • 讓用戶清晰地感受到當前所處場景和層級關系。
          • 多種UI元素之間的相互轉換。
          • 給用戶制造驚喜感使用戶愉悅。

          三. 界面交互動效五大注意點

          • 避免動效過于花哨、酷炫、標新立。
          • 在效率型應用中,過度、無意義的動畫只會阻塞任務流程。
          • 動作動效不超過1秒。
          • 用戶專注內容時,不要用吸引注意的動畫去打擾。
          • 出現頻率高的操作動效,避免用戶反感,延遲操作時間。

          四. 如何設置緩動曲線與時間讓動效更加自然,可以看下面的一些總結

          • linear曲線(勻速運動)除了一些特殊場景如加載、很少被使用。
          • easeIn(先緩后快)使用場景較少,主要在掉落、中使用。
          • easeInOut(頭尾緩、中間快)通常在輪轉切換的動畫中使用,這類動畫的觸發對象與運動對象并不是同一個元素。
          • easeOut(先快后緩)最常見的效果,其觸發對象與運動對象往往是同一個。主要用在展開、收起、出現、移動等動畫中。當不知道用哪個緩動曲線時,用這個一般不會錯。
          • 曲度主要表現運動過程的力的大小,曲度越大,啟示力或阻力越大。
          • 回彈則表現的是運動的劇烈程度及對象的質地。
          • 運動時間一般都控制在0.3s-0.8s之間,過長的時間會讓人感覺拖沓,不自然。

          超全面!界面交互動效核心知識的分類與總結

          五. 界面交互動效如果以動效的表現屬性來分可以分為兩種

          第一種:為銜接類型動畫

          主要針對不同界面直接的銜接,為帶來更流暢的操作觀感所做的設計,彌補兩個界面直接的差異所帶來的用戶感知落差。

          第二種:特效類動畫

          特效的核心目的是為了吸引用戶的注意力,提高信息敏感度,在游戲界面設計當中使用更為廣泛,能夠帶來更加絢麗的動態畫面。

          六.界面交互動效如果以界面的維度來說可以分為以下兩類

          第一類:界面內的交互動效

          在一個界面內的交互動效特別多,例如點擊加號出現下拉菜單,出現浮層動畫提示,點擊舵式導航出現選擇類型和遮罩,點擊按鈕出現評論點贊,當前頁面的展開收起,加載等等。如下圖所示:

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          超全面!界面交互動效核心知識的分類與總結

          第二類:界面間的交互動效

          幾個界面之間的的交互動效通常是平緩過渡到下一頁。常見的有以下幾類:

          超全面!界面交互動效核心知識的分類與總結

          △ 硬切到下一頁

          超全面!界面交互動效核心知識的分類與總結

          △ 下一頁從右往左推入(上一頁從左往右推出)

          超全面!界面交互動效核心知識的分類與總結

          △  下一頁從下往上彈出

          超全面!界面交互動效核心知識的分類與總結

          △  上一頁的元素過渡到下一頁

          總結:

          • 動效創意方面的創新要依據用戶的認知模型。單純很炫很酷的動效如果脫離了用戶的認知模型,那么這樣的交互動效對于整個產品來說是有害的。
          • 做界面交互動效的目的是為了更好地落地。如何更好地高效地表現我們設計的動效。同時使得我們制作的動效可以很好的運用到實現落地中,這是很重要的,不然所有的一切都是海市蜃樓。
          文章來源:優設  作者:程遠

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          快速提升 UI 設計效果的 7 個小技巧

          周周

          在創建實用、可訪問性良好且視覺效果頗為出彩的 UI 界面的時候,我們大多只需要進行有限度的微調,即可達到頗為不錯的效果。在之前,我已經撰寫了很多實用的 UI & UX 優化小貼士(看完文章在文末獲?。?,這篇文章繼續增加 7 條實用的建議,一起來看看吧!

          B端設計基礎指南:網格系統

          周周

          B端設計基礎指南:網格系統

          從3個方面,幫你掌握時間顯示的設計細節

          純純

          背景

          “時間”作為人機交互界面中經常出現的元素,本質上都是為了去傳遞時間維度的信息。但是我們平時在使用一些互聯網產品時會發現,關于“時間”的顯示狀態或形式在不同場景、不同頁面里往往是不太一樣的,這是出于怎樣的考慮呢?今天我們就來聊一聊,如何在產品設計中把握“時間”顯示的訣竅,讓其在頁面中發揮最大的作用。

          “時間”元素的分類

          按照“時間”元素在頁面中的出現場景和所起到的作用,可以大致歸為以下幾類:

          A. 事件的關鍵構成要素

          時間作為描述整個事件的重要組成部分,缺失后會對原本所要傳達的內容產生嚴重的影響,進而影響用戶的使用預期和結果,比方說用戶可能不能以一個較低的價格完成商品購買,或錯過了產品發布會的時間。

          從3個方面,幫你掌握時間顯示的設計細節

          B. 行為的時間標記

          指用戶本人作為行為主體或行為的接收對象,在某一動作發生后為其所打上的時間標記,比方說“我”購買商品下單的時間或收到一封郵件的時間。

          從3個方面,幫你掌握時間顯示的設計細節

          C. 內容的附屬信息

          用戶在使用產品進行內容消費時,時間作為該條內容的附屬信息,起到補充說明的作用,比方說一條短視頻或新聞的發布時間。

          從3個方面,幫你掌握時間顯示的設計細節

          在上面的案例中,我們會發現“時間”在對應場景里所發揮的作用不同,用戶在使用產品時往往對時間存在不一樣的關注程度。因此我們在做頁面設計時,要根據具體場景和用戶訴求判斷“時間”元素的重要性和優先級,通常情況下:時間作為事件的關鍵構成要素>行為的時間標記>內容的附屬信息,之后再思考用什么樣的設計形式去展示來達到我們的目標。

          “時間”的呈現方式和運用技巧

          在討論“時間”元素的設計之前,我們先共識一些有關時間的理解和概念。時間可以劃分為“時間點”和“時間段”兩個維度,類似我們高中物理時學過的“時刻”和”時間間隔“的概念。

          拿開會舉例子:“下午 4:30 會議開始”、“下午 6:00 會議結束”描述的是事件開始、結束的時間點,而“整個會議持續 1.5 小時”、“會議時間為下午 4:30-6:00”描述的是事件過程的時間段;但是,我們在會議開始時也可以這樣講“會議將在 1.5 小時后結束”。

          通過上面的例子我們可以發下,同樣是描述一件事情,運用不同的時間點、時間段的方式去表達,意思一樣但卻傳遞出不一樣的情感,并且兩者存在如下的“換算”關系:

          1)時間段加上定語會變成時間點(但同樣是時間點,“下午 6:00”是絕對時間,而“1.5 小時后”是相對時間,剛好對應到我們設計時兩種時間戳類型);

          2)兩個時間點之間則表示時間段。

          所以,我們在平時表達或設計時,要先想清楚用“時間”是想側重表達某一事件、動作發生的即刻時間節點?還是想描述其所持續的時間過程?之后我們再針對不同語境去選取合適的文案和呈現方式。

          從3個方面,幫你掌握時間顯示的設計細節

          時間的呈現方式離不開:時間戳類型、時間顯示格式、時間顆粒度。其中,時間顆粒度指的是描述時間的最小單位,往往顆粒度越細,給用戶傳達的確定感越強(如轉賬時間是 12 日 15:15:20),對用戶的激勵作用越明顯(如距搶購結束僅剩 00 時 01 分 23.6 秒)。

          1. 絕對時間戳

          絕對時間可理解為事物發生時的確切時間,由具體日期(年、月、日)和時間(時、分、秒)組成。使用絕對時間戳的優勢是信息傳達精準,顯得正式,給人確定感和安全感,同時排布規整,便于形成認知習慣;但缺點是內容顯示過長不利于閱讀,并且占用空間較大。

          從3個方面,幫你掌握時間顯示的設計細節

          在時間顯示格式的選擇上,為了避免混淆,推薦使用文字格式或“-”分隔符來分隔日期,而“/”分隔符在不同國家有不同的展示順序習慣,容易造成誤解,盡量少用。

          從3個方面,幫你掌握時間顯示的設計細節

          時間顆粒度的選擇依情況而定,一般場景總結如下:

          從3個方面,幫你掌握時間顯示的設計細節

          2. 相對時間戳

          相對時間在產品設計領域通常是指內容生產、到達、或狀態發生改變時,距當前時間點的時間差值,多用于 push 通知、信息流產品,側重強調內容的時效性;而“倒計時”也算相對時間的一種,側重營造時間的緊迫感。使用相對時間戳的優勢是用戶辨識、理解成本低,不用通過計算來判斷時間過去或還剩下多久;缺點是不夠精確、正式,并很難衡量兩個時間點的臨近性。

          從3個方面,幫你掌握時間顯示的設計細節

          在使用相對時間時,要注意格式友好。時間單位可隨著時間的推移自動改變;數字不要過多,盡量取整;并且可設置其與絕對時間轉換的臨界點。

          從3個方面,幫你掌握時間顯示的設計細節

          總結

          在設計界面中的“時間”元素時,要遵循場景貼合、便于閱讀理解的總體原則;之后根據場景和目標,再選取合適的“時間”呈現方式(包括時間戳類型、時間顯示格式、時間顆粒度)。

          當時間作為“A.事件的關鍵構成要素”時

          一般情況下使用絕對時間,并且要看是為了強調某一關鍵時間節點,還是側重表達整個持續過程。此外,選用關聯場景的文案或者運用倒計時(相對時間)的形式,可一定程度上促進用戶更加集中注意力,提升對信息的關注度,并達到特殊的激勵作用和轉化效果。

          當時間作為“B.行為的時間標記”時

          該場景通常是為了追求確定感,通過提供精準的時間和日期便于用戶定位到過去或將來的某個時間點(段)去查找、回顧相應內容,因此大多數采用絕對時間,時間顆粒度依具體情況而定。

          當時間作為“C.內容的附屬信息”時

          如果所設計的產品供給內容的更新速度快,用戶活躍度高,并且此時內容的時間信息準確性不那么重要反而更側重于內容的時效性,那么通常會使用相對時間。部分信息流產品(比如新聞資訊類、社區類)會在列表頁使用相對時間,在詳情頁使用絕對時間,時間顆粒度也是依情況而定;并且會隨著時間推移,在某一時間節點前把相對時間轉換為絕對時間。

          文章來源:優設 (VMIC UED)

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          復雜UI界面的8個核心設計法則

          純純

          復雜應用大多情況下是偏專業和B端的一些UI界面,它們大多出現在桌面端使用環境,并且終端用戶類型多樣,涉及流程、鏈條、業務也大多呈現出多變復雜的特征。這篇文章,來自UX設計領域的頂級存在NNGroup,作者為凱特·卡普蘭。

          到底什么是復雜應用?

          我們之前將「復雜應用」界定為特定專業領域當中,需要經過廣泛培訓之后使用的,有著非結構化目標、非線性工作流程的任何應用程序。這個概念可能聽起來有點抽象,不過這么說你可能會 更容易理解:從科學研究到專業人員,諸如金融分析師,它們常用的那些專業軟件應用。這類應用通常有著這些特點:

          • 為有專業知識和訓練有素的用戶提供支持
          • 幫助用戶瀏覽、管理大型數據庫,并提供高級的數據分析和處理的功能
          • 通過可變和多樣的基礎任務功能來解決問題或者達成目標
          • 需要在多個角色、工具、平臺之間進行協作或者切換
          • 可以用來減輕高影響力/高價值任務的風險,降低損失

          盡管不同的復雜應用之間差異很大,但是他們的共同點是,專業的從業人員對于這類工具有著極強的依賴性。

          考慮到設計師和開發者在面對這類工具的時候的挑戰,我梳理總結了 8 個復雜應用的設計原則和指南。

          1、采用邊做邊學的用戶流程

          很多研究表明,對于復雜的應用和工具,用戶更加青睞可以立刻上手開始使用而不受它復雜度影響的那類工具。

          與大量的教程、文檔、幫助和設置說明相比,能夠立刻開始的任務和項目,對于用戶有著莫大的吸引力。這種現象被稱為「活躍用戶悖論」。

          雖然在專業領域當中,倚靠摸索和試錯學習是不恰當也不安全的,但是一定程度的邊做邊學是必須的,因為不可能在培訓和手冊當中涵蓋所有的使用場景。

          所以,在設計的時候應該提供「跳過教程」的直接上手的偏好設置,同時進行相應的安全性設置,避免新手的莽撞操作導致損失。比如可以限制這個階段的用戶執行長流程多任務的操作,讓控制面板實時顯示操作結果或者預覽結果,這樣用戶無需執行全部操作就可以知道大概的結果。

          頂級團隊出品:復雜UI界面的8個核心設計法則

          在 Salesforce 控制面板當中,就可以實時預覽面板編輯的效果。

          2、為用戶提供有效的方法和建議

          絕大多數用戶都不是進階的專家級用戶,他們在絕大多數時候會使用基礎但是效率沒那么高的操作和執行方案。很多用戶形成習慣之后,通常不會主動做出改變,而這在日積月累之后導致大量的時間浪費,效率低下。

          值得一提的是,這個時候依賴冗長的文檔和教程其實很難達成效果,更合理的方式是結合用戶所處的上下文環境,通過界面工具提示的方式,適時地告知用戶「有更高效方便的方法」。

          通常,可以使用懸停提示,或者是彈出式工具提示來實現這一功能。

          頂級團隊出品:復雜UI界面的8個核心設計法則

          ArcMap 是一款地理信息系統類工具,它通常會通過上下文環境下的信息引導,來幫助用戶了解技巧。

          3、提供靈活而流暢的功能路徑

          復雜的應用程序,通常會有很多功能是分散的而非線性的,不同的功能組合起來可以實現特定的功能。在這類工具當中,用戶日??赡芤膊皇呛艽_切知道最終的目標是什么,而需要通過數據分析來逐步推進,同時,在知道確切目標的情況下,也應該可以遵循不同的路徑靈活地達成目標。

          設計師這些應用的時候,設計師應該避免使用固定、唯一、 僵化的實現路徑,迫使用戶必循嚴格按照某一固定路徑來做事情。一方面,允許用戶跳過某個步驟,或者回滾到更早的路徑,另一方面,允許用戶遵循不同的方式和路徑來達成目標。

          頂級團隊出品:復雜UI界面的8個核心設計法則

          比如萬事達卡的自助服務就可以通過交互式的圖表來引導用戶完成不同的任務。

          4、 幫助用戶跟蹤行為和思考過程

          復雜的任務,通常意味著它需要很多步驟,不同的環節,而在實際的應用場景中,某個分析步驟耗費幾個小時甚至幾天,都是有可能的。在高度復雜的現實生活中,某個步驟可能會換人接手,可能會因為硬件、 網絡等問題而暫停甚至丟失,這也意味著「可追溯性」是很重要的。

          所以,在這樣的復雜應用當中,應該允許用戶在使用過程中,可以便捷清晰地記錄、保存、 導出內容和記錄,允許用戶中斷,中斷后可以恢復特定的任務。在任務進行過程中可以進行注釋、保存相關的說明。

          頂級團隊出品:復雜UI界面的8個核心設計法則

          在決策建模軟件TreeAge 當中,用戶可以在分析和建模過程中進行開放式的注釋,可以后續在底部快速訪問這些筆記。

          5、可以協調多工具并且在工作空間之間轉換

          復雜的應用通常還會面臨一個狀況,就是工具本身的不足,用戶需要在多個工作空間上使用工具和內容的時候,它需要具備切換的功能。對于不具備的功能,應用程序應該允許使用第三方的應用來作為補充。

          比如當軟件不支持某個操作的時候,應該允許用戶從線上的其他數據庫中獲取并導出數據來使用,可以依托外部文檔作為支持,允許用戶在應用中做注釋和評論。

          減輕工作負擔的一個要點,是盡量使用通用的API、接口和標準,盡量兼容行業標準軟件,比如 Excel、Powerpoint ,盡量使用標準格式,等等。

          頂級團隊出品:復雜UI界面的8個核心設計法則

          微軟的商業分析軟件 PowerBI 就提供了標準化的導出和復制功能,非常方便

          6、減少混亂而不影響功能

          復雜應用通常旨在保持泛用性。使用場景多樣,多種不同的功能,一家汽車生產廠家,可能會和蜜蜂養殖機構采用同樣的工具和軟件來監測機器故障。但是,這種泛用性的另外一面,就是混亂性。復雜的應用可能會同時兼顧到基礎型的小白用戶和進階型的專家用戶,而后者用到的功能很小概率會被基礎用戶用到。

          所以,設計者需要在不降低功能性的情況下,基于應用場景、 用戶需求來進行簡化和優化,在保持功能完整易用的前提之下,降低復雜度和混亂度。

          分階段和層級展現就是一種降低混亂度但是不影響功能性的一種常見策略。當用戶進行到特定任務、特定階段、特等級別之后,再呈現特定功能,是有效的設計方法。

          頂級團隊出品:復雜UI界面的8個核心設計法則

          7、主次信息之間要能平穩過渡

          即使降低了混亂度,在復雜應用當中,信息量可能依然是過載的。通常,對于這種情況可以通過區分信息層級的主次來進行快速的區分,不過,從交互上來說,這可能依然不夠。

          對于諸如控制面板一樣的界面,用戶可能需要時刻查看面板上的信息,需要了解次級信息但是又不能離開界面,這就體現出主次信息之間的過渡呈現的重要性了。

          一般而言,使用類似與懸停顯示的方式,能夠比較柔和地將次級信息呈現出來,允許用戶查看詳細的定量數據。下面這個案例當中就是,懸停顯示更多次級信息。

          頂級團隊出品:復雜UI界面的8個核心設計法則

          8、在視覺上突出關鍵信息

          復雜應用通常在界面上包含由大量的信息,而這個時候關鍵性的數據如果不在視覺上做突出顯示,會被用戶錯過。通過視覺區分、提示警報的方式,讓用戶及時注意到,才有可能規避可能存在的問題。

          值得注意的是,讓關鍵信息和元素凸顯的方式,并不一定非得是使用鮮艷的色彩和較粗的字體,簡單的放大呈現,使用圖形化的元素輔助提示,或者是提供足夠的留白都可以達到目的,就像下面的案例一樣:

          頂級團隊出品:復雜UI界面的8個核心設計法則

          結論

          復雜的應用多種多樣,支持的服務和功能也千差萬別,但是無論如何呈現,此類復雜應用的設計都是非常挑戰設計師的設計功底的,需要設計師了解業務,了解用戶,并且能夠通過設計更好地提供服務。

          文章來源:優設(陳子木)   作者:Kate Kaplan

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          干貨|交互設計中的「有效反饋」7大準則!

          seo達人


          準則 1.  Timely —— 找準時機,即時反饋

          在用戶操作后盡快 / 立即給予反饋是最有效的。即時反饋有助于幫助用戶養成正確的操作習慣,或糾正用戶的不當操作。

          如果反饋內容需要較長時間的加載,也可以給用戶設計一些有特點的 / 情感化的加載狀態,緩解用戶等待的不耐煩,又可以傳達一定的品牌調性。

          例如:知乎 App 在加載內容的過程中,增加了 IP 形象的動態效果:

          圖片

           

          準則 2.  Specific —— 具體分析,差異對待

          在設計交互反饋時,不僅僅要給出正確或錯誤的判斷結果,同時也應該考慮到用戶的個性化需求,針對不同類型、場景、地區的用戶提供差異性引導和服務。

          例如:大眾點評、高德地圖可以根據用戶的位置,在用戶開始使用產品時就推送個性化信息:

          圖片

           

          準則 3.  Balanced —— 正負反饋,穿插結合

          通常來說,正面的反饋會激發用戶的自信等積極情緒,因此我們更習慣使用正面反饋。但是一些不得不使用負面反饋的時候,我們可以在其中穿插一些正面的消息,減少或緩解用戶的因負面反饋帶來的消極情緒。

          這就好像是別人跟你說:“ 壞消息是……,但是,這樣做的好處是…… ”,壞消息不可避免,但加上一點轉折,就會讓他人心里稍微舒服一些。

          例如:美團單車在你騎完車之后,需要支付費用時提示你可以購買單車套餐,雖然是在勸用戶花錢,但看上去依舊很友善,其中的話術包括:“本次騎行免費”,“當前已是最優價格”:

          圖片

           

          準則 4.  Instructive —— 提示下步,指引行動

          有效的反饋會主動多引導一步,對用戶的下一步行動給出清晰的、正確的、指導性的意見,有助于驅動用戶繼續做出有效操作。

          很多 App 在截屏之后都會給出下一步分享的路徑引導:

          圖片

           

          準則 5.  Emotional —— 情感屬性,引起共鳴

          有科學依據證實,人腦會更容易被附帶情緒的信息所吸引。用戶更有可能會注意那些看上去承載了一些情緒的反饋,從而也更有可能改變其行為方式。

          例如:雖然只是一個提醒彈窗,QQ 音樂會員到期的續費提醒文案卻經過精心的設計,由各類歌名組成的一句話,每天的到期提醒都不同:

          圖片

           

          準則 6.  Traceable —— 可被溯源,可供反饋

          一些特殊情況下的、有重大意義的反饋可以被追溯到其根本原因,可以提供給用戶進行申訴和詢問的渠道,供用戶進行反饋。

          例如:電商平臺和外賣平臺都會在用戶下單或退單之后,提供商品物流的詳細信息,在查看購買的商品的當前狀態時,并可以追溯到商品所在的各個歷史環節:

          圖片

          再比如,高德打車如果發現用戶的行程訂單金額與預估金額差距較大時,會給用戶發短信提示,并給出客服和投訴渠道:

          圖片

           

          準則 7.  Less is more —— 質量優先,減少數量

          在這個信息過載而注意力稀缺的時代,好的反饋在于質量,不在于數量。有時數量越多,反而會對用戶造成不必要的負擔。用戶并不需要給出很多反饋或者記錄生活中一切信息的產品,而是需要能夠幫他們理出頭緒、提出有效解決方案、呈現有用信息的產品。

          以上這 7 大準則,來源于我們日常工作中的積累和沉淀,對于設計產品的交互反饋具備較高的指導意義,希望對你有啟發。

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》干貨|交互設計中的「有效反饋」7大準則!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合