<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>

          首頁

          微交互:設計師的超能力

          前端達人

          微交互在用戶體驗中占據越來越重要的位置,來看看微交互該如何應用吧~

          大概幾周前,在他的朋友和孩子們的大力勸說下,我并不那么精通互聯網的爺爺加入了Facebook。最后。在我教他設置個人資料,創建帖子和后續頁面時,他遇到了一個有趣的事,在嘗試摸索頁面中不知何故偶然發現了著名的LIKE按鈕。他將鼠標懸停在“贊”按鈕上,彈出了6個表情符號,然后單擊“ HAHA”笑臉,這使他對這個小動畫感到敬畏。這就是微交互對產品或應用程序的強大功能。


          資料來源:Giphy


          我們作為用戶,每天都能看到和應用這些微交互,有些甚至沒有意識到。“喜歡”按鈕是最簡單的示例之一。其他幾個是:

          • 滾動鼠標時出現的簡單滾動條

          • 向左滑動即可清除iPhone主屏幕上的通知

          • 能夠看到其他人在消息傳遞應用程序上“打字”

          • 一個進度條顯示下載百分比

          • 拉動以刷新,以在應用程序屏幕上重新加載內容

          • 交互式錯誤頁面,例如Google Chrome和為文章點贊是一些最常見的微交互。那么,為什么這些非常有效?為什么每個應用程序都有它們?


          資料來源:Dribbble

          一.什么是微互動?

          微交互就像與設備的任何其他交互一樣,用于將有意義的反饋傳達給用戶,因為用戶必須不斷知道執行某項操作時會發生什么。這是一種人們期望發生某些事情的趨勢。例如:單擊按鈕,滾動頁面,將商品添加到購物車,向左滑動卡片。

          資料來源:Dribbble

          這通常是通過提供系統狀態(尼爾森的啟發式方法)或幫助用戶避免常見錯誤來實現的。當您未填寫必填字段時,帶有錯誤消息的紅色邊框就是微交互。


          例如看下面的互動

          豎起大拇指— Facebook Messenger


          該動畫是微交互的一個很好的例子,因為它實現了三個重要功能:

          • 溝通狀態并提供反饋

          • 增強直接操縱感

          • 幫助人們看到自己行動的結果


          二.微交互的構成

          分解

          微觀互動包括四個部分:

          • 觸發器啟動微交互。觸發器可以由用戶啟動或由系統啟動。

          • 在用戶啟動的觸發器中,用戶必須啟動一個動作。

          • 在系統啟動的觸發器中,軟件檢測到滿足某些資格并啟動操作。

          • 規則確定了觸發微交互后會發生什么。

          • 反饋使人們知道發生了什么事。發生微交互時,用戶看到,聽到或感覺到的任何東西都是反饋。

          • 循環和模式決定了微交互的元規則。當條件改變時,微相互作用會發生什么?


          三.微交互的作用

          如果微交互僅僅是微小的設計元素,為什么還要關心它們呢?

          很多Web開發人員和設計人員還在問這樣一個問題。注重細節是一個優秀網站與普通網站的根本區別。 這些就是使用微交互的原因:

          • 他們改善了網站導航

          • 它們使用戶更輕松地與您的網站進行交互

          • 他們向用戶提供有關已完成操作的即時和相關反饋

          • 他們給您的用戶提示

          • 他們交流有關某些元素的信息,例如是否互動

          • 它們使用戶體驗更有意義

          • 他們鼓勵分享,喜歡和評論您的內容

          • 他們引起用戶的注意

          • 最后,它們只是使您的網站更具情感性


          精心設計的微交互是用戶關心的明顯標志。這就是為什么他們如此重視。用戶可以做什么,以及他們的行為是否正確并得到系統的批準-應用程序或網站可提供即時的視覺反饋,并教會用戶使用系統。

          正確進行微互動后,它們往往會給您的品牌帶來積極的感覺并影響用戶的行為,而人們甚至根本沒有意識到為什么這樣做。如果您喜歡或不喜歡產品的某個方面,則通常對產品有正面或負面的傾向。這種所謂的“哈洛效果”既可以支持您也可以對您不利。在明智的情況下,這些知識可以幫助改善用戶對您網站的反饋-通過適當注意細節,可以使用戶滿意。


          四.什么時候使用微交互

          在UX / UI世界中,盡管微交互非常微小,但與用戶進行交流時卻是強大的動力。以下是最常見的微交互及其對用戶體驗的影響:


          輕滑

          “輕滑”動作消除了輕擊,并且更具交互性和流暢性。它可以幫助用戶在選項卡之間快速切換并獲取有關產品的更多信息。此外,輕滑是一種非常常見的手勢,可以在不引起用戶思考的情況下潛意識地引導用戶。就像我們一直在讀“不要讓您的用戶思考”一樣,既有趣又令人上癮。


          數據輸入

          我們所有人都知道設置密碼或創建帳戶的麻煩。這個動作很容易引起用戶反感。關于密碼強度和用法的前瞻性建議可以使用戶輕松前進,而在輸入數據時進行一些交互也可以使用戶參與該過程并有助于實現目標。


          動畫

          動畫可以簡單地啟用并改善微交互。他們的存在可能不會被注意到,但是缺席給每個人造成了損失。它們就像膠水一樣,可以幫助設計師使最簡單的過程變得有趣和令人上癮。但是要非常小心,因為它們意在吸引用戶,而不會使他們分心或沮喪。延遲處理或在網站中引入新樣式可能會引起混亂。


          當前系統狀態

          必須使用戶了解網站或應用程序上當前發生的狀態,這一點很重要。如果不通知用戶,他們將很生氣并關閉網站或應用程序。微交互使用戶可以準確地知道發生了什么,完成該過程需要多長時間等。即使失敗消息也很幽默,但有效地保持了用戶的信任。


          使教程變得有趣

          每個人都在不斷尋求信息。借助微交互功能的教程通過簡化和突出顯示基本功能和重要控件以方便用戶理解,從而指導用戶進行應用程序的工作。


          號召性用語

          微交互實質上是在推動用戶與應用程序或網站進行交互。號召性用語給用戶帶來了成就感,也給用戶行為灌輸了同理心,使用戶與CTA互動的最佳方法是使CTA吸引用戶的興趣。


          動畫按鈕

          通過讓用戶知道他們通過您的應用程序或網站的方式,它們起到了信息管理器的作用。我們需要注意顏色、形狀、特殊效果、動畫、位置和紋理,以使用戶體驗自然而順暢。


          滑動手勢

          通過使用手勢隱藏一些動作項,這些類型的交互可用于節省移動設備上的空間。例如,您可以看到向左滑動將刪除電子郵件,向右滑動將存檔電子郵件。同樣,在鎖定屏幕上取消/清除通知。

          快速操作

          一個簡單的快速動作示例就是,當您點擊并按住應用程序圖標時,在Apple設備上進行3D觸摸,它將為您提供用戶最常使用的上下文動作項。這樣可以節省點擊次數和時間。例如,Instagram會呈現諸如相機、新帖、活動等動作。


          交流信息

          這些類型的交互會分解復雜的信息,并使用視覺,動畫將信息輕松傳達給消費者。一個完美的例子是解釋信用卡上的利息費用。這是一個敏感的話題,Apple Card通過使用圓形互動動畫來告知用戶和最高費用,再次贏得了客戶。


          互動參與

          有時,您希望用戶通過使他們感到驚奇的方式來與界面進行交互。這種令人驚訝的結合動作會更加產生更強大的影響。Robinhood App最近發布了一張借記卡,其候補名單超過一百萬。要在候補名單中上移您的位置,用戶可以轉到其應用并點擊該卡(最多60次)。這是使用戶與應用程序交互的一種有趣方式。

          提供反饋

          在用戶觸發某些內容或輸入某些內容之后,Motion可以有效地用于向用戶發送反饋。錯誤狀態和成功狀態就是這些示例,下面是移動應用程序正確和不正確密碼輸入的示例。

          向用戶介紹界面

          每當啟動具有精美功能的新產品或應用程序時,如果用戶發現它太難理解,它終將失敗。因此,在此類情況下,應用程序可以利用微交互來向用戶介紹功能。例如,N26 Fintech App使用動畫來演示用戶如何將錢從一個儲蓄桶轉移到另一個。


          引起用戶的注意

          當移動屏幕上的大部分空間都充滿信息時,很難突出顯示我們希望用戶注意到的特定功能。通過使用動畫和過渡效果,微交互可以在為用戶帶來愉悅感方面發揮至關重要的作用。例如,在Slack上,在您開始鍵入之前,發送按鈕變灰,一旦開始鍵入,它將變為藍色,向用戶指示這是號召性用語按鈕。


          使加載屏幕有趣

          大多數加載屏幕都很無聊,但是微交互和動畫可以將它們變成非常有趣的東西。每當加載或設置過程中有等待時間時,Google都會利用此空間為其用戶創造出色的直觀體驗。這是一個例子:


          我們人類一直在努力尋求即時滿足。在更大的事物方案中,忽略微交互是一種普遍的趨勢,但不可否認微交互對于保持用戶對產品的興趣和好奇非常重要。每個人都說細節就是魔鬼。小小的體驗和設計功能(例如在屏幕之間切換或突出顯示功能或彈出新通知)可以在增強用戶體驗方面產生巨大差異。


          五.如何設計微互動?

          進行微交互對于設計師來說是令人興奮的,因為可以嘗試新的設計解決方案并尋找使用戶感到驚訝的新方法。但是為此,您必須牢記以下幾點:

          • 把自己放在用戶的角度考度,并使用所有您要弄清楚他們如何使用您的應用程序。

          • 創建功能動畫。不僅具有美學效果而且能夠增強用戶體驗的動畫。

          • 讓用戶保持愉悅。用戶使用該應用程序時的感受是其不斷使用該應用程序的原因。如果用戶喜歡并感到愉快,他將再次使用產品。

          • 不要打擾到用戶。過多的動畫會對用戶產生相反的影響。令人討厭的用戶使他們遠離您的應用程序。

          • 使用人類語言和非技術性語言。有趣的文案可能會讓用戶暫時忘卻應用程序中空白頁面的沮喪。


          六.設計微互動的工具

          那么,設計人員應該熟悉哪些原型制作工具?那里有很多工具,但并不是每個人都知道哪種工具最適合特定的微交互任務。根據我個人設計這些元素的經驗,以下是我的建議。

          如果你熟悉編碼:

          • 手機:Xcode,Android Studio

          • 手機或網頁:Framer

          • 網頁:CSS動畫

          如果要創建更詳細的交互:

          • Principle,Adobe CC,origami Studio和Protopie

          如果要創建詳細的交互+動畫:

          • After Effects




          轉自:站酷

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

          以用戶體驗之名,談談企業協作平臺的產品設計

          前端達人

          從雇傭關系看企業級協作產品的設計理念和原則

          今年的新冠疫情突發,讓企業級協作產品的賽道熱鬧了起來。前有釘釘,企業微信,后有飛書帶刀入場,其他廠商看了眼紅,趕緊行動起來,所以在這片一眼望不到頭的草原上,你還能看到百度的如流,美團的大象,網易的popo等等。

          如今疫情控制的結果也算喜人,經過大半年的時間的市場錘煉,現在這些個企業協作平臺也需要被懷揣著審視的目光來看看接下來要走的路。

          按照公司的要求,我在工作中頻繁的使用到“釘釘”這款產品,接觸的這4年多時間大概也就是企業協作平臺的發展史了,我試著總結了一下:

          起初產品設計的初心也許僅僅是為了員工之間的交流,依托公司的組織架構,不需要在添加好友/通過驗證之類的繁瑣流程直接溝通,有事說事賊方便。特別是消息回執(就是被萬人唾罵的“已讀未讀”)更看出來了釘釘對溝通“效率”的重視。

          坦誠的講,釘釘這點我很認同,我自己也是一名用戶體驗設計師,過去做企業級應用的核心就是圍繞 “效率”去做的,始終把用戶路徑的長短作為我個人無形的KPI,面試跟人吹牛X的時候也是舉例說的這些。

          但B端的設計就僅僅是所謂的“效率”么?唯效率的設計就一定好么?


          01 效率的背后也許是姿態的傾斜


          你有沒有不想打開釘釘(甚至某一時間想卸載掉)的沖動?阿里巴巴當初推出釘釘這個在線辦公協同產品,出發點是為了方便企業內的辦公協作,溝通記錄、文件資料、流程審批、員工名錄等都能有效得到管理,防止丟失并隨用隨取。


          后來味道變了,以“釘一下”為例,發起者可以無限次的對接收者發送信息并以“增強提醒”語音的方式提示??吹某鰜?,這種交互設計本著觸達無障礙去做的,但卻忘記了設計使用門檻,從而造成了“誰有事誰牛X的局面”,如果沉下心來研究,會發現在這過程里情緒的變化是及其明顯的:

          企業管理學里有一條著名的學說“峰終定律”(后被廣泛應用到用戶體驗領域里),大概是意思是:“在一段體驗的高峰和結尾,體驗是愉悅的,那么對整個體驗的感受就是愉悅的”。

          那么釘釘的這些個機制可能就是峰終定律的反面教材了。每一個企業級協作平臺企業都在標榜自己的創新和功能的全面,殊不知這就是典型的通過產品功能機制進行的微觀管理,間接加劇雇傭關系的僵持。甚至一定程度上變成了控制…員工和企業的關系我不好說,但這些企業協作平臺真真實實的在彼此關系上掃滿了鹽。


          02 固化的設計理念


          翻看了眾多大廠的B端設計原則和設計理念,無一例外,所有的被沉淀下來的“原則”幾乎都是“效率”,甚至一提到跟B端相關的設計就永遠是“效率!效率??!效率?。?!”:

          以效率為核心的設計幫助任務流更的完成,就這點無可厚非,我自己也是一名用戶體驗設計師,過去做企業級應用的核心就是圍繞“效率”去做的,始終把用戶路徑的長短作為我個人無形的KPI,面試跟人吹牛X的時候也是舉例說的這些。


          然而不同于C,企業協作平臺是企業要求員工統一使用的協作產品,為了方便信息集中管控,絕企業員工被迫通過一次學習后逐漸轉為不用動腦子的肌肉記憶。B端員工只想要“干完活”,C端的“圖新鮮”是發自內心的去找樂子。所以當被強迫完成任務的情況下,大部分情況下是一個偽命題。


          03 設計原則要講究“真人性”


          通過審視的目光去看當下的設計原則,企業級協作平臺經歷了起始期的“溝通剛需”和發展期的“功能堆疊”后,未來應該多考慮“員工與組織”/“員工與企業”的大命題,希望是以“橋梁”的姿態出現,以幫助雙方更好的完成工作為目標去設計:

          這其中有兩點需要著重注意:

          1. 效率從人性出發

          先說個題外話,過去,我們在求職時期的路徑大概率是到某幾個招聘網站上挨個填寫個人信息/工作經歷/獲獎情況,但伴隨著 OCR技術成熟,一個word/pdf上傳,自動識別了所有信息,幫助企業和候選人大幅的解放了勞動力。與之類似的是:日報周報月報,除了工作總結偏腦力勞動需要人工產出之外,工作內容這種條目的列舉完全可以幫員工包辦了,畢竟釘釘上記錄了大量的工作文件和日志。單靠一個周報模版絲毫解決不了問題。

          2. 情感化設計不能只停留在表象上

          之前跟釘釘的設計師有過情感化設計的交流,對方對情感化的理解更多體現在人文關懷上,特別是在打卡這個功能上,超過幾點下班打卡后會有一句暖心的話激勵員工。對此我還是保留意見,理智支撐我不許叫這個設計為情感化設計,因為美好的文字和漂亮的圖形都只是表象而已,并沒有幫助用戶解決問題,所以頂多就是圖形設計,說的好聽點是graphic design。

          我理解的情感化,從始至終要以解決用戶問題出發,與其有時間畫畫漂亮的圖形,不如去做業務的橫向打通,幫助在深夜快點打車回家來的更實在。


          總結一下


          總的來說就目前國內像這種B端企業級應用真的還就是處在功能打通的階段,未來去balance雇傭關系的大局面市場還是很大的,從這個角度來看這個賽道還有的一拼,期待更多的大廠入場來改善僵持的雇傭關系。



          轉自:站酷

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


          UI界面設計常見的布局構圖

          前端達人



          構圖是指作品中藝術形象的節后配置方法。是造型藝術表達作品思想內容,并獲得藝術感染力。在視覺藝術中常用的技巧和術語,特別是繪畫、平面設計與攝影中。在UI設計中,構圖的主要作用是:構建和諧穩定的頁面布局。



          1.1 最平衡的構圖對稱構圖1:1 

          左右對稱上下對稱的構圖,一般不會有太大問題,因為人類對世間萬物的觀察來看,因為在生活中絕大多數的事物都是對稱的。


          對稱平衡的形態在視覺上有自然、均勻、協調、整齊、穩重的美感,復合用戶的視覺習慣。



          “對稱構圖”是將版面分割為兩部分,通過設計元素的布局讓畫面整體呈現出對稱的結構,具有很強的秩序感,給人安靜、嚴謹和正式的感受,呈現出整齊、平穩、經典的氣質。在得物(毒)中應用體現平臺的核心正品與品質。



          1.2 設計中不平衡原因

          視覺錯覺是指人們對外界事物的不正確的感覺或知覺。最常見的是視覺方面的錯覺。產生錯覺的原因,除來自客觀刺激本身特點的影響外,還有觀察者生理上和心理上的原因。其機制現在尚未完全弄清。



          (1)繆勒—萊爾(Maller-Lyer Illusion)錯覺:1989年由繆勒一萊爾(F.Muller-lyer)設計,末端加上向外的兩條斜線的線段比末端加上向內的兩條斜線的線段看起來長一些,其實兩條線段等長。

          (2)艾賓浩斯錯覺(Ebbinghause Illusion):看起來左邊中間的圓比右邊中間的圓大—些,但實際上這兩個圓的大小相同。

          (3)龐佐錯覺(Ponzo Illusion):中間的四邊形是矩形,而不是頂邊比底邊寬的四角形。

          (4)厄任斯坦錯覺(Ebrenstein Illusion):中間矩形的四條邊看起來是彎曲的。

          (5)黑靈錯覺(Hering Illusion):中間兩條線是平行的,但看起來是彎的。

          (6)菲克錯覺(Fick Illusion):垂直線段與水平線段等長,但看起來垂直線段比水平線段長。

          (7)馮特錯覺(Wundt Illusion):中間兩條線是平行的,但看起來是彎的。

          (8)波根多夫錯覺(Poggendoff Illusion):被兩條平行線切斷的同一條直線,看上去不在一條直線上。


          1.3 不平衡中的平衡構圖

          在整體的頁面平衡的情況下,同樣還需要考慮視覺上的平衡。


          任何東西都不能在頁面上隨意安放。每個元素都應該與頁面上的另一個元素有某總視覺聯系,而這個視覺聯系往往是看不到卻可以感受到平衡感,在平面海報中的平衡原則得到了最大的應用。



          如上圖所示,三少爺的劍這個海報設計,將整個海報布局進行幾何化分析,地面為一個傾斜的平面,人物為一個垂直于地面的一個個體,人物上方為主體文案。幾何化后如同一個傾斜的斜面放置了一個傾斜的天平,最后一個“劍”字、與下方英文如在右傾斜天平上面的一個穩定的砝碼。然而整體還是不夠平衡,設計師通過燕十三的視覺視線、以及圍繞他的殺手用劍指向他的方向為力的方向將整個頁面進行平衡。通過用劍多少占比、字體大小等等的細節使得整個頁面達到最微妙的平衡點。這樣的設計之后達到一種平衡而有不平衡的微妙感覺,不平衡感體現整個頁面的“ 動 ”武俠之感油然而生;而平衡感表達了整個頁面的“ 靜 ”冷冷的肅殺感、高手的寂寞感油然而生。



          讓設計中的視覺要素在畫面中頁面平衡??梢酝ㄟ^字重、顏色、形狀、線條、圖片占比等等,這樣可以增加整體頁面的平衡感。通過小米中的構圖可以看出上方所有圖片文字偏左,通過右方一個高亮的按鈕進行平衡感的設計;下方文字左邊文字較少用重的深色的字體,而右邊文字較多用輕且淺的文字這樣的設計達到整個頁面的平衡感。



          2.1 黃金分割設計法 

          黃金分割是指將整體一分為二,較大部分與整體部分的比值等于較小部分與較大部分的比值,其比值約為0.618。這個比例被公認為是最能引起美感的比例,因此被稱為黃金分割。



          設一條線段AB的長度為a,C點在靠近B點的黃金分割點上,且AC為b,則b與a的比叫作黃金比,黃金分割具有嚴格的比例性、藝術性、和諧性,蘊藏著豐富的美學價值,這一比值能夠引起人們的美感,被認為是建筑和藝術中最理想的比例。 

          畫家們發現,按0.618:1來設計的比例,畫出的畫最優美,在達·芬奇的作品《維特魯威人》、《蒙娜麗莎》、還有《最后的晚餐》中都運用了黃金分割。



          UI頁面設計中的黃金分割比的應用有很多如上圖所示,頁面整體功能擺放位置,遵循黃金分割比的分配表達出來整體頁面更加的和諧聚焦。


          2.2  九宮格設計法


          九宮格構圖有的也稱井字構圖,實際上屬于黃金分割法的一種形式。就是在畫面上橫、豎各畫兩條與邊平行、等分的直線,將畫面分成9個相等的方塊,在中心塊上四個角的點,用任意一點的位置來安排主體位置,就是九宮格構圖。



          實際上這四個點都符合“黃金分割定律”,是表現畫面美感和張力的絕佳位置。當然在實際運用中還應考慮平衡、對比等因素這種的構圖原則在海報以及攝影中有著極大的使用。



          3.1 UI頁面布局的格式塔原理 

          格式塔心理學誕生于1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的:我們的視覺系統自動對視覺輸入構建結構,并在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域?!靶螤睢焙汀皥D形”在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。



          創始人提出的5項基本原則:簡單、接近、相似、連續、封閉。


          3.2 簡單幾何構圖法

          簡單原則就是具有對稱、規則、平滑的簡單圖形特征的各部分趨于組成整體。我們的眼睛在觀看時,眼腦并不是在一開始就區分一個形象的各個單一的組成部分,而是將各個部分組合起來,使之成為一個更易于理解的統一體。



          簡單閱歷暗合構圖法則,例如常見的三角形構圖,均衡構圖,對陣構圖,向心式構圖,對角線、x型構圖等,其目的都是為了在復雜的信息環境中,構建更易懂的整體。


          3.3相似構圖法

          相似原則指的是在某一方面相似的各部分趨于組成整體,強調內容。而接近強調位置。人們通常把那些明顯具有共同特性(如形狀、運動、方向、顏色等)的事物組合在一起。



          由上圖可見,當用戶看到這個這個頁面的時候,會自覺的把上面5個icon看作一個整體,因為他們的顏色形狀都是相同的;文字顏色與字體大小相同會被自然的看作成為一個相同的功能,如同樣的紅色都是價格,同樣的黑色都是商品名稱;相同的汽車圖片直接清洗的都可以歸類為同列表商品。


          3.4接近構圖法

          單個視覺元素之間無限接近,視覺上會形成一個較大的整體。距離近的單個視覺元素會溶為一個整體,而單個視覺元素的個性會減弱;



          相關元素會盡量接近,不相關的盡量遠離。這種構圖它強調化繁為簡,去除一切與內容無關的裝飾性元素,突出內容本身,好讓重要的信息及功能更容易被關注,讓用戶增加更清晰和直觀地進行瀏覽。在這種排版設計中,您幾乎看不到區分內容的分割線,他通過大間距完成了視覺層次的劃分,留白是它們最大的武器。



          彼此相關的項,歸組在一起。如果多個項相互之間存在很緊的親密性,他們就會成為一個視覺單位,而不是多個孤立的元素。這樣有助于組織信息,減少混亂,為讀者提供清晰的結構。






          轉自:站酷

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

          2021年10個LOGO設計趨勢

          前端達人

          在經歷了一個不太理想的新十年開局后,年輕人們迫切需要重塑品牌。幸運的是,以下2021年的標志設計趨勢完全可以勝任這項任務。

          觀察來自世界各地的logo設計作品,他們的預測代表了設計環境的變化。雖然去年的趨勢集中在通過新技術進行革新,但2021年標志趨勢中的一個共同主題似乎是限制條件下的創新。過去的一年可能在很多方面限制了世界,但是2021年的標志設計師們還都在繼續努力著。



          • 彩色玻璃

          • 透視圖

          • 簡單幾何

          • 發散字母

          • 真實寫真

          • 原始對稱

          • 古怪的人物

          • 現代象征主義

          • 靜態運動

          • 類似配色方案


           

          標志設計作為一項相對現代的發明,往往在過去的技術和局限中尋求靈感。在2021年,許多標志設計師在過去時代的彩色玻璃窗中找到了啟發。


          undefined

             

          當應用到現代設計中時,將圖像分割成純色碎片,給普通概念增添了一點抽象感。彩色玻璃也與神圣聯系在一起,因為它起源于中世紀教堂。這可能不是巧合,這種標志趨勢經常與美麗的自然景觀結合使用。在一年的大部分時間被困在室內之后,我們可以期待我們脆弱的生態系統將在2021年的彩色玻璃標志設計中得到尊重。


            


          正如標志設計師林登·萊德(Lindon Leader)曾經說過的那樣,偉大的設計源自簡潔和清晰。這兩個優點使標志設計能夠有效地向觀眾傳達品牌的復雜身份。這就是為什么許多過去的標志潮流都集中在極簡主義和平面設計上。




          雖然2021年的logo設計師們決不會放棄這種方法,但他們正尋找在過度簡化中失去的一些魔力。一個流行的標志設計趨勢是融入微妙的視角。使用基本的繪畫技巧,如線性透視,曲率或縮短,設計師能夠創造深度的錯覺,而不會使設計復雜化。



          其效果是,標志給人的感覺很突出,品牌從頁面上一躍而下,而半平面的設計技術,一直以來都是為設計師服務的,但至今仍然完好無損。

            

          形狀是構成意象的基石。但是,盡管三角形、正方形和圓形等原始形狀一旦打下基礎,往往就會被淘汰,但它們純粹的簡單卻有力量。



          2021年的設計師們正利用這種力量,用簡單的線條和形狀制作出標志。這種對形狀極簡主義的嚴格遵守給了這些標志一種刻意克制的氣氛,允許他們在其他地方自由發揮,比如在豐富的顏色飽和度上。


          undefined


          這種方法的另一個特點是,簡單的分層可以產生一種結構和深度的錯覺,這符合我們前面提到的透視圖趨勢。通過純粹的造型語言,設計師能夠創造出易于解析、令人難忘、色彩鮮艷的logo。


            

          基于字體的文字標記標識有著直截了當的名聲,無論好壞。雖然他們使品牌名稱成為整個標志的焦點,因此更令人難忘,但他們沒有留下太多的空間,為創意鋪路。但是2021年的標志設計師們正在一個字母一個字母地改變這種印象。

          undefined

          undefined


          具體來說,我們看到越來越多的單詞標記中的一個字母被夸大了。這可以是一個顏色突出的小寫的“i”,或作為一個突出的筷子形成一個大寫的“H”。這個不同的字母不僅創造了一個吸引眼球的興趣點,它給予品牌最好的選擇:一個傳統的,基于類型的標志,也不怕打破規則。



            

          人們憑直覺尋找其他面孔,這是一個有據可查的事實,這就是為什么肖像畫有助于在設計中建立情感聯系。這些面孔越真實,越容易辨認,聯系就越深。

          undefined


          因此,2021年更多的標志設計師開始轉向反映不同種族、文化、性別、年齡段等的肖像畫。與媒體過于擁擠的同質表現不同,這種方式創造了真實的印象,有助于人們在瞬間與品牌建立聯系。這些標志可以從簡單的,平面的人物肖像到詳細的說明性技術。


          歸根結底,設計師們厭倦了那些讓人感覺不親切的形象。歸根結底,無論一個標志是在講述品牌背后的人還是品牌服務的人的故事,人都是關鍵。


          undefined

          undefined


           
            

          平衡是標志設計的基本原則之一,而對稱也許是其最極端的表現。對稱的標志從中間分開時,兩邊是相同的。


          雖然相同性和可預測性似乎是冗余的同義詞,但對稱設計完全是關于強度的。它們讓我們想起了建筑,無論多么高大復雜,它們的設計都是為了站穩腳跟,它們通過完美的對稱平衡來實現這一點。


          undefined

          undefined


          這種原始的對稱性允許標志包含線條藝術,感覺既不可能復雜又完美有序。但即使對稱在幾何設計中很常見,我們也看到這種趨勢在手繪徽標中找到了歸宿。無論是設計師追求的完美還是實力,有一點是肯定的:2021年的標志建筑是為了經得起時間的考驗而建造的。


          undefined

          undefined


           
            

          雖然logo設計師在真實人物的表現上處于領先地位,但2021年的其他許多人則通過漫畫和夸張的幽默來對比這一點。我們正在看到越來越多的以插圖為主要內容的logo呈現出詼諧,甚至古怪的概念,從玩老鼠的醫生到華麗的甜甜圈花花公子。


          undefined

          undefined


          從事舒適或娛樂的企業希望能讓他們的觀眾放松,而設計師們則用散發著博愛氣息的logo來回應。最終,這些異想天開的設計讓顧客覺得他們找到了朋友而不是品牌。


            

          邏各斯的根源一直是古老的象征,從升起的鳳凰到不朽的女神,再到無所不能的眼睛。就像古代的象形文字一樣,它也是一個標志的目的,通過簡化的圖形來傳達信息。


          undefined

          undefined


          通常,logo尋求創造他們自己獨特的符號語言,但在2021年,設計師們正在疏導古代符號的力量。其效果是將人們普遍理解的、經典的美德與奮斗品牌的愿景聯系起來。開始一個新的企業是一個信仰的飛躍,這些象征性的標志承載著一個啟示的承諾。


          undefined

          undefined


           
            

           

          undefined

          undefined


          這意味著運動跟蹤器、流體形狀、飛濺粒子和動作線的增加。對于那些希望創新的企業,比如科技品牌,這是一個標志潮流,肯定會引起轟動。它提醒顧客品牌不僅僅是一種產品或服務:它是一種活的東西。


          undefined

          undefined


           
            

          隨著每年的標志設計潮流,我們常常期望找到令人眼花繚亂、革命性和顛覆性的技術。另一方面,相似的配色方案是學生設計師在第一年的色彩理論學習的內容。這基本上意味著在色輪上對彼此相鄰的顏色進行配對,其結果是創造和諧的科學方法(代替對立顏色的對比)。


          undefined

          undefined

          雖然類似的配色方案并不一定是新的,但它們在標志設計中日益流行可能表明了對對比度的排斥。色彩是設計師用來影響觀眾情緒的最重要的工具之一。


          undefined

          undefined

          undefined

          2021年的標志設計趨勢是重塑這個新的十年的一個機會。從透視技法到簡單造型再到對稱性,從極簡主義到古典主義的復興,我們未來的理性似乎在追求一種純粹。


          轉自:站酷

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

          交互設計方法論

          前端達人

          通過對產品用戶界面的分析與設計方法論相關聯,梳理了在UI UE日常設計中使用的一些定律和原則;相信大家在工作過程中都遇到過這類靈魂拷問“你這么設計的依據是什么? 為什么這么設計”,熟悉了這些定律、原則 我們就能自如的去應對這些拷問,也能夠非??斓娜ナ煜な忻嫔系囊恍┲髁髟O計規范。



          轉自:站酷

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

          UI/UE設計師的產品體驗日記

          前端達人

          指尖滑動屏幕的時候,多停留幾秒,捕捉一些用心的設計,記錄并反思應用到自己的設計中去。用心設計,讓我們的生活更加美好!

          01、廣告植入


          關鍵詞

          #運營  #廣告


          產品體驗

          微信:刷朋友圈的時候,無形中就刷到了廣告,以朋友圈的圖文展示。也可以進行點贊,留言互動。

          微博:在關注列表中也會有一些廣告推送。用戶可以自己關閉。

          愛奇藝:打開視頻觀看前,會有一小段廣告時間播放,如果沒有購買會員是需要強制觀看完廣告才能看視頻正片。


          設計思考

          微信:隱形植入廣告,以“朋友”的身份跟你安利一個物品,角色扮演,用另外一種方式介紹產品。

          微博:無形中插播一個廣告推文,廣告的標簽跟關閉的按鈕做的小,不明顯,增減關閉難度。

          愛奇藝:提供付費權利,可關閉廣告。


          02、短視頻互動功能


          關鍵詞

          #交互  #點贊  #評論


          產品體驗

          微博:全屏短視頻體驗。關注,點贊等功能圖標懸浮在右側,方便用戶點擊,交互都關聯性也強。

          美圖:右側一排操作按鈕,分享按鈕卻在頭部,距離有點遠,很難被注意到。圖標采用半透明疊加更有設計感。跟美圖這個產品很契合。

          QQ微視:上中下的布局,中間是視頻主區域。關注按鈕在頂部,評論交互都在底部,比較傳統的布局體驗。


          設計思考

          微博:視頻內容全屏展示,沉浸式用戶觀看體驗。把一些按鈕設計的離用戶可觸碰區域近一點,在用戶手指操作的熱點區域,加大他們的點擊欲望。

          美圖:視頻內容全屏展示,關注直接用文字加色塊高亮顯示,直接刺激用戶,引導他點擊。底部設置美化圖片產品本身設置了快捷入口。有點弱化分享操作。

          QQ微視:視頻上方沒有其他干擾元素,采用比較中規中矩的布局。


          03、關注用戶按鈕


          關鍵詞

          #加關注 #彈窗


          產品體驗

          美圖:首頁的短視頻,點擊用戶進去可以看到他的創作,當頁面下拉的時候,關注按鈕會一直停留在頁面頂部,高亮顯示。

          小紅書:點擊個人用戶進去看筆記,下拉過程中“加關注”會一直在右上角顯示,繼續往下拉,底部會出現一個彈窗,提醒你可以關注一下,二次引導。


          設計思考

          美圖:主要是一個提高修圖的工具,并提供給用戶去分享美圖的平臺,沒有做過多的引導用戶操作。

          小紅書:主打個人社交平臺,流量,關注度是主要的數據。發作品的目的性較強,所以給用戶做了二次引導關注。幫助創作者博得更多的關注度。


          04、視頻進度條


          關鍵詞

          #進度  #視頻  #品牌宣傳


          產品體驗

          嗶哩嗶哩:進度條直接了當,當前位置的標記會結合視頻的宣傳屬性來用一些特殊圖標來加深用戶觀感。

          愛奇藝:

          1、視頻有標記記憶點,幫助用戶快速定位到想要了解的內容;

          2、當前位置采用該視頻品牌logo;

          3、視頻上方有觀看熱度的面積圖,感覺有點被打擾,對用戶來說重要性不是很高。


          設計思考

          嗶哩嗶哩:

          1、視頻進度條顏色是品牌顏色;

          2、當前位置不再是單一的基本圖形,會用一些有趣的圖形替換,同時視頻屬性。

          愛奇藝:

          1、進度條顏色不在是單一采用品牌色,可以個性化不同場景搭配使用;

          2、當前位置的狀態用視頻的品牌植入logo,起到二次宣傳的作用;

          3、效果視頻記憶點,根據后臺剪輯標記用戶可能感興趣,幫助用戶快速定位;

          4、進度條上方有觀看熱度的曲線。感覺這個設計有點多余,手機觀看盡量減少視覺干擾。


          05、軌跡與預計到達時間結合


          關鍵詞

          #軌跡 #地圖 #預估時間 #定位 #場景


          產品體驗

          杭州公交:等公交等時候,標記你所在位置的站點,通過圖標大小、顏色標記其他公交車到站情況,很直觀??梢越o自己等車時間做心里準備。

          淘寶:物流運行軌跡在地圖上顯示,結合發出點到簽收地,預計的時間跟簽收狀態。


          設計思考

          場景化思維設計,讓用戶身臨其境感受。

          杭州公交:聚焦與單條公交線路線,去除復雜的地圖背景,直接用圖標標記與你所在站點的位置關系,同時上方卡片會顯示即將到找的三個公交車預計時間,給用戶準備候車預留足夠的時間準備。

          淘寶:物流在全國范圍內跑,使用軌跡結合地圖會更加直觀。能看到當前所在的位置,預計還有多少時間送達等等信息用場景來表達。


          06、圖像拍照識別


          關鍵詞

          #拍照,智能識別


          產品體驗

          百度:拍照識別的時候,全屏且屏幕中會標記小白點高光,一閃閃,bringbring 。

          有道云:拍照上傳識別的時候,會出現錨點可以拖拽自己想選擇的圖片區域,直接裁剪。


          設計思考

          百度:識別照片環境的時候,有小光斑互動,帶有智能科技感,讓體驗更加有趣。

          有道云:拍照過程加入裁剪功能,對圖片預處理,提高筆記效率。


          07、文檔信息編輯


          關鍵詞

          #編輯  #彈窗


          產品體驗

          石墨:編輯本條筆記時,底部彈窗,一行顯示一個操作,“刪除”標紅。

          有道云筆記:有11個操作動作,采用分類的方式布局,配合圖標一目了然。


          設計思考

          石墨:追求極簡體驗,沉浸式設計。

          有道云筆記:功能較多,底部彈窗最好不要超過屏幕2/3,影響體驗,結合圖標更加直觀。


          08、搜索框內提示文案


          關鍵詞

          #搜索提示語


          產品體驗

          微博:不知道看什么時,會提示你看別人都在搜什么內容,引起你的興趣。搜索下方也有熱門搜索,也是可以買的“熱搜”廣告位,增加曝光率。

          淘寶:根據你之前搜過的產品,程序自動給你推送一些對應產品的關鍵詞搜索。


          設計思考

          微博:熱搜的一些運營,業務層面考慮。

          淘寶:電商類,記錄你的搜索喜好,給你推送符合你的產品,千人千面。


          09、金剛區下面的公告欄板塊


          關鍵詞

          #公告  #內容信息


          產品體驗

          喜馬拉雅:電臺模塊,可以私人定制自己感興趣的電臺。

          支付寶:一些公告,消費通知,結合IP形象,觸角還會動兩下,感覺是在跟你互動對話。


          設計思考

          喜馬拉雅:本身是個聲音類產品,用電臺的形式訂閱自己喜歡的內容推送。

          支付寶:用支付寶自己的螞蟻iP形象,加深品牌影響,同時也起到提示作用。


          10、下拉加載


          關鍵詞

          #緩沖  #加載


          產品體驗

          美團外賣:下拉加載時,用美團袋鼠IP在跑的小動效來緩解用戶焦慮。

          安居客:頁面拖動下拉的時候,在頭部有個樓盤建筑2.5d插畫,感覺有另一個空間的感覺。

          淘寶:淘寶詳情下拉對時候,有一個歷史足跡,再你逛了很多商品之后,反復對比,想回去之前的店再逛逛,同時也減少了用戶頁面跳出率。

          微信讀書:頁面下拉的時候,可以添加書簽,對當前頁做記錄,下次可以快速找到改頁面內容。


          設計思考

          美團外賣:植入IP形象做動效,加深品牌印象。

          安居客:創造二次空間感,讓加載的過程中,沒那么焦慮,反而讓用戶覺得驚喜。

          淘寶:模擬用戶使用場景,在購買商品過程中會對產品反復對比,加入一個歷史足跡,同時提高頁面轉化率。

          微信讀書:下拉的過程中給用戶制造驚喜。


          11、配圖多張排版


          關鍵詞

          #配圖多張排版  #圖片


          產品體驗

          淘寶:有視頻,又有多張圖片的情況下,視頻權重比圖片大,左一右二展示,其余收起來,點擊查看全部。

          拼多多:圖片跟視頻同時存在,平鋪展示,視頻默認放第一個位置,一行三個,大小統一。

          今日頭條:頭條文章內有多張圖,列表流只取三張顯示。


          設計思考  

          淘寶:商品評論較多,控制每個評論列表高度統一性,一屏用戶可見更多買家秀,同時刺激點開視頻的行為。

          拼多多:弱化視頻跟照片的比重。

          今日頭條:圖片更直觀表達,也是用戶第一時間注意的信息。首頁列表需要能貼合文章內容,刺激用戶點擊,可后臺手動配置列表展示配圖。


          12、優酷視頻青少年權限


          關鍵詞

          #用戶權限


          產品體驗

          個人中心頭像上方有個“成長守護:可以設置青少年模式,主要是為家長用戶對小孩上網觀看視頻的一個管理。


          設計思考

          概念包裝:現在網絡視頻內容層次不齊,不同年齡層都能接觸各類信息,鑒于對青少年的保護,對視頻推送權限設置,用“成長守護”包裝權限設置,讓產品更有溫度。


          13、評論頁留言列表


          關鍵詞

          #評論列表


          產品體驗

          知乎:評論列表整屏彈窗,用戶回復用戶,名稱之間用一個小箭頭指向,很有特點。作者身份跟在用戶昵稱后面。

          愛奇藝:留言回復沒有展示用戶頭像,只有昵稱。對同一留言回復用色塊區分。

          小紅書:評論列表2/3彈窗,同一留言內容最多顯示一條,多余的折疊。


          設計思考

          知乎:用戶名稱比內容層級較高,并結合頭像使用,用小尖頭圖標直觀表達回復對象的動作。

          愛奇藝:視頻為主,評論為輔;對同一留言評論用灰色底,使用親密性原則,對其他評論人的頭像隱藏,注重評論內容。

          小紅書:從下網上的彈窗形式,一屏展示內容區域較少,同一留言多條評論就收起展示。


          14、視頻類個人中心頁面


          關鍵詞

          #我的個人中心

           

          產品體驗

          愛奇藝:開通會員提醒醒目,右滑展示不同類別的會員。

          騰訊:開通會員提醒明顯,下面是觀看歷史,常用功能分類。

          優酷:頂部有關注、粉絲、作品等數字信息展示,其次是開通會員提醒。


          設計思考

          愛奇藝:視頻平臺合作,會員權限開通付費為主要業務。

          騰訊:以平臺為主,個人創作視頻轉型中。常用功能歸類,節省首屏利用率。

          優酷:注重社交屬性,鼓勵個人創作視頻上傳。


          15、視頻類引導開通會員


          關鍵詞

          #會員服務,運營


          產品體驗

          視頻頁面都設置了兩個開通會員入口

          1、打開視頻默認播放廣告,視頻右上角開通會員可關閉廣告;

          2、視頻正下方有個大的提示開通會員入口

          愛奇藝:結合用戶心理,用文字優惠刺激用戶開通。

          騰訊:會根據活動給予免費體驗會員的服務。

          優酷:直接把會員所享受的服務內容展示出來。


          設計思考

          愛奇藝:沒有多余的描述,直接提示新客優惠。

          騰訊:正下方的開通會員文案會根據不同的視頻運營有不用的文案,比如超前點播,活動免費領取等等。

          優酷:首屏占的比重大,無論視頻上方關閉廣告 還是正下方,按鈕都設計的很大。


          轉自:站酷

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

          UI界面設計常見的布局構圖

          前端達人

          今年算是寫的第四篇文章,UI系列寫的第二篇文章了,2020還有10天過去了,祝大家在新的一年里愈來越好。


          構圖是指作品中藝術形象的節后配置方法。是造型藝術表達作品思想內容,并獲得藝術感染力。在視覺藝術中常用的技巧和術語,特別是繪畫、平面設計與攝影中。在UI設計中,構圖的主要作用是:構建和諧穩定的頁面布局。



          1.1 最平衡的構圖對稱構圖1:1 

          左右對稱上下對稱的構圖,一般不會有太大問題,因為人類對世間萬物的觀察來看,因為在生活中絕大多數的事物都是對稱的。


          對稱平衡的形態在視覺上有自然、均勻、協調、整齊、穩重的美感,復合用戶的視覺習慣。



          “對稱構圖”是將版面分割為兩部分,通過設計元素的布局讓畫面整體呈現出對稱的結構,具有很強的秩序感,給人安靜、嚴謹和正式的感受,呈現出整齊、平穩、經典的氣質。在得物(毒)中應用體現平臺的核心正品與品質。



          1.2 設計中不平衡原因

          視覺錯覺是指人們對外界事物的不正確的感覺或知覺。最常見的是視覺方面的錯覺。產生錯覺的原因,除來自客觀刺激本身特點的影響外,還有觀察者生理上和心理上的原因。其機制現在尚未完全弄清。



          (1)繆勒—萊爾(Maller-Lyer Illusion)錯覺:1989年由繆勒一萊爾(F.Muller-lyer)設計,末端加上向外的兩條斜線的線段比末端加上向內的兩條斜線的線段看起來長一些,其實兩條線段等長。

          (2)艾賓浩斯錯覺(Ebbinghause Illusion):看起來左邊中間的圓比右邊中間的圓大—些,但實際上這兩個圓的大小相同。

          (3)龐佐錯覺(Ponzo Illusion):中間的四邊形是矩形,而不是頂邊比底邊寬的四角形。

          (4)厄任斯坦錯覺(Ebrenstein Illusion):中間矩形的四條邊看起來是彎曲的。

          (5)黑靈錯覺(Hering Illusion):中間兩條線是平行的,但看起來是彎的。

          (6)菲克錯覺(Fick Illusion):垂直線段與水平線段等長,但看起來垂直線段比水平線段長。

          (7)馮特錯覺(Wundt Illusion):中間兩條線是平行的,但看起來是彎的。

          (8)波根多夫錯覺(Poggendoff Illusion):被兩條平行線切斷的同一條直線,看上去不在一條直線上。


          1.3 不平衡中的平衡構圖

          在整體的頁面平衡的情況下,同樣還需要考慮視覺上的平衡。


          任何東西都不能在頁面上隨意安放。每個元素都應該與頁面上的另一個元素有某總視覺聯系,而這個視覺聯系往往是看不到卻可以感受到平衡感,在平面海報中的平衡原則得到了最大的應用。



          如上圖所示,三少爺的劍這個海報設計,將整個海報布局進行幾何化分析,地面為一個傾斜的平面,人物為一個垂直于地面的一個個體,人物上方為主體文案。幾何化后如同一個傾斜的斜面放置了一個傾斜的天平,最后一個“劍”字、與下方英文如在右傾斜天平上面的一個穩定的砝碼。然而整體還是不夠平衡,設計師通過燕十三的視覺視線、以及圍繞他的殺手用劍指向他的方向為力的方向將整個頁面進行平衡。通過用劍多少占比、字體大小等等的細節使得整個頁面達到最微妙的平衡點。這樣的設計之后達到一種平衡而有不平衡的微妙感覺,不平衡感體現整個頁面的“ 動 ”武俠之感油然而生;而平衡感表達了整個頁面的“ 靜 ”冷冷的肅殺感、高手的寂寞感油然而生。



          讓設計中的視覺要素在畫面中頁面平衡??梢酝ㄟ^字重、顏色、形狀、線條、圖片占比等等,這樣可以增加整體頁面的平衡感。通過小米中的構圖可以看出上方所有圖片文字偏左,通過右方一個高亮的按鈕進行平衡感的設計;下方文字左邊文字較少用重的深色的字體,而右邊文字較多用輕且淺的文字這樣的設計達到整個頁面的平衡感。



          2.1 黃金分割設計法 

          黃金分割是指將整體一分為二,較大部分與整體部分的比值等于較小部分與較大部分的比值,其比值約為0.618。這個比例被公認為是最能引起美感的比例,因此被稱為黃金分割。



          設一條線段AB的長度為a,C點在靠近B點的黃金分割點上,且AC為b,則b與a的比叫作黃金比,黃金分割具有嚴格的比例性、藝術性、和諧性,蘊藏著豐富的美學價值,這一比值能夠引起人們的美感,被認為是建筑和藝術中最理想的比例。 

          畫家們發現,按0.618:1來設計的比例,畫出的畫最優美,在達·芬奇的作品《維特魯威人》、《蒙娜麗莎》、還有《最后的晚餐》中都運用了黃金分割。



          UI頁面設計中的黃金分割比的應用有很多如上圖所示,頁面整體功能擺放位置,遵循黃金分割比的分配表達出來整體頁面更加的和諧聚焦。


          2.2  九宮格設計法


          九宮格構圖有的也稱井字構圖,實際上屬于黃金分割法的一種形式。就是在畫面上橫、豎各畫兩條與邊平行、等分的直線,將畫面分成9個相等的方塊,在中心塊上四個角的點,用任意一點的位置來安排主體位置,就是九宮格構圖。



          實際上這四個點都符合“黃金分割定律”,是表現畫面美感和張力的絕佳位置。當然在實際運用中還應考慮平衡、對比等因素這種的構圖原則在海報以及攝影中有著極大的使用。



          3.1 UI頁面布局的格式塔原理 

          格式塔心理學誕生于1912年,是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的:我們的視覺系統自動對視覺輸入構建結構,并在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域?!靶螤睢焙汀皥D形”在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。



          創始人提出的5項基本原則:簡單、接近、相似、連續、封閉。


          3.2 簡單幾何構圖法

          簡單原則就是具有對稱、規則、平滑的簡單圖形特征的各部分趨于組成整體。我們的眼睛在觀看時,眼腦并不是在一開始就區分一個形象的各個單一的組成部分,而是將各個部分組合起來,使之成為一個更易于理解的統一體。



          簡單閱歷暗合構圖法則,例如常見的三角形構圖,均衡構圖,對陣構圖,向心式構圖,對角線、x型構圖等,其目的都是為了在復雜的信息環境中,構建更易懂的整體。


          3.3相似構圖法

          相似原則指的是在某一方面相似的各部分趨于組成整體,強調內容。而接近強調位置。人們通常把那些明顯具有共同特性(如形狀、運動、方向、顏色等)的事物組合在一起。



          由上圖可見,當用戶看到這個這個頁面的時候,會自覺的把上面5個icon看作一個整體,因為他們的顏色形狀都是相同的;文字顏色與字體大小相同會被自然的看作成為一個相同的功能,如同樣的紅色都是價格,同樣的黑色都是商品名稱;相同的汽車圖片直接清洗的都可以歸類為同列表商品。


          3.4接近構圖法

          單個視覺元素之間無限接近,視覺上會形成一個較大的整體。距離近的單個視覺元素會溶為一個整體,而單個視覺元素的個性會減弱;



          相關元素會盡量接近,不相關的盡量遠離。這種構圖它強調化繁為簡,去除一切與內容無關的裝飾性元素,突出內容本身,好讓重要的信息及功能更容易被關注,讓用戶增加更清晰和直觀地進行瀏覽。在這種排版設計中,您幾乎看不到區分內容的分割線,他通過大間距完成了視覺層次的劃分,留白是它們最大的武器。



          彼此相關的項,歸組在一起。如果多個項相互之間存在很緊的親密性,他們就會成為一個視覺單位,而不是多個孤立的元素。這樣有助于組織信息,減少混亂,為讀者提供清晰的結構。





          轉自:站酷

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


          【交互設計】B端產品中后臺列表頁設計方法總結

          前端達人

          接觸b端產品設計差不多半年多了,每天面對的都是各種控制臺,本次自己試著總結了下工作中遇到的各種列表設計的小tips。


          轉自:站酷

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

          設計交互-用戶體驗之心得篇

          前端達人

          1.為什么用戶使用對齊標簽填寫表單的速度更快


          想象一下,一個用戶已經準備好注冊您的站點了。他們會進入你的表格并輸入他們的信息。字段標簽對齊的方式會影響用戶填寫表單的速度。


          你是想給用戶提舒適體驗,還是想給他們一個麻煩?

          如果您想讓他們的體驗更快更容易,請使用輸入框上面的字段對齊標簽.或輸入框內的對齊標簽模式。


          與左對齊和右對齊的標簽相比,頂部對齊或內部左對齊標簽填寫起來更快、更容易。這是因為標簽只需要有一半多的視覺固定物。

          頂部對齊標簽還允許用戶以一個可視方向向下移動輸入框。左對齊和右對齊的標簽需要兩個視覺指示才能填寫。


          頂部對齊標簽的唯一缺點是,它們可以使表單變得很長。但是現在用戶滾動的頻率越來越高,所以這不是問題。

          通過減少字段之間的空白,可以減少表單長度。您還可以將表單拆分成多個頁面,以使表單更短。


          頂部和左/右對齊標簽之間的差異很明顯。頂部對齊標簽更容易在眼睛上,并使表格更容易填寫。雖然他們可以使表單更長,

          但用戶將從完成表單所需的時間和精力的減少中獲益更多。


          如果頂部對齊的標簽能夠給用戶提供更好的表單體驗,那么它是值得采用的。設計師應該更多地考慮他們的字段標簽對齊。

          它可以區別于用戶填寫表單還是放棄表單。


          2.為什么對話框中的“確認”按鈕在右邊工作得最好


          有很多設計經常會問我一些關于按鈕上的問題那我今天也來獻丑講以下我對按鈕的一些理解,這段時間針對這些東西研究了很久,在對話框中放置“確認”和“取消”按鈕的位置?!按_認”按鈕是完成任務的主要操作。


          “取消”按鈕是在沒有完成任務的情況下將用戶帶回原來屏幕的輔助動作。

          根據它們的功能,最好的順序是什么?“確定”按鈕應該出現在“取消”按鈕之前還是之后?


          許多人提到了以下幾點平臺約定作為答案。雖然這似乎是一個解決問題的方法,但實際上并非如此。它不能回答哪個位置對用戶更好,以及為什么。為了一致性而遵循平臺慣例的建議是不夠好的,給設計師留下了空手而歸的機會。


          “一致性”是設計師們常用的一個詞。不深入考慮用戶面臨的設計問題也是一個流行的借口。如果一個人不知道為什么會存在,遵循設計慣例有什么好處呢?


          如果某個設計約定對用戶有害呢?設計師應該為了一致性而盲目地遵循嗎?糟糕的設計實踐是否應該持續下去,因為設計師們希望通過平臺設計的一致性來解決每一個問題?


          今天,有一些平臺設計約定被廣泛使用,因為它們是為用戶工作的。但這里的要點是,平臺設計的一致性永遠不應該讓設計師滿意,因為這是做某事的唯一理由。理解為什么您應該以一種方式而不是另一種方式來設計您的用戶界面的原因是關鍵。


          按鈕放置事項


          人們可能會說,讓你的動作按鈕突出給它更多的視覺重量和一個清晰清晰的標簽比它的位置更重要。雖然動作按鈕的視覺重量和標簽是一個重要的設計方面需要考慮,但它不是唯一的方面。


          只關注一個設計方面而不是其他方面是一個粗心的設計師的行為。一絲不茍的設計師會思考每個設計方面是如何影響用戶的。

          對于設計師來說,最難搞清楚的是主動作和次要動作是如何放置的。這就是為什么“確認”/“取消”按鈕的爭論在設計師中如此流行的原因。


          為什么‘確認’按鈕在右邊工作得最好?


          當你通過了平臺慣例的爭論后,你會質疑哪個位置最有效。您可以通過分析設計如何影響用戶來解決這個問題。


          減少視覺固定


          一些設計師認為,在第二個操作之前將主操作放在左邊對用戶更好,因為它更接近,因此,點擊的時間更少。


          這是有意義的,但您不能忽視這樣一個事實,即用戶在選擇要采取的操作之前將查看他們的所有選項。

          這意味著大多數用戶不會盲目地單擊主操作按鈕而不查看它旁邊的輔助操作按鈕。


          他們將首先看到左邊的主要動作,然后查看右邊的次要動作。然后,他們會把眼睛移回主要的動作,點擊它。這將在多個方向上總共創建三個視覺固定。


          將其與放置在對話框右側的主操作和放置在左側的輔助操作進行比較。用戶從第二個動作的眼睛開始,然后將眼睛移到主動作上單擊按鈕。這在一個方向上總共創建了兩個視覺固定,給用戶一個更快的視覺流。


          用戶只關注每個按鈕一次,并在主動作按鈕上結束。將主操作放在左邊可能會使用戶更容易到達,但是當您從用戶的思維過程和視覺固定的角度來看速度時,將主操作放置在對話框的右側實際上更快。



          用戶點擊或操作按鈕的心里狀態


          當用戶單擊輔助操作按鈕時,他們期望應用程序什么也不做,并將它們帶回到原來的屏幕。因此,“取消”按鈕的功能類似于“后退”按鈕。


          當用戶單擊主操作按鈕時,他們期望應用程序執行按鈕所述的操作,并將其轉到下一個屏幕。因此,“確認”按鈕的功能類似于“下一頁”按鈕。將輔助動作按鈕放置在左側,主動作按鈕在右邊映射到用戶可以期待的‘后退’和‘下一步’按鈕功能。


          它類似于分頁按鈕的放置方式。將用戶帶到下一頁的按鈕位于右側,將用戶帶回其早期頁面的按鈕位于左側。這個按鈕的放置工作是因為它映射到用戶從左到右的閱讀和導航方向,其中右是前進的方向,左是后退的方向。


          對話框中的“確認”和“取消”按鈕應該遵循類似的交互模式,因為它們的功能類似于分頁按鈕。

          不僅如此,在中國用戶習慣了左右方向的模式。

          將您的主要操作放在右側,將次要操作放置在左側,將使您的對話框按鈕更容易、更直觀地為用戶所理解。


          為用戶提供更有效的視覺流暢度


          將您的按鈕放置在終端區域可以讓用戶看到他們最后需要采取的主要操作。這不僅改善了視覺流,也改善了任務流。

          用戶在掃描時不會跳過主動作按鈕。當他們通過時,他們的眼睛就會盯著它,所以他們可以立刻點擊它。


          按鈕放置在中間還是放置在左右兩邊?


          另一個問題是設計師經常想知道他們是應該把按鈕放在角落里,還是把它們放在一起。當您將主操作和輔助操作放置在對話框

          的角中時,它將很好地映射到左右方向。但是,由于‘取消’和‘確認’按鈕不是導航按鈕,所以沒有必要遵循方向映射。有時它弊大于利。

          如果應用程序要執行用戶無法撤消的關鍵操作,那么用戶可以看到“取消”按鈕和“確定”按鈕是很重要的。在這種情況下,“取消”按鈕的功能可能像“先前”按鈕,但更重要的是,因為它充當安全按鈕,以防止任何更改。


          在左下角放置“取消”按鈕的危險是,由于兩個按鈕之間的視覺分隔很大,它可能導致用戶忽略它。將“取消”按鈕和“確定”按鈕放在一起,可以使用戶更容易在一次凝視中查看和比較這兩個動作,從而選擇最佳的操作和點擊。

          我們經常卸載軟件的時候一不留神就會點錯,或者是我們在裝某一個軟件的時候全家桶一擁而上。所以在不同場景當中我們所用的按鈕形態也是不一致的。


          3.下拉菜單加圖標和不加圖標的區分在哪里!


          大的側邊欄菜單甚至會讓用戶看起來很不雙我們應當如何解決這一個問題。

          其原因是設計人師在做顯示菜單項的時候會出現的問題。

          當它們都有相同的視覺處理時,菜單項很難進行識別與區分。

          如果不修復這個問題,會導致用戶放慢他的瀏覽速度從而導致用戶的流失在大的層面來講,小的層面來講閱讀不爽導致關閉頁面。


          菜單欄沒有主次之分

          當您對菜單項進行全文本或全圖標處理時,問題就會出現.當用戶掃描他們想要的項目時,他們的注意力分散在菜單周圍。這是因為沒有層次來吸引他們的注意力。


          通過將用戶的注意力引導到您的主要項目,使您的菜單可掃描。

          要實現這一點,我們可以看下面設計形式來強調重點內容


          主項圖標


          與其在每個菜單項上放置圖標,還不如將其放置在主菜單項上。視覺強調首先將用戶的注意力引導到這些項目上。

          次要項目上缺少圖標,這使得它們能夠得到其余的關注。


          略大一點的圖標


          如果要使所有圖標處,請稍微放大需要突出的圖標。

          稍微的增大會使視覺效果有很大的不同,同時字形更容易辨認,每一行的線高也會增加。讓整個看起來更加有空間感一些。

          讓用戶瀏覽閱讀起來也會更加舒暢一些。

          4.在按鈕上避免顏色對比度錯誤


          想象一下,當用戶在您的界面上遇到一對按鈕時,他們猶豫不決。

          用戶向左看,然后向右看,比較它們。經過一番思考,他們做出了選擇。

          他們的選擇按鈕做出決定,而且不確定,因為你的按鈕沒有層次結構。


          不要使用相同的顏色輪廓按鈕


          甚多的設計師設通常喜歡使用主按鈕的輪廓形狀作為輔助按鈕。按鈕樣式看起來可能不一樣,但還不夠。

          他們仍然會競爭,因為他們的顏色對比度相等。

          為了給主按鈕更多的注意,削弱輪廓按鈕的對比度。與其使用重顏色,不如使用它的色調。你可以通過降低重顏色的亮度和飽和度來制作。確保對比度足夠高,以達到主要的按鈕突出性。


          不要使用黑色輔助按鈕


          設計師的另一個趨勢是把第二個按鈕變成黑色。他們認為,使用中性的顏色,它是不會競爭的。然而,黑色按鈕更為突出,因為它有一個更高的對比度。



          不要使用黑色,而要使用重顏色的色調,以使輔助按鈕比主按鈕更弱。要做到這一點,增加亮度和降低飽和水平。



          不要在主色調上使用淺色


          將彩色按鈕與中性灰色配對并不總是意味著彩色按鈕會得到更多的關注。如果主按鈕的顏色太輕,則中性輔助按鈕將更加突出


          要避免這一錯誤,請選擇不太明亮的顏色。明亮的顏色可能看起來很有吸引力,但它與白色背景或文字的對比不太好。在主按鈕上使用更暗的顏色,這樣第二個按鈕就不會引起注意。




          5.復選框的設計與使用方式哪種更好


          在界面上使用復選框之前,您必須先問自己幾個問題。復選框是否是在此上下文中使用的正確組件?如果是的話,最有用的顯示方式是什么?


          許多設計師沒有問這些問題,自動使用復選框,沒有太多的事先考慮。

          因此,它們通過在錯誤的上下文中使用它們而產生可用性問題。


          不僅如此,許多設計人員都很懶惰,期望前端寫成默認選框完成這項工作,而不是

          自定義復選框設計。但問題是,前端默認的復選框不能完成這項工作,因為它們的

          可用性很差。


          大多數設計人員在復選框上會犯的幾個可用性錯誤,這些錯誤會破壞用戶體驗。



          單選與重復的選擇


          在設計當中我們經常會遇到做選擇性的勾選,往往很多設計師會犯的一些錯誤問題和選擇障礙問題。

          通過更大的目標來明確與用戶進行選擇更為明確

          我們設計單選框的時候這不是秘密而是讓用戶做出選擇,復選框是很難點擊,因為他們的小擊中目標。


          設計師通常會讓標簽點擊,但如果它不是直觀的,那也于事無補。


          通過將復選框轉換為復選標記,您可以為用戶提供更大的命中目標和更清晰的交互提示。



          重復物品的重量及數量選擇


          有時你可能想提供不同數量的商品。使用多個復選框復制它會產生更多的文本來讀取,并使界面混亂,且讓用戶難以進行選擇。對于增量輸入更改使用數字選擇器一次顯示該項會為更好些。


          undefined


          總結以上兩點,實際商用應用案例如下所示


          6.在設計當中我們該如何控制內容的突出性與閱讀性


          新聞卡片的設計怎么才能突出信息內容


          卡片內容有幾種文本類型,提供不同的信息功能。讓我們看看基本內容卡的文本類型。

          首先是眉毛,它是一個明確的詞或短語,用來描述內容的主題。

          還有一個標題,它用一個句子中的幾個單詞告訴用戶內容是關于什么的。

          在此之后,就會有一個描述內容的正文。

          最后,就是時間與操作的按鈕

          必須通過確定哪些文本類型對用戶更重要,從而為您的卡片新聞建立文本層次結構。

          此內容新聞卡片的適當文本層次結構為:

          1.眉毛-可以是時間,可以是新聞分類

          2.標題-最重要的是,因為它描述的內容最快。

          3.正文-包含一個描述性段落,但閱讀時間最長。

          4.描述內容的正文對內內容的簡要描述。

          您的內容卡應指導用戶按此順序瀏覽文本類型。要實現這一點,您需要使用瀏覽控制對文本類型應用適當的視覺強調。


          控制用戶的瀏覽順序


          通過適當的視覺強調,可以控制用戶瀏覽的順序,并指定反映文本層次結構的瀏覽模式。

          當掃描遵循文本層次結構時,用戶會浪費更少的眼球運動,并且可以更快地處理信息。


          下面的示例說明了瀏覽控制如何讓眼球工作比較。不同的是強調不同的文本類型。

          其他文本類型具有相同的強調度,這使得它們爭奪用戶的注意力。

          其他設計形式及瀏覽方式


          在內容顏色的控制上我們可以為三種,重要的突出的需要用戶重點進行關注的就用黑色

          例如:#333333      #222222   #454545     等等色值

          在不需要突出的內容上我們可以用稍微淺一點的色值保證用戶能夠進行閱讀即可,

          例如:#999999      #787878   #666666     等等色值更加容易記住

          其他輔助的內容表達比內容正文更淺

          例如:#bbbbbb      #A8A8A8    等等色值

          說到這里我要說一用戶體驗關于文字的事情如果做出來的設計文字是給自己看的隨意設計讀沒人會說你,有句話說的好:現在

          是內容為王的時代,如果在內容上不夠吸引或者顏色不夠吸引眼球那就是一個很失敗的案例。


          轉自:站酷

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


          UI/UE | 產品體驗日記

          前端達人


          設計的思考不僅要注重表象層面,也需要圍繞信息傳達這一設計的本質功能,以充滿自省的精神深化和反思自己的設計意識,即做到“好看、好用”。在設計過程中,要站在公司的利益上,懂用戶所想,在每一個關鍵點都要帶給用戶意想不到的驚喜,這些往往都是通過細節體現出來的。





          01.「微信」添加好友-掃描與被掃指尖切換


          產品體驗:

          使用微信掃一掃添加好友時,如果對方打開二維碼的速度較慢(網絡不好/手機卡頓/操作不熟),為避免自己久等,可通過左下角的二維碼入口將自己的個人二維碼提供給對方掃描添加。

          設計思考:

          微信的掃一掃功能簡直強大到不敢相信,除了我們日常要用的支付付款、物品查詢、各種信息的獲取等,還有一個重大的功能就是添加好友。不知道大家有沒有碰到過這種情況,需要添加好友時,自己打開掃一掃,過了很久卻發現對方還在功能的路徑中徘徊,遲遲沒有打開二維碼頁面,這時我們不得不說一聲“你掃我吧”,于是自己從掃描頁面返回,一頓騷操作,把自己的個人二維碼給對方展示了出來。

          微信在掃一掃頁面左下角提供的個人二維碼入口,便于在加好友出現問題時,隨時由被動變為主動,指尖切換掃描與被掃的添加方式,節約用戶時間成本以及緩解掃描等待的焦慮感。基于用戶添加好友時所處的使用環境,考慮周全且人性化,極大方便用戶使用。





          02.「高德地圖」錄入車牌號-降低限行違章概率


          產品體驗:

          在高德地圖的導航設置中,錄入自己的車牌號并開啟避開限行提醒,在導航過程中如果途徑限行路段,系統會有語音播報提醒并自動避開限行路段重新規劃路線。

          設計思考:

          自北、上、廣、深四個一線城市交通部分別出臺汽車限行措施后,其他部分城市也相繼出了限外政策,外地車牌如果想要在本城市隨時出行,需要(部分城市通過搖號)獲得本地車牌號方可。不管我們對交通路線有多熟悉、或者經過其他城市的限行路段,因限行導致的違章真是防不勝防,畢竟每個地方的限行政策都是通過固定渠道對外宣布,不會通知到每一個駕駛員,如果不能第一時間獲得限行訊息,悔之晚矣。

          使用高德地圖導航,在登錄后錄入車牌號并開啟“避開限行”,系統就會自動檢測導航路線,如果要經過限行/限外路段時會自動重新規劃,通過繞行來避讓限行的路段,如果無法避開則提示:已無法為你規避限行路段,請合理安排出行。自動規劃路線能夠有效避免因限行導致的違章,給我們造成經濟損失,尤其是駕照,畢竟一周期才12分。就算無法避開,也可以通過語音提前知道限行路段,并合理安排出行時間。

          (PS:雖然很多用戶感覺無需登錄也可以正常使用,但登錄之后可以享受更多特權以及更加優質的服務)





          03.「支付寶」你想要的收款二維碼樣式是這樣的


          產品體驗:

          在支付寶的收款二維碼頁面截圖時,系統預判用戶有使用二維碼收款的需求,通過彈窗提示是否需要保存二維碼圖片,自動去掉無關信息并統一規范樣式。

          設計思考:

          移動支付自上線開始,微信支付和支付寶支付各自占領著半江山,只要涉及線上交易,絕大多數用戶每天必定會選擇其中一個使用,雖然兩大企業的方向截然不同,但支付系統在用戶體驗方面都是一如既往的持續提升,以此來增加用戶的粘性。

          支付寶收款二維碼頁面觸發截圖,在截取成功的狀態下,同時彈出保存二維碼圖片提示。跟設備截取的圖片相比,單獨保存的二維碼樣式更加簡潔,且規范統一,信息內容更加聚焦,便于用戶直接傳送或打印使用。其實進入收款二維碼頁面,在下方原本就有保存圖片入口,基于用戶進入此頁面的需求明確,對性子較急且耐性較低的用戶來說,這個被弱化的保存入口,可能直接忽略(別不信,我見過有人手上拿著手機還在到處找手機)。截圖時出現的彈窗提示,相當于上了一道保險,避免使用截圖自行裁剪打印的樣式不統一,導致付款用戶心中原本就已存在的默認收款二維碼樣式發生變化,形成認知負擔。





          04.「抖音」暗示用戶-好看就要分享


          產品體驗:

          在抖音短視頻頁面停留一段時間后,分享圖標會自動變成最近常分享的某個用戶頭像,暗示用戶好東西要分享。

          設計思考:

          抖音作為當前最火的短視頻(直播)平臺,相信很多用戶即使不經常玩,但最起碼會玩,雖然有部分低俗、劣質的用戶在破壞著平臺的規則,但整體看來是利大于弊的,其他的交給人心。下載抖音的用戶大部分獲取來源應該是來自于他人的分享,一傳十十傳百,最終傳到人手必備,所以平臺是相當注重分享功能的用戶體驗。

          抖音的分享功能,其實還有一個小細節,當我們停在某個短視頻頁面一段時間時,原本的分享圖標會變成最近分享的用戶的頭像。用戶對分享功能都有常規的認知,當我們在觀看某個視頻一段時間后,系統自動評判該用戶對此視頻感興趣,基于用戶看到感興趣的東西就喜歡炫耀、分享的心理(比如“孫悟空到此一游”),系統將分享圖標變成用戶頭像,意在提醒觀者分享,以達到最大化傳播可能的目的,以及為平臺拉取新用戶。





          05.「智行火車票」搜索攻略-確保使用的流暢性


          產品體驗:

          首次打開智行火車票的搜索功能,會自動彈出搜索攻略,以指導用戶可搜索的范圍及使用規范,后續再次打開搜索即恢復常規用法,如果再次了解,點擊搜索攻略即可。

          設計思考:

          對于搜索功能,可謂是熟悉的不能再熟悉了,千篇一律的輸入關鍵字即可,大不了重新再來。搜索是產品中不可或缺的一部分,無論打開哪個App,都能很快找到,但如果搜索功能做的好了,也是用戶轉化的關鍵流量入口,比如搜索方式、呈現樣式、搜索引導等,用戶體驗不容忽視。

          智行火車票APP的搜索攻略就是在合適的時間、合適的地點準確的傳達給用戶。首次進入,即自動彈出搜索攻略教育新用戶,明確的告知使用搜索功能可以搜什么?怎么搜?避免用戶一打開就直接擼字,而造成使用錯誤的概率提高以及影響搜索結果的準確性,用戶一旦碰壁,很有可能轉身就離開。自動彈出的搜索攻略由被動變為主動,可以提前告知用戶搜索范圍及關鍵詞示例,降低出錯的幾率,讓整個搜索流程更加順暢,為后續的使用提供便利,減少用戶的流失。





          06.「蝦米音樂」評論-一鍵表達心情



          產品體驗:

          在蝦米音樂聽歌時,進入評論功能,除了可文字評論外,還能表達聽歌時的心情,隨時查看有多少同樣心情的人在聽這首歌,很有代入感。

          設計思考:

          文字是我們交流常用的元素,但很多時候因使用的方法不當而造成含義上的變化,比如一段話后面加個感嘆號,到底是消極還是敵意?聲音也是一樣,當我們開著車對行人按喇叭,是表示禮貌還是憤怒?而表情則是不同,它表達的是一種類型,比如一個笑臉,可以理解為滿意、開心、高興等。表情除了可以委婉的表達自己內心的情感之外,也是因為表情的無責任性,你會聽到人說,請注意你的言行,但沒人會說,請注意你的表情包。

          蝦米音樂APP在歌曲的評論功能,除了有文字評論之外,還可以表達聽歌時的心情,即表情評論。進入評論頁面,首先看到的是某某等幾人使用的什么樣的心情評論,并提示共有多少人參與,引導用戶接下來該做什么,讓用戶快速地進入到產品使用中,給予了明確行為操作的指令,觸發并提高了用戶的參與度。另外使用表情相比文字評論更容易操作,系統預設好可供用戶選擇的表情包并附帶文字提示,用戶無需思考便可一鍵操作,很大程度上降低了完成的難度。事實表明,同樣能達到目的的辦法,簡單的是最實用、也是。





          07.「美團」收貨地址-二次提醒降低出錯的概率


          產品體驗:

          在美團提交訂單頁面選擇好地址后,頁面上滑,詳細地址會懸浮在導航欄,便于用戶二次確認或修改。


          設計思考:

          線上購物已經成為了我們的家常便飯,外賣行業解決著我們“吃”的問題更不例外。通常我們在選擇好商品后,地址作為重量級的信息都會優先展示在訂單頁面的頂部,首先基本都會提供一個默認地址,如果不需要進入地址修改即可??v然如此,依然有部分用戶因為急于下單,后續發現地址錯誤,就需要聯系商家修改地址或者取消訂單重新下單,浪費時間不說,還會影響心情。

          美團APP在提交訂單頁面,針對地址方面相當于加了一道保險。用戶在選擇完地址上滑頁面后,詳細地址懸浮在的標題欄上,點擊可直接修改收貨地址,雖然不一定每個用戶都能看到,但長時間懸浮在頁面頂部,時刻都在提醒著用戶,只要稍一抬頭,即可看到醒目的大字(地址),便于用戶潛意識的瀏覽或眼睛的余光掃描,發現有誤及時修改,降低下單時地址出錯的概率,考慮周全,給予更好的用戶體驗。





          08.「菜鳥」下拉刷新-趣味化的“空投”


          產品體驗:

          菜鳥APP在頁面下拉刷新的過程中,會有一個紙箱從空中落下的動畫效果,類似空投,仿佛在說“你的補給已送到,請及時查收”,非常貼合平臺的屬性及特征。

          設計思考:

          下拉刷新早就不是什么新鮮的東西了,幾乎所有的應用里都會有這個功能,通常都是一個持續的動效在告知用戶,頁面的數據正在加載,請稍等,市場上很多APP的刷新樣式都是大同小異。不過一旦做好刷新樣式,就不僅僅是告知用戶當前頁面狀態這么回事了,比如下拉刷新前后兩種狀態借助過渡動效連接到一起,讓用戶了解界面到底發生了什么改變,以及在刷新的過程中如何留住用戶繼續等待,避免用戶焦躁的情緒......

          菜鳥APP在下拉刷新的過程中就使用了趣味性的動畫方式,首先通過空中出現的箱子緩緩落到地面,有趣又貼合產品整體的設計概念,用生動形象的情感化設計反饋平臺行為,為人機交互增加了趣味性和互動性,而且還可以緩解用戶在等待刷新過程中的焦慮感;其次,這種動效可用幫助用戶理解屏幕上發生了什么,也會讓用戶有所期待。

          (看到這個動效,有沒有似曾相識的感覺“哇,那邊有空投,馬上要落地了,趕緊上車沖過去”)





          09.「美團」匿名差評-降低商家對用戶的騷擾


          產品體驗:

          對美團的訂單進行評價時,如果選擇差評(1~2分),系統將自動開啟匿名開關以便于用于匿名評價,商家是無法查詢到匿名用戶信息的。

          設計思考:

          評價在商品頁面展示給所有用戶,對店鋪商品起著至關重要的作用。95%的用戶購物之前都會參考評價,好評會增加用戶購買信心;而差評可能會讓用戶放棄購買這個商品,甚至認為這不僅僅是劣質商品,更有劣質店鋪的潛在想法。其實有很多商家都有通過刷單來提升店鋪的銷售量和買家秀的質量,作假都尚且如此,何況是真實用戶呢?所以商品一旦有了差評,不僅會影響店鋪的整體動態評分和好評率,還會降低店鋪排名,很大程度上會影響其他用戶判斷及產品的轉化率,所以商家一看到差評就激動得馬上打電話和買家溝通改評價,低頭認錯,尤其是新店或者新品有差評時,不斷的聯系(騷擾)會給消費者帶來一定的困擾。

          美團APP的訂單評價如果選擇差評,系統將自動開啟匿名評價,由被動變為主動,避免用戶因情緒化或忘記打開匿名,而遭受到商家電話的騷擾,通過補償被要求修改或刪除差評。當然,如果用戶不想匿名,關閉開關即可。匿名評價不僅降低用戶的困擾,還能提升商品評論的真實性,以協助平臺通過大數據對整體店鋪進行排名和評分展示,減少對后來消費者的誤導。

          (杠精思維“這樣豈不是讓很多鍵盤俠來惡意給店鋪差評”。其實別忘了一個前提,就是必須要通過下單支付并等待訂單完結后才可以進行評價,畢竟大部分用戶不會刻意這樣做,任何產品不就是滿足80%以上的用嗎?)





          10「釘釘」保護信息隱私的密聊


          產品體驗:

          從釘釘好友對話框的右上角進入設置頁面,點擊進入密聊,即可對聊天信息上一道鎖,保護信息隱私安全。

          設計思考:

          眾所周知,我們在聊天的過程中,信息很容易泄露,有很多窺探用戶隱私的程序,比如進入某些網頁會提示需要獲取用戶位置、讀取通訊錄等都屬于隱私。尤其是社交類型的應用,會有相關保護交流信息的安全措施。如消息撤回、閱后即焚、動態瀏覽權限等都有一定效果。

          釘釘推出的密聊功能就是聊天信息的一道安全鎖。進入密聊后,消息禁止復制和轉發、頭像名字打碼防截屏、不可被錄屏、消息通知不顯示內容等,很大強度上保護交流信息的隱私,給用戶帶來安全保障。

          (有人會問,用微信的人更多,為什么沒有密聊功能呢?從用戶群體和性質來分析,微信主打社交,男女老少通吃,基本上都是嗨聊、打發時間或平時的常規交流等;而釘釘主打的移動辦公,主流的用戶基本趨向于白領類型的群體,一般屬于工作交流,很多聊天都涉及到商業信息,包括一些文件和商業機密,誰都清楚商業機密泄露的嚴重性)




          結語:


          設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來,加強自己的記憶,不僅能提升自己的語言組織和總結能力,也為日后輸出優秀的作品當鋪墊,對自己的能力提升以及未來的職業發展帶來便利。



          轉自:站酷

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



          日歷

          鏈接

          個人資料

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

          存檔

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