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

          首頁

          十分鐘認識界面設計中卡片式設計技法

          博博

          正確認識卡片式設計,什么是卡片、總結卡片優勢、卡片正確設計知識通過設計兩個案例進行講解,卡片在運用時的技法,望能幫助大家

          好久沒有發文章了,今天順叔和大家一起聊一聊卡片式設計,無論是WEB還是APP卡片式設計運用的比較多,很多UI設計師比較偏愛這樣的表現,卡片式設計會給人一種視覺上的享受,也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解,不能因為卡片式設計而卡片式設計,要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家,之后的幾篇系列文章中,順叔會從界面中比較趨勢的設計技法進行分析,希望能幫助到一些設計的小伙伴。


          教程前的引言

          卡片式設計這幾年比較流行,同樣這樣的設計表達也是個趨勢,應用在APP PC界面中至今還流行著,從事UI設計的都會知道卡片式設計,具有把內容整合模塊化,從視覺,個性化體驗上進行呈現,是設計師在設計時常用的一種表現,同樣也具有獨特的創新概念。

          在一些項目中,一些客戶會說這個設計的APP界面有點太白,沒有層次感怎么辦,那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法,卡片式設計,可以解決在畫面中有個性化 、變化、 層次感的設計。那客戶又問什么是卡片式設計呢?


          一、什么是卡片

          無處不在的卡片設計具有個性的美感和很好的易用性,是以文字標題,小標題, 圖形或圖片組成的模塊化,以塊狀形式規整的整合內容,讓內容更規整化,視覺上更個性化,也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢,而卡片在設計中也占用一定的優勢,讓整體更加的有層次感,在運用起來也比較方便,從視覺、體驗、交互都具有不錯的優點


          設計效果圖展示

          順叔為了這個文章特意設計了兩個案例,通過這兩個案例進行一些講解。請見下圖:


          二、卡片設計優勢

          1.趨勢

          無論是大平臺 還是小平臺的產品都會運用這樣的卡片式,跟風式設計趨勢,也讓卡片式設計成為了一個現在常用的優勢,不過卡片式設計的確有很好的效果

          2. 層次感

          具有一定的層次感,能在頁面版式中起到設計上的不同,個性化變化,頁面層次感區分強烈,能更好的體現提煉出內容

          3. 規整化

          卡片式設計以圖片、 圖標 、LOGO、 標題、 整合到一起 以塊狀的形式在界面中展示,更規整的排版呈現。雖然內容多會導致頁面亂,一個模塊包含內容之后就會規整不少,也給頁面設計上帶來了更好的視覺

          4. 視覺體驗

          卡片式給整個頁面會增加視覺上的體驗,特別那種大圖片卡片式更具有視覺上的沖擊力,背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感??ㄆ皆O計還是需要根據整個布局、 產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。

          不要為了卡片設計而卡片設計。

          5. 易用性

          卡片式設計在易用性和靈活性上比較高,在響應式設計中同樣應用的也比較多一些。能更好的有序排列。

          6.簡約設計

          簡約設計會更顯得品質,不需要過多的進行裝飾,哪怕就是一個白色的色塊,上面點綴有色彩的圖標和標題 副標的變化,也會覺得顯得高大上,就算是一個帶有顏色的色塊卡片,也無須過多的設計 內容上的標題 、圖標、 按鈕就足以支撐起卡片

          7. 交互效果

          在卡片式的設計中會有一些動效交互,比如整體卡片放大、 縮小 、左滑、 右滑,可以整模塊化滑動 縮放。整體效果增加了不錯的視覺交互體驗


          三、卡片正確設計知識

          一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢,下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考,把一些表現手法加入到自己的設計中,適合才最重要??ㄆ皆O計還是要根據整個風格和整個布局而進行展示,在做進一步的對比和布局中以最好的效果為最終展示方式,總結分析幾個常見代表例子,如有不全請討論補充,下面就是一些例子


          1.卡片式形式一

          以色塊為主體并用現在比較流行的漸變色組成,其中四邊為圓角,同樣色塊下邊陰影襯托出主題,這個是在卡片中設計比較常見的運用手法,卡片的長高在設計中也是根據結構,內容功能而進行設定。正方形,長方形都是一個表現得手法,在色塊上面標題文字,圖標,圖形是整個卡片的布局的形式,無非就是左右布局和上下布局

          應用場景:卡包、天氣、類別、入口、優惠劵,卡劵

          此圖片來自于網絡

          2. 卡片式形式二

          這種形式共同點都是在頭部C位出現的卡片式設計,其中承載著標題,副標題,以及圖文版式,不難發現,如果圖片有顏色,那么下面是白色底,這樣在白底上面色塊的出現還是比較簡約凸顯卡片,如果背景有顏色,卡片也有顏色那么卡片的凸顯程度就不會那么強,圖二很多在會員卡設計中常用的比較多,也比較簡約,另外兩個共同特點背景有顏色,一般底部背景顏色就是整個界面的主色調,背景有色塊,上面就用白色卡片,卡片上方標題、 文字、 圖片呈現。只不過排版的方式有所不同而已,在很多APP設計中,這樣的表達也很多,通過主色調可以很融合的把上面的狀態欄,導航欄融為一體視覺上統一性,底部背景顏色延續下來,上面凸顯白色卡片,這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾,更能體現的上面的文字和圖片。

          應用場景:會員卡,滑動卡片,圖文標題,入口

          此圖片來自于網絡

          3. 卡片式形式三

          這種形式上圖下文字,或者是上標題,下圖片的形式,這種形式特別在圖片素材的選擇上尤為重要,有視覺效果好的圖片通過剪切,處理,合成,攝影,插畫等等方式,出現的圖片質量上好的話可以帶動整個設計的逼格,通過有效的圖片傳達,文字傳達,讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多,同樣也能體現出整體化和視覺化

          應用場景:滑動卡片,圖文標題,入口,列表

          此圖片來自于網絡

          4. 卡片式形式四

          大圖卡片式,一般以攝影圖片,插畫形式,文字壓與圖片之上,這樣的效果更具有沖擊力,也能顯得出比較潮流。體驗也很不錯,放大視覺,展示內容,圖片相結合,讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符,做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。

          應用場景:列表,說明,入口,天氣


          此圖片來自于網絡

          5.卡片式形式五

          列表卡片設計,這種形式一般白色的卡片,上面標題,頭像,按鈕,扁平插畫形式體現,更多應用在一級頁面的下方內容,以及二級頁面的列表頁或者集合頁,整體弱化背景以白色為主,給予圓角及陰影承托出層次感同時,體現上面內容部分。每個模塊的單元體具有統一的視覺。

          應用場景:列表,集合頁,入口

          此圖片來自于網絡

          6. 卡片式形式六

          大卡片式設計,表現為一塊特大的卡片式,上面會有標題,按鈕等信息,同樣表現出突出層次感,個性化設計的特質。體現出內容,一般背景有顏色上面卡片為白色,如下面背景為白色,那么卡片的形式也可色塊,在對比上有個反差,才能突出卡片的作用性。

          應用場景:提示,說明,優惠劵,劵,入口

          此圖片來自于網絡

          以上總結的幾種卡片的形式,在設計中可以根據情況而設計,卡片多樣化,布局多樣化,適合自己產品的才最重要,雖然在界面設計中常用的設計,但不要盲目的為了卡片而卡片套用設計,這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。

          同樣在這些卡片中會有一些基本的共同的特點

          共同的特點是

          1. 四個角都是圓角

          2. 根據潮流漸變色或白卡片

          3. 色塊下的陰影,色塊下的陰影更能體現出層次

          4. 卡片上面組成部分,標題,副標題,圖形,按鈕,圖片,頭像

          5. 字體大小,字體顏色的變化

          6. 一般卡片應用在會員,列表,說明,優惠劵,分類,類別,集合頁,歡迎頁等場景常見


          三、卡片正確設計知識

          為了講解文章,順叔臨時構思一個產品原型,而快速進行了簡單的設計,一個第一版,一個優化版,主要為了講解一下這個卡片設計一些問題,

          以下此圖為構思的原型圖

          經過分析原型圖之后開始進行設計,首先設計一個版本的,如果這樣卡片布局設計,這樣色彩搭配的情況下,會怎么樣呢,整體設計用了藍紫色為主色調,首先鋪藍紫色的色塊作為背景,然后上面放白色卡片,以至于卡片上詳細的內容,比如數字,圖形 能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片,通過扁平化設計,以色塊為主設計一個藍色,一個橙色的卡片,上面并有圖標,頭像,以及標題,兩個顏色的對比,更讓視覺有沖擊力,整體看這個設計并沒有什么,但有個問題在于單個模塊拿出來效果的確都不錯,但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺,當打開這個界面的時候視覺落點在彩色卡片上,那么這個整體設計上就出現了問題,上面的數據,白色卡片其實是比較重要的,而且整個畫面都是卡片毫無設計上的變化,

          那么只能在這個基礎上在進行優化,其實大家在做設計的同時也這樣,在考慮功能模塊前提下,用戶體驗,也要考慮視覺體驗,那么視覺從哪方面來,色彩、層次、版式等等方面。那么能不能在進行一下優化呢,其實還是有空間在進行優化。以下圖為第一版

          設計第一版

          根據上面的設計在進行優化,同樣保留白色卡片部分元素,在卡片與卡片之間放一些顏色的圖標,這樣更好的給功能上快捷入口,也能給卡片設計增添了變化。使得整個畫面更靈活

          雖然白色卡片,但有一些色彩的點綴,也讓白色卡片活躍起來,把顏色的卡片改成白色卡片,從上到下的版式舒服多了,也沒有那么跳。整個風格更簡約,同時功能也更全面。

          調整后

          從原型圖,在到設計第一版,在到優化調整之后,證明一點,卡片不要因為卡片而套設計,反而會失去效果,考慮功能模塊,用戶體驗,視覺體驗也一定讓整體舒服。一直都說,繪畫中需要有主有次,設計中也一定要有主,有次的進行設計。這樣層級關系才能更清晰。

          但這些條件一定是從,體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計,前期的進行思考,邏輯清楚了,在進行設計的時候會更加的順暢。卡片式設計,大家都在應用,希望這個文章能給大家帶來一點點知識點,那就不枉費我在熬夜寫這篇文章。

          不為別的,只是一個喜歡分享的肉團子。這篇文章就寫到這里,如果喜歡請給個贊吧。如內容有沒說到的地方,各位可以進行補充,以上兩個圖你稀罕哪個呢?


            • 文章來源:站酷   作者:張增順

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

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

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



          留白設計和UI設計準則

          博博

          接上一篇文章敘述留白設計準則以及UI設計的排版準則,希望在這個隔離的日子里,大家一起努力克服疫情,加油!






            • 文章來源:站酷   作者:赤鯨

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

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

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


          UI設計中色彩理論和實用的調色板指南

          博博

          顏色是感知的問題。每種顏色代表不同的定義波長,但是我們每個人對顏色的感知都取決于我們的感知能力。

          顏色是感知的問題。每種顏色代表不同的定義波長,但是我們每個人對顏色的感知都取決于我們的感知能力。此外,我們都有與顏色相關的不同文化或背景關聯。

          有很多很棒的文章和視頻,介紹了色彩理論和色輪,還有許多用于生成調色板的工具。但是有時您會在實踐中發現這些文章不太好用,顏色組合不完全匹配或所生成的調色板在您的項目環境中效果不佳。

          所以你會怎么做?您如何開始思考和查看顏色,使它們更易于選擇以及調整您的需求?

          諸如互補和單色,飽和度和亮度之類的色彩理論術語并沒有吸引他們。

          因此,我開始以不同的方式分解色彩,方法是從繪畫和室內設計等傳統視覺和圖形藝術中汲取靈感,并以對我們作為UI設計師所做的方式有意義的方式對其進行取景。

          匹配調色板并平衡配色方案

          也許您已經按照所有的色彩協調和顏色理論教程進行了準備,并生成了一個免費的調色板,但是您注意到這些顏色似乎不太匹配,也許它們看起來比較粗糙或不專業。

          創建良好的配色方案就是與色調,陰影和溫度匹配的平衡。要在設計應用程序中成功做到這一點,您需知道要拉動哪些杠桿。

          色彩理論提供了一些公式,可用于啟動調色板,這是理解調色板的重要基礎。但是創建漂亮的調色板不僅與這些公式有關,還與平衡色調,陰影和溫度有關。

          這些是我們可以推拉的“杠桿”,可以為我們的UI設計實現更加平衡和獨特的顏色組合。

          因此,首先,回顧一下這些杠桿的作用。

          色相是用于描述所見到的每種色調的通用術語。

          飽和度指的是我們正在查看的特定顏色的主要顏色系列。白色,黑色和灰色通常被稱為無彩色。

          明度也指顏色的明暗程度。色調相同的顏色,明暗可能不同。例如,絳紅色和粉紅色都含有紅色,但前者顯暗,后者顯亮。

          色溫-色溫更多地是關于我們如何感知所看到的色相。并且我們傾向于將它們分為暖色和冷色。

          暖色-通常是通過增加色調中的紅色或黃色來獲得的顏色。這些往往會喚起激情,舒適,活力和運動的感覺。他們使我們想起陽光和熱量。

          冷色-是增加藍色和綠色的顏色。這些趨向于喚起,清新,冬天,靜止,平靜。他們使我們想起冰,雪和水。

          色彩模型和色彩空間

          要獲得一些技術知識,您可能聽說過3種不同的顏色模型,這將有助于我們更好地理解光和顏色的協同作用。

          CMYK使用減法混色。它指的是光線反射物理白頁的方式。顏色的重疊導致黑色。由于頁面無法投射光線并向您發光,因此頁面必須具有反射光。將這些顏色混合在一起就可以掩蓋頁面的白色,從而減少了可以反射的光量。

          RGB稱為光的加法混合。它指的是數字屏幕向我們投射光的方式。您在全亮度下的顏色會導致我們看到白色的重疊。有點像被明亮的泛光燈所蒙蔽。

          HSB-代表色相,飽和度和明度

          HSB顏色模型為我們提供了放射狀的顏色,其中我們具有一定范圍的色相,飽和度和明度值。

          這就是我們的眼睛和大腦如何解釋顏色HSB就是我們的眼睛所看到的一切,而與它是從屏幕還是在紙上投射的光線無關。

          因此,出于為UI設計選擇顏色的目的,我們將使用HSB顏色模型。

          顏色屬性

          您經常會聽到兩種較大的顏色分組。暖色和冷色。

          暖色通常被認為是主動色,這意味著它們會引起更多關注。

          冷色通常被認為更被動且后退一些。

          根據色彩的豐富程度和它們如何平衡,您可以使柔和的暖色充當被動元素,而更鮮艷的冷色則扮演主動角色。

          現在,您了解了顏色如何在屏幕上顯示以及如何設置我們的設計應用程序。讓我們談談如何在我們的設計軟件中使用和推動這些杠桿,并平衡我們的配色方案和調色板。

          為了得出這些不同的顏色類別,我們將集中于推和拉色調,飽和度和亮度(HSB)的控制桿。

          在數字屏幕上,我發現有一個公式和安全范圍的飽和度和亮度,可以每次為每個類別創建一個完美的調色板。

          為簡化起見,我將主要顏色分為6種通??梢宰R別的主要顏色類別。這些反映了我們在日常生活中談論顏色時通常傾向于指代顏色的方式:

          1.寶石色調

          S:83-73,B:76-56

          這些顏色是飽和度很高的色調,以寶石命名,包括寶石藍,寶石紅,紫水晶紫色,檸檬黃和翠綠色。想一想紅色寶石項鏈或皇家紫色的魅力。這些顏色富麗堂皇,深沉,并賦予豪華感。

          2.粉彩

          S:14-21,B:89-96

          柔和的顏色屬于淺色系。粉色,淡紫色和淡藍色是常用的柔和色。這個家庭的顏色通常被描述為“舒緩”。我們通過降低飽和度和調整色彩來創建這些顏色。

          3.大地色調

          S:36-41,B:77-36

          這些是自然界中常見的顏色。可以通過將純色與白色,黑色或灰色相結合來創建它們。從廣義上講,這些是中性色。它們受到樹木,森林,海洋和天空的色調的影響,被用以模仿自然色彩。我們通過增加飽和度和調整色調來創建大地色調。

          4.中立

          S:1-10,B:99-70

          純中性色包括黑色,白色,米色和所有灰色,而接近中性色則包括棕色,棕褐色和深色。這些是通過使色彩去飽和來創建的。它們可以與以上任何類別配對以創造平衡。我們通過降低飽和度并調整色調,色調和陰影來創建中性色。

          5.熒光燈/霓虹燈

          S:100-63,B:100-82

          在物理世界中,這是由霓虹燈管或紫外線反應涂料的顏色創造的,但在數字世界中,我們可以通過將非常明亮和高度飽和的顏色應用于我們的設計來獲得相同的效果。我們通過增加亮度和色調來創建它們。

          6.陰影

          S:0-0,B:0-100

          兩種主要的陰影是黑色和白色,其他陰影也包括不同程度的灰色。

          UI顏色組合

          最佳的用戶界面設計結合使用一種顏色類別以及中性和陰影。

          您實際上只需要這些類別中的1或2種顏色即可設計參與整個用戶界面。

          我們為什么不這樣談論顏色

          作為數字設計師,我們傾向于避免給這些配色方案分類,因為術語似乎是為混合自然色彩的畫家,印刷設計師和室內設計師保留的。但是從實際的角度來看,當我們仍在學習色彩理論并使我們的眼睛習慣于選擇可以一起使用的色彩時,我發現以這種方式引用色彩在UI和數字屏幕設計中可以非常有用。

          這不是一門精確的科學,但是您會看到如何以這種方式思考顏色并掌握一些杠桿和數字,以指導您幫助用戶創建更令人愉悅和精致的調色板。

          理解色彩理論的基礎和原理很重要,特別是當涉及到實際應用時,它就顯得尤為重要。引用不同的學科并找到對我們有用的類比可以帶來很大的不同。

          作為UI / UX設計師,最重要的是,無論您如何去實現,您都能夠有效地使用顏色來傳達信息并為用戶創造最佳體驗。


            • 文章來源:站酷   作者:對啊設計君

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

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

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


          UI 設計:如何做到理性?

          博博

          有哪些理性,以及如何做到理性



          UI 設計,是用理性方法,來滿足需求,并帶來美學享受。


          本篇探討 UI 設計如何做到理性。全文共有三部分:有哪些理性,如何做到理性,止步于理性嗎。



          01 UI 設計:有哪些理性?


          UI 設計主要有四類理性:基本原則,基礎知識,風格設定,風格把控。四類理性有一個共同核心:活學活用。



          1 基本原則


          共有四個基本原則:對齊,對比,親密,重復。



          先說對齊。


          秩序產生美。對齊作為一種基本秩序,主要事關整齊美觀閱讀體驗。


          對齊一般分左對齊、右對齊和居中對齊。


          從閱讀體驗角度來講,左對齊通常勝過居中對齊,所以絕大部分文章和 UI 界面都是左對齊為主。


          從美感角度來講,居中對齊往往勝過左對齊,所以一些強調美感勝過強調閱讀效率、篇幅不長、同時需要細品的詩或歌往往采用居中對齊。



          從空間利用率角度來講,右對齊往往是左對齊的一種補充。比如微信的發現頁面,最重要的圖標和文字左對齊,次要的右箭頭和其它信息右對齊。


          UI 設計追求閱讀體驗、美感和高空間利用率,所以這三種對齊方式大部分時候都會同時出現。整體而言,是以左對齊為主,居中對齊和右對齊為輔。


          再說對比。


          嘈嘈切切錯雜彈,大珠小珠落玉盤。音樂講究韻律和節奏,設計也追求錯落有致的節奏感。這種節奏感,很大程度上靠對比實現。


          好的對比可以帶來視覺張力,就是抓人眼球的吸引力,同時也能起到主次分明和視覺引導的作用,最終帶來良好的閱讀體驗。


          一定程度上,對比是無處不在的。只要存在不同,就存在對比。比如大小之間的對比,不同顏色之間的對比,文字與圖標/圖片之間的對比,不同對齊方式之間的對比,等等。


          一般而言,對比需要果斷:若不同,就徹底不同。因為一般情況下,充分的對比能帶來更好的視覺張力和更好的閱讀體驗。


          第三說親密。


          設計就是分類,張小龍曾如是說。分類中最重要的原則是親密,還有一個副產物是留白。


          性質相同或相似的元素,我們會讓它們看起來離的更近,關系更親密。親密成就分類,分類能化繁為簡。


          最后說下重復


          設計追求一致性,一致性主要靠重復來實現。被大量“重復”的元素,比如這篇文章里的字體大小和字體顏色,既保證了一致性,又提高了效率。


          2 基礎知識


          基礎知識主要包括:手繪、顏色、版式設計、字體設計、品牌設計、動效設計、插畫設計等專業知識。


          UI 設計師可能不用畫卡通人物或插畫,但一定會畫圖標和 logo,這些也會用到手繪。作為造型基本功,需要掌握一定手繪技能。


          顏色方面,最重要的是能夠很好感受和理解顏色傳達出來的感覺,也即顏色的“精神之美”,這塊主要依賴審美和練習。


          配色方面,推薦軟件里的 HSB(色相、飽和度和亮度) 模式,這種模式很好理解,也方便調色。另外還強烈推薦從照片中吸取顏色,因為照片往往會和“生活”、“自然”有一定關聯,“生活”和“自然”是非常重要的素材和靈感來源。從色卡中選擇顏色也是一個不錯的選擇。


          版式設計就像是選秀節目中練習生的舞臺表演,考驗的是唱跳、表情管理、舞臺魅力、臨場應變等綜合實力


          “活學活用”環節,會結合例子分享版式設計。


          字體設計、品牌設計、動效設計、插畫設計等方面,個人經驗不多,就不分享了。文末會附一份推薦書單,囊括基本原則和部分基礎知識。


          3 風格設定


          風格設定,即上篇提到的“精確描述”,是在動手設計之前,先探索出合適的風格,并把它精確描述出來。


          好的開始是成功的一半。風格設定是一個開始,極其重要。如果風格設定只做到 60 分,稍微打點折扣的執行結果就是不及格。所以,如果要把設計做到 85 分,風格設定一般要做到 90 分。


          風格設定猶如在茫茫大海中行船,首要目標把握方向,核心訴求是精準。海上并無現成道路和導航可循,只能依靠繁瑣而嚴謹的推理和計算。


          風格設定的次要目標劃一個既清晰界定風格、又清晰指明“發揮范圍”的“圓圈”,核心訴求是周密。因為需要清楚知道“圓圈”以內代表什么,“圓圈”以外代表什么。


          在“精準”和“周密”上同時做到優良,風格設定才能做到優良。


          既精準又周密的風格設定,通常無法一蹴而就:“風格設定”階段一般只能做到七成,剩下三成需要在設計過程中繼續探索和打磨。下一大段會結合案例分享具體方法。


          4 風格把控


          風格把控有兩層含義,一是實現當初設定的風格,二是在實現的基礎上做到統一和規范。


          只要嚴格在“圓圈”里發揮,實現當初設定的風格并不難。那做到統一和規范難嗎?往難了說就是需要做大量瑣碎工作:以聯系的眼光看待所有設計元素,并把它們分類規整好,注意分類不宜過多,同時分類邏輯上不能出現明顯問題。往簡單了說就是大量復用已有的設計樣式。


          風格把控就是在劃定的“發揮范圍”內,利用設計知識和經驗,以規范的方式實現規劃好的風格。


          5 活學活用


          活學活用作為四類理性的共同核心,最典型的應用場景是版式設計。


          活學活用有兩個要點:正反結合,風格第一。



          所謂正反結合,是指設計知識既能正著用,也能反著用。最常見的例子是對齊原則,大部分時候是正著用,但如果想要營造活潑的感覺,也會反著用:故意打破對齊原則。


          除了對齊原則,其它設計知識,比如重復原則,也可以反著用。


          本文配圖就是一個例子:圖片左上角、右上角和右下角分別散布著裝飾元素(橫線、圓環)和 logo,在裝飾元素的出現次數上,沒有用重復原則。過年家里掛燈籠一般至少掛兩個,同一裝飾元素一般至少出現兩次,以達到一種和諧和較為熱鬧的裝飾效果。



          我在裝飾元素的出現次數上沒有用重復原則,而在出現位置(相似位置)、元素大?。ㄏ嗨拼笮。┖驮仡伾ㄏ嗨祁伾┥嫌昧酥貜驮瓌t,同樣達到了和諧效果。之所以沒在裝飾元素的出現次數上用重復原則,是想放一個隱喻在這里。


          所謂風格第一,是指設計風格永遠第一,設計知識永遠第二。知識服務風格,切不可重知識輕風格。


          《倚天屠龍記》中,張三豐教張無忌練習太極劍時,要他忘記劍招,只記劍意。某種程度上,版式設計也要將“劍意”放在第一位,“劍招”服務“劍意”


          對比原則也有反著用的時候。有一條關于對比的知識:對比要果斷,若不同,就徹底不同。這條知識能解釋百事可樂 logo 里紅色與藍色的強烈對比,但解釋不了山本耀司旗下大部分服裝那千篇一律的黑色——單色,無對比。



          設計最重要的是感染力,感染力主要來自個性、態度、價值觀這些風格層面的東西,而非設計知識這些技法層面的東西。


          當一個設計,技法高超而風格不足時,感染力和魅力就會不足,這也是設計師經常會犯的錯誤,大家需要注意。



          02 UI 設計:如何做到理性?


          可以簡單分成三步:規劃,成形,細化。下面結合微信 Redesign 這個案例來說明。



          1 規劃:用“紅綠燈”法設定風格


          設定風格,用到的方法姑且稱之為“紅綠燈”法。“紅綠燈”法借鑒并改良了我在網上看到的一種“紅黃綠卡片法”(在紅、黃、綠三種顏色的卡片上寫下不同的設計關鍵詞),并和“情緒板”法有相似之處:都包含關鍵詞定位圖片參考兩部分。


          先說關鍵詞定位,共有兩步。


          第一步類似頭腦風暴,結合產品屬性、用戶屬性、市場情況、個人喜好等因素,把能想到的設計關鍵詞全部寫下來。合適的不合適的都要寫,只要想到了就寫下來,確保有二三十個。如果關鍵詞數量不夠,這個步驟可以多重復幾次,直到夠了為止。這一步設計師和需求方都要參與進來,在提供關鍵詞上雙方是平等關系。


          這個微信 Redesign 是個具有探索性質的小練習項目,基于微信 7.0,有兩個目的:首先保留原有交互體驗和品牌識別度,其次在視覺上更年輕、更流行。可以通俗理解成:一款微信“皮膚”,主要給年輕用戶和趕新潮的中老年用戶用。


          結合產品屬性(社交類、工具類、內容類)、用戶屬性(年輕用戶為主)、市場情況、個人喜好這些因素,這一步想到的關鍵詞如下圖所示。



          第二步是歸類,就是把第一步產生的所有關鍵詞歸成“紅黃綠”三類。如果關鍵詞不夠,還可以再補充。這一步依然是需求方和設計師共同參與,但需要設計師來主導。


          紅色關鍵詞代表不能踩的紅線:不能這樣做;黃色關鍵詞代表黃燈警告:這樣做不太合適綠色關鍵詞代表暢通無阻:應該這樣做。


          需要注意的是,綠色關鍵詞最好控制在 3-4 個之間,如果超過 4 個,就需要分成主綠關鍵詞和次綠關鍵詞,主綠關鍵詞依然要控制在 3-4 個之間。這樣做有兩個考量,一是確保簡單和重點突出,二是也更容易實現。


          回到第一步的關鍵詞上來。設計中當然可以用“擬人”、“隱喻”等手法,所以“擬人”這個關鍵詞顯得意義不大,故刪去?!皽貪櫋焙汀坝H和”,“老少皆宜”和“大眾”在語義上都存在一定的重復,所以刪去后者。刪除這類不合適的關鍵詞后,剩余關鍵詞就按“紅綠燈”法歸類,歸類后情況如下。


          (微信 Redesign 之按“紅綠燈”法歸類后的設計關鍵詞)


          關鍵詞定位已就緒,再來找參考圖片。


          可供參考的圖片有兩大類:照片和 UI 界面。UI 界面也有兩類:線上作品(真實項目、練習作品等)和上線作品。


          做 UI 設計,參考什么樣的圖片?個人建議,做什么類型的設計,就重點參考什么類型的圖片。比如 UI 界面就重點參考 UI 界面,banner 就重點參考 banner。


          UI 界面的設計,個人喜歡重點參考知名產品的上線作品。單從視覺角度來說,上線作品的質量可能比不過一些線上練習作品。但是已經上線的知名產品的 UI 設計,其風格的形成往往都會經過很多推敲,會有很多比較成熟的設計思路在里面。


          參考別人的設計,最重要的是參考設計思路,其次才是參考表現形式。這種設計思路,有時候能從網上找到,但更多時候靠自己推測


          微信 Redesign,根據“很多年輕人在用,且風格比較流行”這條主線,找來了 QQ、抖音、B 站、小紅書、陌陌、Soul、騰訊視頻、愛奇藝等產品的截圖。這些產品的截圖,看完一圈后,就會面臨一個問題:以圖標為例,這幾個產品的圖標,風格各異,但基本都具備“年輕”和“流行”的特點,那應該參考哪一個?



          這時就要求助關鍵詞定位。除了“年輕”和“流行”,主綠關鍵詞還有一個“輕微老少皆宜”。最符合“輕微老少皆宜”的是愛奇藝和騰訊視頻:很多老人和小孩也會用這兩個 App 看視頻,網上公開的數據也能佐證這一點,所以它們的設計一定會照顧中老年用戶的審美。


          最后,出于個人偏好,我選擇重點參考愛奇藝的圖標風格,具體而言就是:深淺雙色、較粗(1.5pt)描邊、圓潤風格。


          2 成形:按照規劃,實現風格


          紅黃綠三色關鍵詞及重點參考圖片就緒后,就可以動手設計。


          我一般會把界面設計粗略分成三大部分:版式風格、元素風格、元素大小,元素為圖標、圖片、按鈕等,然后去一一實現。


          先說版式風格


          用的主要綠色關鍵詞是“更流行”和“更年輕”?!案餍小卑ǎ焊笞痔柕捻撁鏄祟}、盡可能用留白代替分割線和卡片的“無界”風格、圓形頭像、更多留白更多舒適、等等?!案贻p”包括:更圓潤的搜索框、輸入框和圖標、更年輕更具活力的配色、等等。


          再說元素風格之圖標風格。


          圖標主要參考愛奇藝 App:其一,底部導航和發現頁的圖標都是深淺雙色加較粗的描邊;其二,除了更圓潤以外,部分圖標還變 Q 了。


          最后說元素大小


          以這個小項目為例,最主要的元素大小是圖標大小和字體大小,它們會影響整個設計的感覺。通常情況,元素越小,給人感覺越精致、越高端,此其一;其二,可能是年輕人和老年人視力存在差別的原因,越小的元素往往代表年輕人的審美,反之則代表老年人的審美。


          元素大小主要運用的綠色關鍵詞是“輕微老少皆宜”。也就是說,需要在年輕人和中老年人的審美中找到一個平衡,所以元素大小基本直接參考了微信 7.0 的設計,個別地方做了微調。


          最后,出來的效果如下圖所示。



          3 細化:打磨優化


          這份設計我發在了網上,部分網友留言說看著不夠好,不太舒服,有一個表達的比較具體——“雖然用了大面積留白,卻讓人感到緊迫...”。


          基于網友的留言,我仔細審視了這個設計,最后發現問題主要出在頁面(發現頁為例)左右兩側:留白過小。



          當初之所以這么設計,是想通過頁面左右兩側較少的留白制造一種內容將要撐破屏幕的感覺,從而營造一種活潑的感覺。注意,彼時“活潑”還沒出現在“黃色”關鍵詞里,上文兩張關于關鍵詞的圖都省略了中間探索和優化的過程。


          很多網友之所以沒有感受到活潑而只是覺得不太舒服,至少有兩個原因:第一,整個設計的基調是簡約、清爽,有一定的年輕感和流行感,但沒有太明顯的活潑感,硬往里面某個地方塞“活潑感”并不和諧,大家也難以感受到;第二,單純就“活潑感”而言,做的依然不到位,比如圖標與右側文字的留白,可以比圖標與左側邊界的留白大,方能更好彰顯活潑與活力。


          考慮到“輕微老少皆宜”這個綠色關鍵詞及微信主要是工具型和內容型產品,“活潑感”用在這里并不十分合適,于是放棄,并將“活潑”歸為“黃色”關鍵詞。此處留白的目的就回歸其本職工作:整體和諧與舒服。于是就把留白相應調大了。



          另外一個優化的點是“眼睛”的形狀:微信圖標、看一看圖標、表情圖標、朋友圈里將點贊和評論折疊起來的圖標都有一雙“眼睛”,這雙“眼睛”起初是豎著的橢圓形,很萌,也比較低齡化。為了盡可能的“輕微老少皆宜”,這里統一把“眼睛”由豎著的橢圓形改成了圓形,弱化了“萌”和“低齡化”的感覺。



          還有一塊是顏色上,拍攝視頻動態的圖標有用到藍紫色。這個紫色基本符合“更年輕”、“更流行”,但不太符合“輕微老少皆宜”,所以最后放棄了紫色,保留了藍色。



          遵循主綠關鍵詞里的“輕微老少皆宜”,其它優化的點有:微信圖標尖角處的圓角調小,刪除啟動頁與黑色"WeChat"字形成對比的綠色圓點。另外還有一些視覺層面美觀、和諧、舒適度的優化,比如顏色、留白、圓角大小、字體大小方面的微調。


          優化后的微信 Redesign,整體效果如下圖所示。



          凡事預則立,不預則廢。UI 設計如何做到理性,最核心的是設計風格,規劃、成形和細化都緊密圍繞設計風格展開。


          最后,嘗試總結下“紅綠燈”法的優勢,主要有四點:精確、周密、穩妥、高效



          關于設計風格,傳統規劃方法一般只有三四個“綠色”關鍵詞。


          “紅綠燈”法擁有“紅燈”、“黃燈”和“綠燈”三種顏色的關鍵詞,從而確保大方向更準確?!凹t綠燈”法會產生20個以上的紅黃綠關鍵詞,從而確保劃出來的“發揮范圍”更周密,極少有疏漏。


          在“成形”這個設計環節,一旦踩到“紅線”和“黃線”,規劃好的紅黃綠關鍵詞都會馬上發出警報,從而大大降低“違規踩線”行為的發生次數,確保設計執行環節的穩當可靠。


          “紅綠燈”法通俗易懂門檻低,需求方可以較為深度參與“規劃”環節。需求方在“規劃”環節的深度參與,理論上可以降低后期的返工和修改次數,從而確保整個設計過程的高效。同時理論上也能夠提高設計師和需求方雙方合作的愉快程度。



          03 UI 設計:止步于理性嗎?


          UI 設計,始于理性,但無法止步于理性,還需要超越理性。注意,這里的理性,僅指設計知識的相關理性。


          超越理性主要有兩點:直覺,其它知識。



          1 直覺


          直覺是指一種能夠快速感受和評估設計優劣的感覺。良好的直覺往往快而準。


          感知和評價別人的設計時,用到的幾乎全部是直覺。審視自己的設計時,也離不開直覺。


          在審視自己的 UI 設計時,直覺主要發揮兩個作用:第一,囿于知識儲備或表達能力,有些地方就是解釋不清,這個時候就要靠直覺去感受去判斷;第二,直覺往往會作為檢視設計的最后一道關卡,也是最重要的一道關卡。


          直覺來自哪里?


          個人觀察是,直覺往往和審美正相關。比如一個設計師,他掌握的設計知識有限,經驗有限,對自我的要求也不高,最終的作品往往不出彩。但如果他審美好的話,往往能夠分辨出不同設計方案之間孰優孰劣。


          如果你想就設計稿征求別人的意見,請去找那些審美好的人。


          2 其它知識


          其它知識是指設計知識以外的所有其它知識。比如 iPhone 上刪除應用前應用圖標的抖動,其靈感應該來自生活中的搖頭求饒或嚇得發抖,抖動的幅度和頻率則需要利用物理學和數學方面的知識。


          優秀的設計,一定會從生活中汲取大量靈感,并廣泛利用社會類、人文類和理工類學科的知識。就拿數學來說,在好的設計中,一定是個??停阂驗槟阈枰煌5陌从嬎闫?,從而計算不同設計元素之間的比例關系和各自的大小。


          汝欲學詩,功夫在詩外。遣詞造句這些文字技巧只能是寫詩的基礎,而非關鍵。寫詩的關鍵在于你對生活、對世事的積累和感悟,在于你的思想是否深刻,情懷是否充足。


          寫詩如此,做設計亦如此。設計知識只是做設計的基礎,而非關鍵。做設計的關鍵在于“其它知識”。“其它知識”非本文重點,就不展開了。



          結語


          UI 設計里的理性,主要是各類設計知識。理性的核心在于活學活用各類設計知識


          理性嚴謹的做 UI 設計,可以簡單分成三步:規劃,成形,細化。好的開始是成功的一半,一個高質量的規劃顯得尤為必要。


          用“紅綠燈”法做規劃,并指導成形和細化工作,會更精準、周密、穩妥和高效。


          UI 設計,是七分理性,三分直覺。審美越好,直覺越準。


          優秀的 UI 設計,一定會從生活中汲取大量靈感,并廣泛利用設計以外學科的知識。








          推薦書單  


          [美]Robin Williams《寫給大家看的設計書》

          [日]佐佐木剛士《版式設計原理》

          [日]伊達千代《色彩設計的原理》

          [日]小林章《西文字體1、2》

          左佐《設計師的自我修養》

          左佐《治字百方》




          原文鏈接:https://mp.weixin.qq.com/s/yZVBzTYJxWQ7fk-tjXG8Yg


            • 文章來源:站酷   作者:SnowDesign

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

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

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



          12個PC網頁的UI設計趨勢(上)

          博博

          實際上所有的網頁設計趨勢都是由:大型化(Big UI)、較低的密度(Low Density)、長頁面(Long Page)這三個設計思想所衍生出來的。而影響這些設計趨勢的人,不是設計師,不是硬件制造商,而是用戶的行為。


             因為智能手機的普及,用PC瀏覽的網站關注度正在下降。但是,托B2B數字營銷的福。PC網站今后也變成戰略中心。即使在B2C的領域,PC網站也是不可或缺。


             對于在硬件方面沒有太大變化PC的網頁設計來說,也有技術被固定化的印象,實際上現在也正在接受時代的潮流而發生著變化。特別是下面那樣的環境變化,也給與PC網站的UI設計帶來很大的影響。


          ?顯示設備的多用化。

          ?智能手機應用的普及化

          ?電子設備觸摸屏的普及


             如果迎合趨勢將會取得成功不是嗎?這個基礎就是抓住用戶動向的變化,有必要完全理解這一變化。因此這篇文章是PC網頁 UI設計的最新動向,基于那些背景下的推測匯總。



          1.Big UI / low Density / Long Page的潮流

             舉例說曾經的PC網站有很多是在有限的空間內填入了大量元素的設計。但是現在UI部件變得有:大型化(Big UI)、較低的密度(Low Density)、長頁面(Long Page)的傾向。



             以前是海外以創意型,初創型為中心網站所采用的設計,進入日本的海外企業和前衛的網頁設計師,采用那些理念設計的企業網站,漸漸地在日本也被廣泛應用,這個趨勢也與扁平化設計相呼應。2013年以后以Big UI / Low Density / Long Page 為基礎的設計理念在網站更新中使用增多了。



             這樣的趨勢,不能單單看起來時興,其有合理的存在理由。在開發的立場,讓響應式網站更容易實現。如果在用戶的立場來看,更容易瀏覽、更容易理解、不再迷茫,除了所說的這些以外,讓網站更好的利用觸摸屏,作為其更大的優點。


             近些年不只手寫板,筆記本電腦也安裝了觸屏。對于在沒有準備手機網站的情況,在智能手機上,網站的頁面也被要求需要有一定程度的瀏覽。


             觸摸屏,因為用手指的點擊,不能進行精準操作。因此用戶界面會變大。元素之間的必需留出充分的空間。如果用戶界面變大,密度變低,當然頁面中表現元素要少,頁面變長,以滾動為前提了。


             這篇文章之后要介紹很多趨勢,都是從Big UI / Low Density / Long Page的潮流中派生出來的。這不是最時尚的流行,但是現在是最適合用戶行為的設計思想。



          2.1欄布局

             作為Big UI / Low Density / Long Page合適的布局,就是1欄布局。


             曾經左右兩欄布局的PC網站是UI設計主流。在電子商務網站等有大量信息的網站中,3欄布局也很常見。但是現在去掉左右欄,只焦點于內容部分,1欄布局正在增加。



             對于用戶,不再有不必要的雜音映入眼簾,集中真正必要的內容。文字更容易閱讀,圖片被展示的更大。


             另一方面,映入眼簾的信息量減少,廣告等會變得有些分散。因此,對于用戶活動線路的設計,必須要更加謹慎。


             另外,在側邊欄設置局部的導航條手法,與其他層級的網站相關,有讓用戶不再迷茫的突出優點。去掉側邊欄的導航條,讓網站的層級降低,盡可能減少菜單,不止限于1頁內的布局意味著網站全體的設計方法需要重新考慮。


             反過來說,多層級化的前提是與網站的龐大度有關。有很多的1欄布局不能讓內容被準確的理解,據此判斷需要謹慎使用。




          3.中對齊

             1欄布局的一個問題是文字換行吧。文字充滿整個寬度時候會顯的很長,很難保持布局的美觀。如果1行的文字數量超過40個字,人們就會覺得難以閱讀。不能因為是1欄就什么也都不考慮,寬度被文字占滿,是不可避免的。


             解決這個問題的一個思路就是中間對齊。說到寬度很寬1欄的布局,中對齊和左對齊如何很好的組合,變成設計的要點。



             中對齊的正確使用有一些值得注意的點。首先,必須避免用戶的視線忽視中間。例如,如果長文本中對齊,文章的開始點就會因此改變,變得難以閱讀。如果使用中對齊,短文章不必要換行,長文章必須左對齊。


             還有,接近元素寬度充滿的時候,雖然用中對齊,也不能很好的解決。但是,寬度被占滿的情況是不存在的,看到中對齊不完整的位置就像懸浮一樣。為此,必須要在運用盒子和邊緣等下功夫,中對齊才不會出現違和感。





          4.固定的頂部和頂部的超薄化

             固定的頂部也很普遍。在很多的時候,這里搭載的是導航條。無論能進入頁面內哪個位置,都能立即回到主要部分。固定頂部的UI沒有側邊導航,當頁面較長時,能確保使用的敏捷度。



             但是,固定的頂部沒必要的時候,會有占據一些空間的缺點。因此,頂部只能加工的變薄。像曾經PC網站的外觀那樣,采用多段式并且較厚的頂部是很困難的。


             這就意味著必須在頁面內限定元素。如果元素容納的多,頁面就會變厚,很難被固定化。菜單的數量應該被限定,相對于以前,這方面的意識必須要加強。



          5.固定的左邊導航

             近年可以看到一些布局將導航條設置在左側。說起來也與曾經2欄布局為主流時代的左導航在構造和功能上有所不同。


             畫面左邊被固定,最近有很多追隨滑動的按鈕。另外,內容部分基本使用1欄布局,跟隨畫面寬度的進行伸縮的液態布局被使用的數量也很多。



             這樣的設計會帶來應用程序的操作感。另外,有容易應對多設備的特點。移動端優先的設計,響應式網站和液態布局即是使用PC也能對應多種情況,有采用這樣的構造的傾向。


             但是,必須注意的是這樣新式布局,對于一般的用戶有很難留下第一印象的危險性。另外,對于菜單的多層級化的時候,連接和鼠標經過引出下一級菜單的操作是必要的,因此提高了操作的難易度。


          從使用能力,全部的構造等固定左導航的缺點來看,有必要搞清導入的妥當性。



          6.液態布局

             在設備多樣化中,畫面的分辨率呈現前所未有的變化。以前,寬度符合960~980px就可以解決問題的這個規律變得難以通用。對于分辨率多用化的一個回答就是,符合畫面寬度的布局也就是液態布局。


             液態布局是,元素和圖片不是用像素而是使用%。因此,無論看到什么樣的尺寸,分辨率的畫面,都會被布局成有一定的平衡??梢越鉀Q符合小畫面的時候的缺點和符合大畫面的時候的缺點。



             必須留意的是,對各個頁面“最合適化”的布局是不存在的。設想一下各種各樣的分辨率的畫面,匯集了最少破綻并被認為是有共同的妥協點的布局手法。有些特定的尺寸會感到平衡被打破,有些程度是必須被允許的,意味著會布局成像網頁的網頁。


             未完待續...




          出典:http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

          翻譯:SISENdesign



          原文鏈接:http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

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

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

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

          交互設計中排行榜設計詳解

          博博

          排行榜設計有幾種展示方式?排行榜入口引導怎么做?視覺表現有那些?看這一篇,帶你全面了解排行榜的背后思考及做法!

          “今天吃什么???”

          “不知道啊,看看大眾點評,哪家店比較靠前”

          “一會去看什么電影?”

          “我看豆瓣上,這部片子評分特別高,我們去看這個吧”

          當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時,會發現當你面對的選擇越多時卻越不知道該如何做決定,或者當下做了決定后會一直思考做的這個決定是不是最好的,這恰恰是當代絕大部分用戶在實際生活中面臨的問題-選擇困難。面對用戶的選擇需求各大平臺都有自己的方式,幫助用戶做決定的同時,引導用戶購買目標產品,極大的降低了用戶的選擇成本,其中排行榜就是平臺的常用套路。用戶的選擇成本是什么?排行榜為什么能夠幫助用戶降低選擇成本?如果排行榜僅僅是用來降低用戶的選擇成本,為什么所有商家都對排行榜趨之若鶩?下面帶你了解為什么人人都愛排行榜,及我們生活無處不在的“顯性”“非顯性”排行榜。你可能不知道是我們的生活正在被各種排行榜所支配


          排行榜的本質是一個沒有感情的信息篩選機制,將所有相關的同類事物之間通過比較,從而反映出同類事物的客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可,比如我們買衣服會首選淘寶,電子類產品會首選京東,看電影會看豆瓣評分,這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選,由于錨定效應使得用戶降低自己的選擇成本,可以準確快速的做出選擇。同時由于用戶的從眾心理或者羊群效應,也會對上榜主體產生強烈的品牌認可,為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量以及平臺背書標簽,比如:B站的百大up主,各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名,那么這一切背后的原理是什么?


          一個完整的排行榜是由平臺、上榜主體、用戶三大組成部分,俗話說屁股決定腦袋,不同的定位決定了排行對三大組成部分不同的作用,當然背后的原理也不盡相同。


          1.選擇類排行榜-降低用戶選擇成本

          在沒有各種應用前,當我們決定購買什么東西或去哪家消費時,前期需要花費大量的人力、物力去搜集相關的信息進行整理集合對比集合信息后才能做出決定,也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后,做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本(前兩個階段發生的成本是交易費用,而不是選擇成本)。在備選集的建立過程中,包含的選擇越多,用戶選擇的難度就越大,選擇成本就會越高。

          選擇性排行榜在備選集建立完成后,利用沉錨效應在用戶心理建立潛意識的目標參照,幫助用戶完成擇優決策,降低用戶的選擇成本。(另一方面平臺在幫助用戶降低選擇成本的同時,也影響著用戶的最終選擇,在接下來的平臺側方面會有詳細的分析)。

          比如說:當我需要買個耳機時,如果在沒有各大應用的前提下,我需要通過找到我身邊的耳機發燒友或數碼電子方面方面的內行人對耳機進行了解,收集信息建立備選集,但由于京東在電子設備購物方面的權威性,我會優先查看京東的耳機類排行榜,也就是說京東幫助我完成了前期對于信息的搜集及備選集的建立,而用戶出于對平臺權威性的信任,根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息,最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找,以及用戶對信息確定性的尋找過程。

          2.信息類排行榜-滿足社交需求

          在馬斯洛需求中,當個人的生理需求和安全需求被滿足時,與他人建立情感聯系或關系成為人們最強烈的需求,即社交需求。社交又分為:為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如:QQ音樂新增的撲通社區、微博的明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。

          無論是“功利社交”還是“共情社交”首先需要的是溝通,溝通的本質則是信息的流通,但當雙方都沒有可以溝通的信息時則社交不成立,而類似:微博熱搜、今日頭條、澎湃新聞等信息類排行榜,則給有社交需求的用戶提供了可以展開話題相通的談資

          選擇類排行榜中,提到的從眾心理(又稱羊群效應),是指人類由于對信息壓力規范壓力,會希望融入到群體中尋求安全感的特性,即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感,會熱衷于瀏覽此類排行榜來獲取實時信息,融入群體生活。每天早上,在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件,在上班電梯或工作間隙討論各自掌握的信息,及對事件的見解,甚至在與他人有相同的見解或之后,會對對方產生莫名的親近感等等,這些都是在滿足大眾自己的社交需求。

          3.分享類排行榜-自我確認需求

          過年期間各家app紛紛都推出了自己的用戶年度報告總結榜,不知道你有沒有參與到其中,并把這些報告的截圖分享到自己的朋友圈!在我們的日常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序,人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外,還需要清楚自身在大數據下的自我確認,通過各種各樣自我測試類榜單,判斷自身的能力、情緒、價值等等,來達到自我認同,否則就會感到焦慮不安。

          加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解是“社會是舞臺,人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程,我們想要呈現給觀眾怎樣的形象,需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己,為了維持自身的平衡防止崩潰,人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己,讓用戶更加清楚的認知自己,同時通過分享,滿足自我確認以及他人確認的需求。

          我目前只總結出這三種類型的排行榜,如果有小伙伴想到其他類型歡迎在評論區提出,大家一起參與討論。

          無論哪種排行榜,用戶信任的基礎都來自對平臺的信任,那么用戶為什么信任平臺?排行榜對平臺意味著什么?背后原理是什么?下面我們來討論排行中平臺的影響及背后的原因。


          對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性,選擇成本是品牌經濟學的核心,而用戶對于排行的信任首先要建立在平臺品牌的權威性下的結果。

          1.平臺權威性—用戶側

          從我們記事起,我們對世界的認識來自我們的父母或老師,而這些教導我們什么是對、什么是錯的長輩或老師,對當時剛來到這個世界的我們來說就是權威的化身。長大后我們對于權威的認可則更傾向于某一領域的專家,比如:醫生、律師、教授等,認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠,可以幫助普通用戶節省研究這一領域問題的工作,做出更輕松的決定雖然不一定是正確的。

          搜索我們會第一時間想到百度,需要觀看影視、書籍會想到豆瓣,想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性,形成品牌號召力,推動著用戶做出需求決策。另一方面排行榜中也會說明數據來源,比如京東會在排行榜頁面有明確的榜單說明,豆瓣根據平臺數據更新,汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明,減少用戶做出決定中的思考、猜測,獲得用戶的信任,增強平臺的權威性。那對于平臺來說權威性的建立意味著什么?

          2.平臺權威性—平臺側

          • 影響用戶的決策方向

          平臺權威性對用戶來說意味著說服力和影響力,在減輕用戶的決策壓力的同時,也影響著用戶做出平臺所需的決策方向;

          • 平臺自帶話題性

          平臺本身的權威性也會為平臺承載的內容帶來討論的話題度,加大平臺承載內容的傳播范圍。比如,每年蘋果發布會都會帶來范圍極大的熱度討論,而app store內的熱門推薦自帶話題度和討論熱度。

          • 輸出口優化

          排行榜作為內容輸出口,在平臺權威性的背書下,產品優化自身的價值,而平臺也可以通過排行榜優化自身平臺價值。

          • 平臺盈利

          平臺權威性下,可以通過多種方式達到盈利,比如蘋果app store應用商店內的付費應用,百度的鳳巢系統、微博熱搜的第3、4位排名等。

          3.平臺權威性—廣告告知

          在平臺完成建立權威性后,部分平臺開始利用排行榜進行商業變現,比如百度、58的競價排名等,現在大部分應用會使用明顯的方式告知用戶,防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”,淘寶、小紅書推薦猜你喜歡的“廣告”。


          上榜主體作為整個排行榜的內容中心,由于排行榜自帶的競爭機制、篩選機制,使得上榜用戶會很樂于分享出去,比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。

          由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度,以及各種潛在資源,比如:流量、資源、人脈、某一領域影響力、平臺背書等等,這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感,比如bilibili不同粉絲量級會送出相對應的粉絲牌。

          而平臺方也利用上榜主體挖掘潛在的用戶,為平臺帶來更多的新用戶,加強平臺權威性,形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量,帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站,簽約西瓜視頻”,各大平臺也時不時會出現搶占流量up主的情況。

          排行榜資源的建立

          排行榜設計要達到用戶攀比的效果,很重要的充分條件就是相同需求好友基數足夠大,這樣才能構成排行榜設計成功的必要條件。

          • 同系同門資源導流

          對于已有成功產品的公司,可以借助平臺相互間的導流完成初試資源的搭建,比如:微信初期借助QQ好友流量,帶來好友初期的爆發;抖音最初的活躍借助今日頭條的流量輸入。

          • 自建用戶體系

          不斷推送已關注好友的信息流,當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交,你要先有這個人聯系方式才能要求好友,關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等,不斷社區建設推送動態信息流和好友卡片推薦。

          • 偽造

          當應用建立初期,沒有很多的資源和內容時,需要平臺自行填充內容,使得排行榜信息量大,增加用戶活躍,才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等,或是平臺pgc發布推送的內容。


          面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化,根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。

          在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成,其他則根據不同產品類型及產品需求決定是否展示。

          1.頁面tab

          在首頁底部或頂部tab形式出現,多出現在以UGC或文字信息為核心的產品,以內容信息為主,常見以信息熱度為主要功能的資訊、新聞類應用。比如:知乎、今日頭條、36氪。

          知乎熱榜內容完全展開;36氪分為話題榜、人氣榜,話題榜僅展示前5條,人氣榜展示10條,僅在前5條有名次圖標,在36氪熱榜的中部還會出現收藏榜,綜合榜。

          而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”,點擊“查看更多”后,展開“頭條熱榜”及“今日關注”“北京熱榜”,整個交互形式類似微博熱搜。

          2.圖標入口

          首頁功能入口處明顯排行榜圖標,優先級較高,常見自帶推薦屬性,能夠幫助用戶快速選擇,減少選擇成本,比較依賴榜單的應用。比如:豆瓣、音樂類、騰訊動漫等應用。

          其中豆瓣、網易云音樂由于各種類型的排行榜很多,在圖標點擊開后,在當前頁面平鋪不同維度榜單類型,用戶進行點擊跳轉;騰訊動漫相對榜單類型較少,在左邊側邊欄切換不同的榜單。

          3.商品詳情頁榜單入口

          用戶查看商品詳情時,可能會希望能夠橫向對比同類商品,才能最終決定購買那件商品。常見于電商類應用,比如:京東、拼多多、得物等。點擊后進入不同的榜單頁面,獲取更多產品信息進行篩選。(淘寶的商品詳情頁沒有排行榜,但在首頁卻存在隱形排行榜,在隱形排行榜模塊會有詳細說明)。

          4.搜索-篩選(無明確搜索目的)

          當用戶沒有明確搜索目的時,搜索框的下方,平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶,比如:微博熱搜、淘寶熱賣、抖音熱榜等。


          沒有明顯排名及規則,但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前,位置越靠前,在用戶心目中的默認位置越靠前,比如淘寶的“有好貨”、編輯精選等。

          1.編輯推薦/小編推薦

          在平臺建立初期沒有特別的內容供平臺呈現,這時候就需要平臺人工有目的的推薦一些內容,不同于“猜你喜歡”建立在用戶的行為數據下,編輯推薦更多的平臺希望用戶看到的內容,一方面作為平臺內容的輸出口引導用戶,另一方面內容是平臺自己發布內容,也可以保證內容的高質量。

          2.猜你喜歡/相關推薦

          平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期,并且存在大量的平臺用戶使用數據,“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性,各大應用平臺適用性強,一般出現在首頁部分。

          3.年度總結排行榜

          朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜,這些其實是用戶自己確定了解自己,且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓,清楚的認識自己。

          4.TOP排行榜

          不知道大家小時候看沒看過《第10放映室》,那是我最早關于排行榜的印象,里面會有各種最佳動作片總結、最佳男配角總結等等,以香港電影偏多,是我早年的電影信息資料庫?,F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦,這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜,從眾多選擇中選擇出部分答案,給出理由,而用戶只需在已被篩選過的內容中進行決定,節省選擇成本,比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定,但可以迎合用戶對確定性需求的各種盤點性質的排行榜,比如抖音的TOP榜哥就是盤點各種內容,人物。

          5.搜索-篩選(有明確搜索目的)

          相比其他排行榜,篩選后的內容已經體現了用戶的具體需求,高效明確的給用戶提供選項,引導用戶快速選擇。


          排行榜一般由必需的榜單頭部、上榜主體,及非必需的榜單規則、更新信息構成;而上榜主體由必需的主體信息、排序,以及非必需的推薦理由、排名變化、熱度信息構成。

          好的榜單能夠快速吸引用戶快速找到自己的需求點,引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。

          1.唯一性榜單頭部

          當排行榜在整個應用中有且只有一個時,通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出,增加平臺的品牌權威性。

          2.可復用性榜單頭部

          有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況,為了平臺的統一性、降低后期的維護成本,一般會使用可復用的榜單頭部,如豆瓣、京東、QQ音樂等。

          得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配,但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案;馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式,通過更換文案底圖達到適用不同主題;京東就相對比較簡單,只是更換標題的文案達到多主題適配。


          排行榜上榜主體由于不同的場景業務需求,一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式,其中主體信息及排序為排行榜必須信息,而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。

          1.純文字形式

          純文字的排行榜一般是以內容(或標題)加排名的形式出現,常見以信息為主的排行榜,比如微博、知乎、今日頭條等以信息為主要關注點的應用,或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準,因此會在標題及排位外,增加各種突出熱度信息的表現形式,如關注熱度人數,或是“熱”“新”“爆”等等表示熱度的標簽,如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化

          2.圖文結合形式

          相對于純文字形式,圖文結合的排行榜因為圖片信息的增加,使整個榜單主體占居更多的空間也可以展示更多的產品信息,輔助用戶進行選擇。

          • 圖片形式

          上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式,延續了用戶閱讀新聞類資訊的習慣;而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖,因此沿用至線上使用的也是豎版圖片形式;而京東、大眾點評、馬蜂窩則使用方版的圖片形式,大概是因為產品的多樣性需要考慮多種圖片的適配問題。(視頻、游戲類由于使用場景大部分采用橫版圖片形式;但由于游戲封面、宣傳海報也會有豎版的形式,比如:游民星空、小黑盒)。

          • 左文右圖VS左圖右文

          每當設計圖文結合的部分,首先要考慮到底是采用左圖右文還是左文右圖的形式呢?可能很多人會說這兩種形式沒有什么大的區別啊,有什么可糾結的!或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的,因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。

          人類對畫面的閱讀及掃描方式通常為三種布局方式,包括:古騰堡圖(Gutenberg),Z型(z-pattern)和F型(f-pattern)。其中產品列表頁中最常使用的就是F型布局模式,F型布局是雅各布·尼爾森(Jacob Nielsen)在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是,眼睛從上/左,水平移動到上/右,然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后,向右掃動的次數會越來越少,并且會隨著向下移動,眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面,即自左向右自上而下的閱讀模式,越向下信息獲取效率會越低

          因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式,比如:騰訊動漫、愛奇藝、得物等等。

          3.橫排+列表表現形式

          說到排行榜我們一般第一個會想到領獎臺,很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜,平臺用戶的注意力大部分集中在第一名,而領獎臺的形式模仿現實生活中的獎勵形式和儀式感,將整個排行榜的關注范圍從第一名擴展至3名,另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系,增加了第一名的高度。(目前這種形式我只在微博的明星勢力榜及抖音的直播總榜中有看到)


          榜單規則是排行榜規則的描述,是平臺權威性的體現。榜單規則有些平臺本身具有數據庫,會有相關的平臺數據支持如京東;而汽車之家則依靠“汽車工業協會”外部的數據支持,增加平臺的權威性及榜單的可信度;

          信息更新一般存在在榜單頭部和上榜主體的中間,有些是固定時間更新,也有類似微博熱搜是實時更新的模式,而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。


          排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案,但歸根到底因為人們對于不確定性的懼怕,無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式,結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同,排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯,以及用戶操作行為背后的思考及心理效應,提出合理的設計,幫助用戶了解產品功能,滿足用戶需求。



          資料來源:

          • 社交的本質

          • 社會心理學對用戶體驗的影響系列:權威性原則

          • 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

          • 交互分析:排行榜應該如何設計?

          • 如何利用好排行榜產生榜單效應?

          • 萬字長文深度分析:產品排行榜的設計和玩法

          • 關于排行榜的設計,這有一份7000字干貨手把手教你做!

          • 淘寶“有好貨”競品分析:淘寶為何要把排行榜藏起來?

          • 我們曬網易、支付寶年度榜單,其實只是在曬自己?

              文章來源:站酷   作者:9號自習室

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

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

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


          界面設計中的那些版式-圖版篇

          博博

          這篇主要說一下版面和圖形使用,對高手來說可能有些老生常談,但對移動端界面設計或許會有點參考價值,用幾分鐘看看吧。


            作者:王鐸(Micu設計)


            這篇主要說一下版面和圖形使用,對高手來說可能有些老生常談,但對移動端界面設計或許會有點參考價值,用幾分鐘看看吧。

             

            界面美不美,除了構圖之外,另一個重要手段的就是如何處理留白,也可以理解成版率。留白就是為了凸顯層次、突出內容。

            手持設備屏幕較小,決定了信息顯示是有限的。用戶有效接受信息并不與界面內提供的信息量成正比,有的時候提供的越多,用戶反而真正接受的越少。妄想滿屏都是信息是不可能的。用戶越來越受不了滿屏的信息了。

            讓用戶接受該接受的有效信息,是關鍵。

             

            在設計界面的時候,因為內容和頁面都比較多,為了保證頁面與頁面的統一性,首先需要設定頁面內容四周的留白。在設定頁面的間距后相應的內容圖標,圖片等的安排就確定下來了。用這樣的方法能使調整出來的頁面更為條理化。

             

             

            紅色色的部分就是內容。在頁面中一般會有導航的存在,那么內容區的版面是從導航下面計算的。

            界面四周增加留白。這樣的界面很容易集中用戶的視線到少數的內容上去,突出了焦點,整體給人一種典雅高級的感覺。

             

             

             


            反之,縮小留白或者不留白,頁面會顯得更豐富更充滿活力。而圖片的展示空間會增加,沖擊感增強,讓界面更顯得富更有張力。

            根據頁面的內容不同和功能點,適當的調整界面周邊的留白非常重要。一般圖片本身比較有意境,可以直接采用“出血”的方式,不留白或者少留白。

             

             

             

             

            下面介紹一些版面的小規律、小技巧。

             

            1.取其精華,一塊顏色也能定天下!


             

            提取主要的信息,通過對整個頁面的顏色進行調整,從而提高版面使用率。將一個或多個功能點作為主信息,提到首頁中進行設計,從達到想要的視覺效果。這樣處理后的界面設計不僅能顯得大氣有張力,而且展現出來的信息聚合度高。

             

            在缺少圖像素材的情況下,如何讓界面顯得有張力,整體感強,呈現出來的版面率高。

             

             

            單色背景留白,凸顯主要信息。要求圖標或者文字,相對簡潔,能夠很好地和背景色融為一體。再通過線條和規則的圖形來分割留白區域,增加層次感。

            做好這些的前提是,設計師要明確主要信息,以及它們之間的關系。 

             

             

            結合產品特點巧妙的運用大色塊,將變化的信息用顏色區分出來。讓用戶最直觀的感知信息的變化。

             

             

             

             

            2.多色塊靈活分割,加強內容使用率



            圖片素材少,還可以采用多色塊進行分割,讓界面顯得不那么單調。

            加強內容使用率可以通過色塊(臨近色或是互補色)的延伸或是圖像的重復來組織頁面版式。將圖片和色塊進行統一化排版布局,整體基調能使頁面豐富化。圖片與相同大小的色塊可以保持界面的統一性與簡潔性,色調的一致的統一性和連續性使頁面更為整體,這樣看起來的頁面就像一張圖片一樣有張力。并且這種方式讓用戶感覺點擊的區域也會增加,從而操作也變得便捷起來。

             

             

             

            3.構圖不拘一格,找到最合適的內容版率。


             

            橫向和縱向分割,使界面顯得整齊、穩定,而斜向分割讓界面沖擊感強。

            使用不同的構圖方式,穿插性地將少量的圖片整合在構圖的形狀中,能讓界面變得活躍而富有活躍性。這樣的表現方式還能將產品的氣質融入進去,淋漓盡致地展現。有節奏感的設計更為取巧地加強了版式率。在界面設計中,圖文的穿插可以引導用戶的視線,讓原本簡單的內容變得有趣。在層次上,也可以區分內容的主次性,讓閱讀更加的輕松。

             

             

             

             

             

            4.簡約化桌面或主頁,讓界面越近越美


             

            常用方式:圖標、加大文案字號、序號、數字等來達到加強版式率的運用,提高視覺上的豐富性。

             

            圖標表達

             

            人們越來越認同扁平化,一方面是因為扁平化的圖標看上去清新簡潔,用戶理解快。另一方面,與圖標搭配的背景更加單純,要么留白,要么炫簡,盡可能減少給用戶在視覺上干擾。好的扁平化圖標不是簡單地刪減細節,而是著重凸顯有效的信息。

             

            圖標是最為直接的表達方式,簡單明確的圖形,能讓用戶通過對圖標的認識快速找到想要的功能和需求點。圖標與文案的搭配有效的降低了閱讀時候的疲勞感。從而加強了界面內容的節奏。運用圖標的設計條理清晰,功能明確。

             

             

             

             

            信息化圖標能給產品增色。有趣的圖標設計不僅能很好的將功能點進行區分,也能好的將軟件的特性和品牌展現出來。

            把圖形融入到界面中,可讓內容更為豐富,層次更加的分明。

             

             

             


            5.突出重點文案,調整版面率,讓信息更清晰。

             

            調整文字大小將調整版式的使用率,使原本空的界面內容顯示的更為飽滿,用戶閱讀起立更為直接。使用較大的字號進行加強頁面使用率能讓頁面顯得更為信息。突出重要的引導文案,加強了軟件的情景感和帶入感??焖僖龑Я擞脩魧δ艿睦斫?,從而準確的使用。

             

            在頁面中我們可以強調重點數據或功能詞等來區分界面中的層次感。讓用戶的視線更為集中。

             

             

            6.串聯圖片,讓它們講故事,視圖化版面。

             

            這種設計方法更多的是將文案用圖形或插圖展現出來。在數據頁面和引導頁中最為常見。

            一段文案一副插圖的引導頁更為有特色,給用戶的情懷感更強。這種設計手法也是最容易體現產品特質和吸引眼球的。圖案的易讀性高,能在極其短暫的時間內快速傳達給用戶信息。用圖像來講故事,是設計中最根本的表現方法,也更是最為受歡迎的表達方式。

             

             

             

             

             

             

             

            圖在界面中的運用

             

            三種方式:摳,邊界關系,殘缺

             

            1.切摳弄,制造純色留白!



            在處理圖片素材的時候,常常會碰到圖片背景雜亂,產品不夠突出的問題。在設計之前我們可以對素材先進行處理,將產品直接摳出來。利用這種方式可以找到產品的形狀,越明確的形狀越能反映用戶對產品的認知度。產品的獨特性能快速明確的表達給用戶,用戶從潛意識第一時間的判斷到產品的類型和使用特性。

            下面是一個曲奇餅干的網站,將主餅干的勾出來,進行層次感的區分。在產品介紹中采用了側面的實物摳圖,體現出了曲奇餅干最為真實的厚度。運用碎落的餅干塊虛化拉開產品的層次。深色的背景與餅干對比強烈,直接凸顯了實物的形狀。讓用戶一目了然,食欲大增。從而增了用戶的購買欲望。

             

             

            在很多的電商APP中也常采用摳圖,去除多余雜亂的信息,利用產品的形狀直接體現不同商品的特點。這樣的界面用戶閱讀起來輕松愉悅。

             

             

             

            2.建立邊界,再打破邊界,破出重圍

             

            如果需要展示的信息較多,采用分割區域的方法,可以使界面顯得整齊干凈。而當信息較少時,設計師可以大膽選用“局部出血”的方式,建立邊界,再突破它,增加層次感和沖擊力,以凸顯主題。

            一定要記得設定好的內容范圍是為了讓頁面顯得整體化,而不僅僅是擺放和拼圖。

             

            在網頁設計中有時候會見到這種方式,其實在手機、平板等UI設計中我們完全可以套用。

            運用圖片的穿插來區分背景和產品或形象的層次感,處理完的界面更加富有生命力。放大需要突出的主形象,把它作為第一焦點展現在用戶的眼前,有種強烈的“面對面”感受。

             

            在APP中采用將圖片局部突出出來,能拉開信息的層次,將需要突出的圖片信息第一時間展示給用戶。一方面可以方便和引導用戶點擊,另一方面在上下滾動的長副瀑布流里,適當地打破平衡,可以豐富頁面的節奏感。

             

             

             

             

            在ICON的設計中我們也常用到破圖的方法。在統一的圓角矩形中,將表達寓意的圖形局部超出,使圖標更為有空間感和靈活性。

            采用這種方式設計的圖標空間感強,層次感強烈,能使產品形象顯得更為突出。

             

             

             

             

             

            在字體中也經常運用到破圖的方法,讓字體更為生動。在破字的過程中也能引發出不同的創意點。

            大美青海字體設計我把數字9破出了方塊。而在優車尚品字體的設計中,我通過品字的破圖找到了車的聯想,讓整個字體設計的更為貼切靈動。

             

             

            3.沖出畫面,只保留局部,讓產品再大一點!


             

            有時候,我們拿到素材,在處理后發現,圖片比較平常,用戶一眼就知道是什么。這個時候,可以考慮保留局部的方式,營造殘缺美,增加時尚感。不要小看用戶的的腦補能力,當然,這種方案還是要與客戶或者產品經理及時溝通,殘缺美不是所有人動能接受的。

             

            我們將圖片進行放大,找出產品特點。選擇能撐起整個頁面構圖的位置,切除不必要的圖形,讓圖片沖出畫面!這樣處理后,頁面顯得非常富有張力,激發了用戶想看到產品整個形象的欲望,起到產品預熱的效果。

             

             

             

             

            在WATCH的預熱官網中,設計師將圖片放大,裁取有特點的部位進行展示,引導了用戶點擊觀看產品的整體形象,激發了用戶更多的去了解產品的特性。

            從版面角度看,局部放大裁切圖片,增加了留白,增加了版式率,讓整個頁面顯得飽滿,微距的效果使用戶與產品更貼切。

             

            這一篇主要理順了一下版面和圖形使用知識,并不全面,大家還是以欣賞為主。看完了能有個留白、破圖的印象就不算白看。

            設計大方向上的東西終于絮叨得差不多了,我知道其實大家都懂,就是不知道從何下手而已,下一篇來點小方向的實用東西,歡迎大家留言。

            文章來源:站酷   作者:micu設計

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

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

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


          語音用戶界面設計 - 對話式體驗設計原則

          博博

          文章包括三部分:1.智能語音對話系統;2.了解 VUI 相關知識;3.語音用戶界面基本設計原則。

          最近在閱讀關于智能語音方面的書籍,將最近零零碎碎的筆記重新整理了一番,希望能讓讀者更加快捷、高效的認識智能語音方面的基礎知識點。



          智能語音對話系統


          語音交互界面是近年來最重要的趨勢之一,它不僅可以依托于智能手機而存在,而且可以和智能家居、車載導航、智能電視、智能音響等一系列產品結合到一起。越來越多的人更加頻繁地使用 Siri、Google Assistant、Cortana、小愛同學等。越來越多的應用也都已經涉及到智能語音技術。





          1、語音和語言有何區別?


          我們首先需要了解「語音」和「語言」的區別。


          語音是語言的信號載體,語音是人的發音器官發出的,承載一定的語言意義,而語言才承載人類的智慧。通俗的講,語音是天生就存在的,嬰兒剛出生的哭喊聲也算是語音。它是人的發音器官發出具有一定社會意義的聲音。其物理基礎主要有音高、音強、音長、音色四要素構成。而語言則是需要學習不斷進化的。在智能語音中,我們需要考慮的是如何確保在復雜的現實環境下,把干擾信息過濾,獲取到準確的信息。




          2、語音界面之間的關聯



          喚醒:Amazon Echo 和 Google Home 之類的語音驅動設備不斷地在等待喚醒詞(“Alexa ...”或“OK,Google ...”)從而進入喚醒狀態。


          反饋:一旦喚醒,設備會將隨后接收到的音頻發送到云端的AI平臺。 該平臺使用自動語音識別(ASR)和自然語言理解(NLU)的組合來識別用戶的意圖并將其發送到支持應用程序。 


          回復:應用程序處理請求并通過文本進行響應(如果支持則提供可視化信息)。該平臺將文本轉換為語音并通過設備播放。




          3、對話系統概述


          對話系統:能夠與人進行連貫對話的計算機系統,可以采用文本、語音、圖形、觸覺、手勢及其他方式與人進行交互,常以語音交互為主。



          而如今的智能設備能夠“理解你所說的話并且采取行動”,是兩個重要技術結合的結果:一個是自動語音識別(ASR),另一個是自然語言理解(NLU)。


          自動語音識別(ASR) — 通過聲學模型和語言模型,將人的語音識別為文本的技術

          自然語言理解(NLU)— 對用戶輸入的文本進行語義理解,包括用戶意圖識別和語義槽填充


          對話狀態跟蹤(DST) — 根據所有對話歷史信息推斷當前對話狀態St和用戶目標

          對話策略學習(DPL) — 基于當前狀態生成下一步操作

          自然語言生成(NLG) — 獲取結果文本,主要依據模板或深度生成的模型生成用戶可以理解的自然語言文本

          從文本到語音(TTS) — 結果播放給用戶聽,將自然語言文本轉化成語言輸出




          4、語音交互設計需要遵循什么原則?


          遵循合作原則:「聽者」和「說話者」為了能夠順利交談,必須互相合作。Paul Grice 提出了這個觀點,并將其分為以下4個準則。


          質的準則:說真實信息,做不到的話不要說。

          舉例:對用戶說:“有什么可以幫您的嗎?”,而實際上整個 VUI 系統僅僅能提供查詢話費余額。


          量的準則:保持對話交流簡潔,減少認知負荷。

          解釋:刪除多余的措辭。比如“請您注意聽,因為我們的選項可能已經變了”。


          相關準則:所說的話需與當前對話有關,不干擾當前任務進行。

          解釋:比如用戶想知道天氣,你給他推薦旅游的地方。


          方式準則:說話需清晰、明了,不要拐彎抹角。

          解釋:不要使用讓用戶難以理解的「專業術語」。







          了解 VUI 相關知識


          語音交互界面(VUI)指的是為用戶提供可進行語音交互的計算機平臺,它能夠實現自動化的服務并且提供完整的相關流程。而設計 VUI 的時候,設計師需要側重于用戶的語音交互過程,并設計出相應的語音應用系統。由于 VUI 是面向用戶的交互界面,因此滿足用戶的實際需求是至關重要的。




          1、語音用戶界面 VUI 簡史


          20世紀50年代:貝爾實驗室建立了一個單人語音數字識別系統。


          20世紀60、70年代:語音數字系統的這項研究仍在不斷拓展可識別的詞匯,并且致力于實現“連續語音”的識別。


          20世紀80年代:技術進步讓語音識別更具實用性,使日常語音的識別成為可能。


          20世紀90年代:誕生了第一個可行的非特定人的語音識別系統。簡稱 IVR


          21世紀初期,IVR 系統成為了主流,任何人都可以通過一個普通的固定電話和語音進行股票詢價、機票預定、銀行轉賬、處方藥品預定、本地電影排片查詢以及收聽交通信息等。




          2、那什么是 IVR 系統?


          交互模式的語音應答,簡稱為 IVR。我們后續簡稱為:交互式語音應答(IVR)系統


          它可以通過電話線路理解人們的話并且執行認為,一般都廣泛的應用在運營的客服方面,即使是現在三大運營上的機器客服還是采用了這種語音應答的方式。但是通過電話撥號的方式開始語音的問答還存在很多的缺點,例如只能應用在單輪任務的問答,交互方式比較單一,不能進行中途打斷等缺點。


          IVR,即語音增值業務,是移動運營商由2002年開始啟動的業務。移動的 IVR 分為兩大品牌:音信互動和娛音在線,聯通的 IVR 品牌為聯通。





          3、IVR 系統設計與移動設備


          21世紀初,IVR 系統已逐漸普及。起初“按鍵+語音”的混合形式(請按“1”或者說“1”),是很常見的模式,比如10086的查詢功能。人們創造了 IVR 系統,希望它可以自動處理一些事物,這樣客戶就不會總是需要找一個真人來解決問題了。相比與真人客服交談,很多用戶實際上更喜歡使用 IVR 系統,因為他們可以花很長時間反復咨詢信息而不會覺得他們是在“打擾”一個人類客服。


          移動 VUI 設計需要注意:


          1、確定它是否需要一個視覺化的呈現,比如一個虛擬角色。


          2、確定你的 VUI 在什么時候允許用戶說話?可以被打斷嗎?是否需要按鍵功能?




          4、VUI 的優勢是什么?



          速度快:語音輸入的方式比手動輸入快很多,同樣的時間可以輸出更多的信息。


          釋放雙手:釋放雙手與機器進行交互,比如駕駛狀態下,通過語音輸入完成用戶需求,安全和便利。


          直覺性:說話更自然,更容易。可以直接通過語音輸入的方式來表達你的意愿。


          同理心:語音包含了語氣、音量、語調和語速,且傳遞了大量的感知信息,不僅僅是文字那么簡單。




          5、哪些場景不適合使用 VUI ?


          公眾場所:開放的環境辦公,比如:咖啡館、圖書館等。環境影響因素較大,不利于用戶語音的錄入和接收。


          不適應對計算機說話:并不是每個人都喜歡對計算機大聲說話,即使是在私人空間。


          更喜歡打字:許多人習慣每天在手機上花幾小時,大部分的時間都是在打字。


          隱私安全:比如身份證、銀行密碼等。GUI 比 VUI 更加適合高效安全輸入。




          6、哪些場景適合使用 VUI?


          使用場景需要騰出雙手,比如車載導航、智能音響。


          作為家庭的控制中心,打造智能家具居控制的切入點。


          語音記錄病歷,不管對醫生來說還是患者來說,都是提高看病效率的很好助手。


          幫助用戶簡單記錄、查詢、照顧用戶的作息時間等。




          7、VUI 設計師的工作內容


          VUI 設計師思考的是在系統和終端用戶間,從開始到結束的整個對話過程。他們思考正在解決的問題以及用戶需要什么來達成他們的目的。VUI 設計師在項目中扮演著非常重要的角色。通常會參與項目全程的工作,并與團隊合作完成在技術、體驗、設計上的優化。



          如果 VUI 需要與后端系統進行交互,他們要考慮需要處理的請求。如果流程中有人的因素,比如客服需要交接,那么設計師需要考慮如何進行交接,以及如何培訓客服。







          語音用戶界面基本設計原則



          1、對話式用戶界面


          對話式設計定義:思考如何與 VUI 系統進行一輪以上的交互。


          因此,需要設計一輪以上的對話,并思考用戶接下來可能會做什么。不要強迫用戶展開新一輪對話,而是去嘗試了解用戶的意圖并允許用戶繼續交談,同時有必要為用戶近期所說的話保留歷史記錄。





          2、多模態界面


          與 IVR 系統不同的是,在移動設備上我們可以增加一個可視化組件。


          比如在向用戶傳達信息、確認信息,以及告訴用戶什么時候輪到他們說話等。(比如:百度地圖的小度,他會告訴用戶什么時候可以說話,目前所處的狀態,說完之后給予的反饋)


          如果有一個可視化組件,則會讓移動設備增強優勢。允許用戶同時使用語音和屏幕進行交互。(手機上虛擬助手,有些雖然以語音交互為主,但是在用戶的智能手機上也會有一個配套的APP)。





          3、設定用戶期望


          優秀的對話式設計不僅僅是精心制作的友好提示。Google 交互設計師 Margaret Urban 建議:如果你不能理解答案,就不提問。


          “當某個人成功完成了一次語音交互,伴隨著腦內咖(endorphin)的升高,用戶會獲得一種成就感和滿足感。此時正是一個絕佳的時機來告訴用戶”你做的很棒,要不要再試試這個?”


          是否讓我們想到了網頁登陸驗證的時候,需要完成一塊拼圖,但是你再慢他也告訴你超越全球96%以上的人。


          “如果你已經設計了一個設置鬧鐘的功能,但是你沒有提供用戶取消設置的方式,這就像給人一條浴巾但是沒給他香皂一樣。如果你設置了可以完成某項任務的語氣,請務必考慮與之相關的任務?!?/strong>





          4、確定策略時需注意的幾點


          輸入確認:必須確保用戶感覺到自己是被理解的,同時有助于讓用戶知道,什么時候 VUI 不理解他們所說的話。


          1、確認錯誤的后果是什么?比如:預定錯誤的航班?制定錯誤的任務?播放錯誤的歌曲?


          2、系統將如何反饋?比如:會有音頻提示嗎?是否有視覺反饋嗎?比如Amazon Echo上的光環。


          3、是否擁有屏幕?比如:車載導航、手機屏幕、智能手表。


          4、選擇合適的確認形式?比如:明確確認、含蓄確認、混合式的確認。




          5、確認策略的兩種方案


          顯性確認:重要信息,需強制用戶確認信息。


          隱性確認:讓用戶知道他的話接收到了,但不需要他們確認。




          6、確認信息的方式




          三級置信度:


          系統將在一定的閾值內,以明確的形式確認信息,拒絕較低置信度的信息,并以隱性確認來確認置信度超過80%閥值的信息。


          1、80%以上,使用隱性確認。如果是誤識別代價高的話,考慮采取顯性確認。

          2、45%-80%,使用顯性確認,以明確的形式確認信息。

          3、45%以下的,拒絕確認信息。


          舉例:用戶:幫我再買一份口香糖。

          VUI:(置信度大于80%,使用隱性確認)好的,已經為您再購買一份口香糖。

          (置信度45%~79%,使用顯性確認)您是想再多買一份口香糖,是嗎?

          (置信度小于45%)對不起,我沒有聽清您講的話,您想買什么?



          隱性確認:


          1、只使用隱性確認,不要求用戶進行操作。

          2、將「答案」和連同「原始的問題的一部分」一同回復,讓用戶知道系統識別到的是哪個問題。

          3、當置信度高的時候,也可以不用連同問題,這樣更自然流暢。



          非語言式確認:


          1、僅需行動反饋,而不需要口頭響應。

          2、通過視覺確認,比如小米智能家居,可以通過語音交互打開燈光、電視、窗簾等。

               a、如果沒有延遲,沒必要再對其回復。

               b、如果有3-5秒延遲,需進行回復,讓用戶知道并不是設備沒有聽到她的聲音。

          3、使用一個“聲音標識”,即簡短的、有識別度的聲音。這樣有助于幫助用戶快速知道他們已經到了哪一步。



          通用確認:


          1、在某些對話式系統中,最好不要詢問用戶具體說了些什么 - 哪怕是隱性確認。

          2、通用確認可以讓用戶分享更豐富的體驗,因為這類反饋能適應用戶輸入的各種信息,并讓對話繼續進行。通常人與人之間的對話,也不會句句必回復,也會有 “嗯” “哦 ”“啊” “然后呢”等。 



          視覺確認:


          1、確認一個項目清單,通過屏幕顯示進行溝通會更加有效。人的記憶有限,通常用戶一次性不能記住超過大約7個聽覺項目。

          2、用來確認用戶的選擇。用戶可以通過說話或按下按鈕來回復。而 GUI 的反饋指令更加明確。




          7、判斷你的 VUI 適合哪種類型


          目前大多數的 VUI 系統都是“命令 - 控制”模式,這意味著當用戶想要說話時,必須給出明確的指示。


          1、用戶可以隨時向系統詢問 / 發出命令嗎?


          2、是否參與一個有明確開始和結束的封閉式對話?




          8、命令-控制模式



          喚醒系統方式:按鍵通話(車載導航、Siri等)、直接進行關鍵詞呼叫(“OK Google”“小度”等喚醒詞)。


          喚醒系統反饋:系統檢測到用戶說話完成,通常會使用某種非語言的音效進行提示,然后做出相應處理(比如:“?!钡囊宦暬蛘咭曈X反饋:聲波線、點狀動效、設備逐漸發光等)。


          系統聆聽時間:用戶說出喚醒詞或按下按鈕后,系統保持聆聽狀態的時長,根據經驗來看,10秒 是個不錯的起始時間段。



          喚醒響應時間與反饋方式


          喚醒響應時間與喚醒反饋方式有關,不同喚醒反饋方式下,最佳響應時間不同:


          1、當喚醒反饋為"燈光"反饋時,喚醒響應速度越快越好,在200ms時,用戶響應舒適度最高(對響應時間評價為剛剛好的用戶比例),73%的用戶對速度滿意。


          2、當喚醒反饋為"燈光+音效"時,喚醒響應速度的舒適時間為300ms左右,76%的用戶對速度滿意。


          3、當喚醒反饋為"燈光+人聲"時,喚醒響應速度的舒適時間為500ms左右,74%的用戶對速度滿意。


          數據來源:百度人工智能交互設計院智能音響時間測試實驗



          喚醒等待時間體驗感


          用戶請求及反饋階段響應時間對等待體驗的影響:


          1、1250ms以內是用戶認為響應速度較優的區間,其中650ms為最佳體驗值。在450ms時,少量用戶覺得響應速度太快了,用戶會感覺到緊迫感和壓力,難以接受。


          2、在1450ms時,有53%的用戶開始感覺響應有延時,但仍能夠接受。


          3、從2150ms開始,有20%的用戶認為音箱響應太慢,不能夠接受。我們認為20%的用戶不滿意,已經不足以被稱為一個優秀的產品。


          數據來源:百度人工智能交互設計院智能音響時間測試實驗




          9、對話模式


          1、不要強迫他們不斷地去表明他們將要開始說話,自然地對話技巧進行話輪轉換。


          2、通過更精細的設計,使 VUI 系統可以處理一些常見的微妙表達方式。(用戶處理完畢說“謝謝”,你可以設置系統忽略這種情況,或回復“不用客氣”,而不是提示或者報錯。)


          3、不要問你都無法理解的反問句。


          4、打破話輪轉換的情況,用戶在系統說完之前就進行提問。


          5、在命令 - 控制模式和對話模式之間進行切換。喚醒之后進行自然的對話。




          10、對話式標識


          使 VUI 更加人性化、更具吸引力,對話式標識是讓用戶了解交談進展以及進展情況的重要方式,當系統在對話中使用了一些基本的對話禮儀后,用戶的參與度會更高,并且會以同樣的方式進行回復。



          反面案例:

          虛擬助理:你昨晚你睡了幾小時?

          用戶:大約7個小時。

          虛擬助理:你昨天吃了幾份水果和蔬菜?

          用戶:大概有4份。

          虛擬助理:你昨晚吃藥了嗎?

          用戶:吃藥。

          虛擬助理:再見。


          正確案例:

          虛擬助理:我會問你幾個有關你身體健康的問題。第一個問題,昨晚你睡了幾小時?

          用戶:大約7個小時。

          虛擬助理:不錯。你昨天吃了幾份水果和蔬菜?

          用戶:大概有4份。

          虛擬助理:了解了。最后一個問題,你昨晚吃藥了嗎?

          用戶:吃藥。

          虛擬助理:好的,暫時就這些了,我明天還會再問你的,回見。




          11、異常處理


          “當你與人類交談時,永遠不會出現不可恢復的錯誤狀態?!?

          — ABI JONES, Google 設計主管


          “你偶爾因為犯錯和不知道某些事情導致評分降低造成的影響,比你每次做對一件事情重要百倍?!?nbsp;

          — 英特爾語音助手部經理 Pilar Manchon


          如果處理的得很好,錯誤情況就不會影響用戶,你可以讓用戶回到正常流程,并順利完成任務。但如果處理不好,用戶不僅這次無法完成任務,他們以后都可能再也不用你的產品了。


          一個好的設計師應該知道,你不能只設計正常的情況, 你還要對出錯的情況做出設計。這對于 VUI 設計來說尤為重要,因為出錯情況是家常便飯。



          未檢測到語音 / 檢測到語音,但沒有識別


          1、什么情況下可以明確說出來?

               a、你的系統只使用語音

               b、用戶沒有其他的回復方式

               c、必須要用戶回復后,系統才能繼續進行任務 / 對話


          2、什么情況下可以什么都不做?

               a、用戶可以通過其他方式進行下一步操作(比如通過按鍵選擇)

               b、就算什么也不做,也不會中斷對話

               c、系統沒有理解時,用視覺信息提示告訴用戶,比如:提示列表等

               d、利用虛擬表情形象反饋,疑問、微笑等動作表達



          其他異常處理


          1、當出現:語音被正確識別,但系統無法處理

               a、程序對關鍵屬性理解不明,寫了錯誤的回復

               b、沒有針對一些情況的回復

          解決:對用戶可能會說到的所有情況做更完善的預測,通過數據收集來避免此問題


          2、當出現:部分語音識別錯誤

               a、什么也不去處理,因為這不是你想要的結果

               b、匹配錯誤的行為

          解決:可以用 N-Best 列表來智能匹配最有可能的識別結果


          3、增強錯誤提示

               a、當需要用戶說話的時候,使用這種增強錯誤提示策略

               b、必要的情況下,進階錯誤行為提示可以更為詳細,并提供更多的幫助

               c、如果你正在設計一個可以提供真人輔助的系統,可以為錯誤數量設置一個閾值,當達到該閾值時,將用戶轉移給人工助手  




          12、新手和專家用戶


          如果你的用戶會定期使用你的系統,那么在設計中就需包含不同的策略。


          “務必確保你的目標不是簡單的訓練你的用戶,應當適應用戶的行為,而不是用已有的命令讓用戶感到厭煩?!?

          — Google 交互設計師 Margaret Urban


          我們在 VUI 設計上該如何更好的交互設計?


          1、減少冗長指令以及其他引導提示。通過計算 APP 使用次數和頻率來確認是否切換模式。


          2、縮短解釋性提示。但是請務必使用“對話式標識”。


          3、啟動效應。



          什么是啟動效應?


          指某人受到某種特定的刺激后(例如一個詞語或者圖像)會影響他們對之后刺激的反應。首先讓用戶預先知道你會問他們幾個確定數量的問題,為后面會發生的事情提供了暗示,用戶就會知道如何去準備。比如以下情況:


          1、當給人們呈現一個還沒完成的草圖,隨著這個草圖越來越完整,人們就越來越辨認出這張圖畫的是什么。之后,再給他們呈現其他還沒完成的草圖時,他們會更早辨認出這張圖畫的是什么;


          2、如果當給人們呈現一組漢字,假如里面含有 “河” 這個字,隨后讓他們寫出部首是 “氵” 的字時,這些人回答 “河” 的幾率會更大。



          談談自己對新手和專家用戶的理解


          01、專家型用戶:代表老用戶且愿意探索你的產品或服務,有著很大的包容度。并會積極提出各種改進的建議和享受產品帶來的驚喜感。


          02、新手:什么叫新手,就是剛剛下載你的產品,準備使用的用戶,對產品功能都還處于陌生摸索的階段。他們不會因為你的技術而使用你的產品,使用你的產品目的是完成某項任務。他們有興趣使用更高級更復雜的產品,但卻不愿意接觸全新的東西,要想讓他們認可,那么產品就必須足夠簡單。




          13、持續跟蹤上下文


          持續跟蹤信息并不容易,但如果不跟蹤這些信息,你的 APP 就只能做單輪的對話行為。


          指代:用兩個不同的詞語指同一個東西。比如: “他”  “哪些”





          14、幫助和其他通用部分


          我們在設計 IVR 系統時,我們會確保每個狀態都包含一組通用組件:重復、主菜單、幫助、操作和再見。





          15、延遲


          產生原因:糟糕的連續性能、系統處理進程、數據庫訪問


          處理方式:告知用戶關于延遲的情況(比如:“請稍等,正在查找相關記錄”)、非語音和視覺的提示(比如:延遲提示音以及加載狀態)、可視化效果(比如:加載中的動態圖標)


          處理細節:延遲的時長可能為0~10秒,在沒有延遲的時候最好也插入幾秒的延遲。因為如果在系統說“請稍等”之后,緊接著就繼續對話的話,會給用戶帶來異樣的感受。很多設備針對喚醒詞采用了本地化識別的方式,這樣喚醒的會更快。




          16、消除歧義


          問題來源:用戶只會提供執行命令所需的部分信息,而沒有提供所有的細節。


          舉例:用戶可能會詢問某地的天氣,而很多地方都有叫這個名字的地點,諸如“湖南路”那邊的天氣怎么樣。


          解決方案:


          1、依靠任何已知的信息來確定答案,而不是再次詢問用戶。


          2、根據上下文線索進行判斷。


          3、反問用戶進行確認,確保系統對用戶同一個問題的各種各樣的回復形式都有良好的適應性。


          4、指令不明確。比如“給胡歌打電話,撥打工作電話還是家庭電話?”,系統以隱性的形式對名字進行了確認,系統對這個名字有很高的置信度,并且僅有一個胡歌。


          5、用戶回答的信息超初了你的 VUI 系統可以處理的范圍時,你可能需要縮小范圍消除歧義。




          17、設計文檔


          我們需要制作:示例對話(sample dialogs)和會話流(dialog flow)文檔外其他一些情況。例如:在設計過程中,你還需要創建提示列表、完善對話每個狀態指定完整的語法規則等等。





          18、無障礙設計


          “一開始,我就很討厭屏幕閱讀器的工作方式。為什么它會被設計成這樣?當以視覺的方式來展示信息沒有任何意義時,屏幕閱讀器只是簡單地將文字轉換成音頻。所有那些應用花在創造完美用戶體驗的時候和精力此時都變得沒有任何意義,甚至有的給盲人用戶帶來了更糟的體驗?!?   — 克里斯·莫里(Chris Maury)





          19、典型 VUI 項目交付項內容


          示例對話:系統和用戶之間可能產生交互行為的預設對話,對話看起來就像電影劇本一樣,包括兩個主要角色之間來回往復對話。


          流程圖:展示下一個狀態分支的所有方式,不一定要羅列所有的交互或示例對話,也可以是功能的分組、文本的分組等。


          提示列表:如果沒有屏幕可以使用配音演員或語音合成來播放提示列表。


          產品原型:如果這是一個多模態產品,有屏幕、支持觸摸交互。




          參考文獻:

          《語音用戶界面設計:對話式體驗設計原則》-【美】Cathy Pearl(凱瑟 彼爾)

          語音交互入門:從概念,原理到如何設計VUI產品 - 杜松

          AI時代的語音設計經驗漫談 - 少夫白杰

          語音用戶界面設計 - 對話式體驗設計原則 - walle_x






          文章來源:站酷   作者:Sabaku_no_Gaara

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

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

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

          交互設計知識總結

          博博

          不懂交互的UI,不是好美工。
          本文約一萬字,考驗耐心的時候到了。

          一、什么是交互設計?

          先來看一下百度百科的定義

          交互設計(英文Interaction Design, 縮寫IXD),是定義、設計人造系統的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達成某種目的。交互設計努力去創造和建立的是人與產品及服務之間有意義的關系,以“在充滿社會復雜性的物質世界中嵌入信息技術”為中心。交互系統設計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析,關注以人為本的用戶需求。簡而言之,交互設計是解決特定場景下的人群如何高效使用機器或軟件的目標行為。


          為什么要做交互設計

          在使用網站,軟件,消費產品或各種服務的時候(實際上是在同它們交互),使用過程中的感覺就是一種交互體驗。隨著網絡和新技術的發展,各種新產品和交互方式越來越多,人們也越來越重視對交互的體驗。當大型計算機剛剛研制出來的時候,可能為當初的使用者本身就是該行業的專家,沒有人去關注使用者的感覺;相反,一切都圍繞機器的需要來組織,程序員通過打孔卡片來輸入機器語言,輸出結果也是機器語言,那個時候同計算機交互的重心是機器本身。當計算機系統的用戶越來越由普通大眾組成的時候,對交互體驗的關注也越來越迫切了。因此交互設計作為一門關注交互體驗的新學科在二十世紀八十年代產生了。


          從用戶角度來說,交互設計是一種如何讓產品易用,有效而讓人愉悅的技術,它致力于了解目標用戶和他們的期望,了解用戶在同產品交互時彼此的行為,了解“人”本身的心理和行為特點,同時,還包括了解各種有效的交互方式,并對它們進行增強和擴充。

          通過對產品的界面和行為進行交互設計,讓產品和它的使用者之間建立一種有機關系,從而可以有效達到使用者的目標,這就是交互設計的目的。


          二、交互設計常用原則和定律有哪些?


          尼爾森十大可用性原則


          1、狀態可見原則

          系統應該讓用戶時刻清楚當前發生了什么事情,也就是快速的讓用戶了解自己處于何種狀態、對過去發生、當前目標、以及對未來去向有所了解,一般的方法是在合適的時間給用戶適當的反饋,防止用戶使用出現錯誤。

          即在用戶操作界面功能時給予實時反饋,例如:頁面加載狀態提示、按鈕點擊后的狀態變化、進度條提示等。

          2、環境貼切原則

          設計的一切表現和表述,盡可能貼近用戶所在的環境,將現實環境的操作功能巧妙的轉化為線上功能,使其貼近用戶。使用用戶能聽懂的專業術語,涉及到專業化語言時要轉化成用戶熟悉的語言。

          即模擬真實的事物,使用戶更容易理解。例如:天氣應用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場景和物品,降低理解成本。

          3、操作可控原則

          對于用戶的誤操作,提供二次確認或者撤銷的功能,這樣可提高用戶的操作可控性。

          例如:刪除聯系人二次確認提示、消息可撤回操作。

          4、一致性原則

          遵循統一的產品設計規范/邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。

          一致性包含視覺交互、文案描述、組建樣式等,例如:微信小程序設計規范。

          5、防錯原則

          設置防錯的機制,減少用戶犯錯。在用戶選擇動作發生之前,就要防止用戶容易混淆或者錯誤的選擇。

          例如:用戶名稱校驗提示、手機號碼位數限制等。

          6、易取原則

          減少用戶記憶負荷,在適合的時機給用戶需要獲取的信息。

          例如:驗證碼讀取、找人轉賬提示等。

          7、靈活高效原則

          提供靈活的操作和高效的獲取信息能力。

          例如:手機號碼一鍵登錄、消息關鍵字識別等。

          8、優美簡約原則

          保留產品最主要的信息,如果不是優先級最高,要盡一切可能避免去影響產品的簡潔和美觀。

          9、容錯原則

          用戶在使用產品過程中出現了問題,及時準確的告知用戶出現問題的原因。

          例如:信息輸入提示、搜索無結果等。

          10、提供人性化幫助

          在用戶需要的時候提供必要的幫助說明。

          例如:新功能引導、解釋說明文案等。



          七個交互設計定律


          1、菲茲定律

          點擊一個目標的時間同以下兩個因素有關:

          (1)設備當前位置和目標位置的距離(D)。距離越長,所用時間越長;

          (2)目標的大小(S)。目標越大,所用時間越短。

          該定律經常運用于鼠標從點A到點B的運動。

          例如常用按鈕的尺寸設計等。

          2、希克定律

          一個人面臨的選擇(n)越多,所需要作出決定的時間(T)就越長。

          交互設計中要合理設置選項,以免用戶使用中決策時間過長,降低使用效率。

          3、米勒7±2定律

          喬治米勒對短時記憶能力進行了定量研究,他發現人類頭腦最好的狀態能記憶含有7(±2)項信息塊,在記憶了 5-9 項信息后人類的頭腦就開始出錯。

          例如:手機號碼的分位顯示、應用中標簽欄數量等

          4、鄰近性法則

          人們通常將距離近的事物劃分為一組。

          界面設計中可以用對象間的相對距離來區分信息層級。

          5、復雜性守恒定律

          每個應用程序都具有其內在的、無法簡化的復雜度。無論在產品開發環節還是在用戶與產品的交互環節,這一固有的復雜度都無法依照我們的意愿去除,只能設法調整、平衡。

          例如:在智能手機出現之前,手機上的操作按鈕都是實體按鈕。在智能手機出現手,手機被整個屏幕占據后,所有的操作都集合在了手機系統之中,等于把物理操作轉移到了系統操作中,其本身的功能復雜程度并沒有發生改變,只是轉移了而已。


          6、防錯原則

          大部分的意外都是由設計的疏忽,而不是人為操作疏忽。因此,在設計中要有必要的防錯機制;在此,特別要注意在用戶操作具有毀滅性效果的功能時要有提示,防止用戶犯不可挽回的錯誤。

          例如:登錄時用戶名校驗,手機號碼位數限制等。

          7、奧卡姆剃刀原則

          “切勿浪費較多東西去做,用較少的東西,同樣可以做好的事情。

          ”這個原理稱為“如無必要,勿增實體”,即“簡單有效原理”。

          在設計中可以使用戶關注最主要的信息而非其它無關緊要的事物,從而提升使用效率。




          三、交互設計如何開展工作


          首先在交互設計師拿到需求后不要急著打開軟件開始繪制線框圖,而是要先分析需求,了解產品的戰略層和范圍層的業務目標。把握產品設計大方向,只有方向對了后面的工作才是有價值的。

          把握了產品方向,下面就該進行需求的分析,

          首先針對需求考慮5個問題:

          1、為什么要做這個功能?(業務需求)

          2、產品期望得到怎樣的成果?(業務目標)

          3、誰來使用?(目標用戶)

          4、他們要怎樣使用?(用戶需求)

          5、如何讓他們都來使用?(將業務目標轉化為用戶行為)

          清楚這5個問題后,再根據交互設計流程進行一步一步的進行

          這實際上就是對需求的戰略層分析。

          我們進一步分析業務需求(業務目的、業務目標)和用戶需求(目標用戶、用戶體驗目標),把握關鍵因素(用戶的動機、擔憂和影響目標達成的障礙)。

          歸納這些需求,明確設計策略。


          將“業務目標”轉化為“用戶行為”,通過引導用戶的使用來幫助產品實現目標。

          從設計“用戶行為”到設計“用戶界面”,用戶行為決定了用戶界面,用戶界面也導致了用戶會出現什么樣的行為。

          設計需求分析方法就是要幫助用戶創造動機、排除擔憂、解決障礙。



          四、如何進行用戶研究,方法有哪些


          評估的形式及方法


          常見的評估形式分為三類:

          1、評估主體:根據評估的主體不同來進行區分,即誰來做評估。

          按照評估主體來區分主要有兩個主體:用戶和專家

          用戶評估主要靠收集用戶使用數據,也就是用戶測試,它的數據相對客觀,但時間和費用較多,評估范圍較窄。

          專家評估是讓工程師及設計師等專家基于自身的專業知識和經驗進行評估的一種方式。專家評估相對主觀,但費時少、費用少、評估范圍窄。

          兩種評估方法可以相互補充,并結合使用。


          2、評估性質:例如定性評估、定量評估或著其它方式。

          按照評估的性質來區分可以分為定量評估和定性評估。

          定量評估是指對可以計量的部分進行評價,如點擊量、使用率等,可以用數據來說明。

          定性評估是指對非計量性的部分進行評價,如流暢度、舒適性、創造性等進行評價。它只能表示一個度,無法準確用數據來說明問題。


          3、評估過程:按照評估的過程來進行區分。

          從評估的過程來區分可以分為理性評估和感性評估。

          理性評估相對客觀,從客觀的角度出發判斷客觀事物。

          感性評估更為主觀,評估結果并沒有客觀規律。

          在實際應用中也需要將理性評估和感性評估結合使用,才能完整的完成我們的任務,達到我們的目標。


          常見的評估方法有四種:

          1、原型評估方法:在產品研發過程中,對于界面設計以及程序的測試來獲得用戶的反饋是至關重要的。以用戶為中心和交互式設計的重要因素之一就是原型方法,原型方法的目的是將界面設計與用戶的需求進行匹配。

          一般來說原型評估方法分為三大類型:

          (1)快速原型:原型迅速成型并分配實施,在原型實驗收集的信息基礎上,系統從草案中得以完善。

          (2)增量原型:應用與大型系統,從系統的基本骨架開始,需要階段性的安裝,及系統的本質特征是在初次安裝完成后允許階段性測試,以減少遺漏的重要特征。

          (3)演化原型:對前期的設計原型不斷進行補充和優化,直到成為最后的系統。


          2、簡易測試評估方法

          在條件不允許的情況下,可以采取簡易的方法來對用戶體驗進行評價。步驟是:

          (1)實驗室環境準備:準備好測試用的電腦或其他媒介。兩個房間,房間1用來對被測試者進行測試,房間2用于設計師和工程師的觀察。

          (2)被試選擇:分為用戶組和專家組。

          (3)進行測試:房間1中被試者根據自己的選擇進行操作和測試,同時說出自己的內心想法,觀察員在調查表上記錄被試者的每一次的操作情況,包括出錯情況和被試者的口語描述,當被試者在測試過程中遇到困難或操作無法進行時,觀察員要給予一定的客觀提示。房間2中通過相關設備將房間1的情況傳輸到房間2,設計師和工程師實時觀察和記錄被試者的情況,以便今后對產品做進一步的修改和完善。

          (4)結果分析:通過多次測試后,將測試結果匯總,提取出交互設計中存在的問題,以及對交互設計有益的建議形成測試報告。


          3、眼動評估方法

          眼動追蹤可以用來評價對產品(包括硬件產品和軟件產品)設計的感性意象,評測產品設計特征。眼動評估的主要指標有注視熱點圖、搜索過程測量指標、興趣區域即用戶視覺注意的焦點區??梢越Y合口語分析法了解用戶的所想 和所做。


          4、腦電評估方法

          通過對腦電信號的分析,研究者可以探索大腦的認知加工過程和受試者的心理狀況。近年來腦電評估方法在人機交互心理學等領域應用廣泛,被用來評估交互設計、人機界面、產品設計等方面的內容。但是腦電評估也有一定的缺陷,例如空間分辨率上的局限性,因而對某些認知過程和腦區的定位并不是很準確。第二,在許多相似的實驗研究中,由于研究者采用了不同的實驗材料和方法等,實驗結果也存在差異性。第三 ,由于采集記錄時間的滯后性,腦電所記錄的并不一定是當下被試者所想到的內容。


          采取哪種方法來開展用戶測試和評估,要根據不同的任務結合不同的環境來開展,比如:時間、成本、資源等。



          啟發式評估法

          是專家評估法的一種,也被稱為經驗性評估,最初由Nielsen博士提出。簡單來說,啟發式評估是一種簡易的可用性評估方法,使用一套相對簡單、通用、有啟發性的可用性原則,讓幾個評審根據專業知識和經驗來進行評估,發現產品潛在的可用性問題。


          啟發式評估的兩大要素:評估者和評估參照的原則。   


          對評估者的要求主要有四個方面:

          (1)人數:推薦3-5人,有時會更少

          (2)知識:最好同時具有可用性知識及設計知識

          (3)身份:最好是非設計者本人,否者不具有客觀性

          (4)崗位:設計師或用戶研究員


          評估參照的原則有:尼爾森十大可用性原則、八項黃金法則、首頁可用性指南、ios設計指南、拓展原則、HHS網頁設計與可用性指南等。具體需要根據實際項目來選擇,常用的是尼爾森十大交互原則。


          什么時候適合使用啟發式評估法?

          交互設計和UI設計階段、測試優化和產品發布后的階段。


          啟發式評估的優缺點有哪些?

          優點:成本低、效率高、發現大多數可用性問題,甚至是用戶測試時不會出現的問題。

          缺點:不能代表真實用戶,相對主觀、有時候發現問題過多、對評估人員知識背景要求較高。


          什么時候適用?

          (1)適合時間、資源有限的情況下快速發現可用性問題,降低風險及成本。

          (2)版本變動不大的情況下,小成本檢驗。

          (3)作為可用性測試的之前準備。


          啟發式評估流程是什么?

          (1)準備階段:確定范圍、背景調查、參考評估原則、評委邀約、材料準備

          (2)執行階段:任務走查、整體走查、結果記錄

          (3)分析階段:匯總討論、報告總結、優化方案



          可用性測試


          先來看一下我們在平時工作中常常會聽到這樣的問題

          產品經理:我們的用戶覺得產品好不好用?使用過程中會不會遇到問題?他們是否滿意?

          設計師:設計的過程有一些糾結的地方,不知道實際用戶是怎么理解和操作的怎么辦?

          產品開發后:想在大推前檢驗一下產品是否靠譜,適不適合大推?


          當我們遇到這樣的一些問題時,如何找到方法快速得到答案呢?

          那就是接下來要介紹的可用性測試方法。


          可用性測試是一種常用的、高效的方法。

          它的定義是:通過觀察具有代表性的用戶,完成產品的典型任務,從而找出產品可用性問題并解決,目的是為了改善產品,讓產品更容易使用。


          什么時候適合做可用性測試呢?

          一般是在:交互設計或UI設計、測試優化、正式發布三個階段來做。當然是越早做越好,可以盡早發現問題并及時調整。


          類型分為兩種:形成式和總結式

          形成式特點:小樣本、發現問題為主、不能做定量對比。

          總結式特點:大樣本(30人以上)、定量的評估、可以做對比評估


          可用性測試可以解決什么樣的問題?

          1、發現問題,產品在體驗上是否存在問題

          2、檢驗實現,期望的設計目的有沒有達成,是否滿足了用戶的期望

          3、產品評估,用戶是否會滿意

          4、理解用戶,了解用戶行為習慣,了解用戶認知,找到某些問題的原因


          測試流程是什么?

          整體上分為4個階段:1、準備  2、測試  3、分析  4、優化


          1、準備階段要做的有哪些?


          確定目標:確定測試目標決定了后面測試過程要怎樣去設計

          常見的測試目標有:

          ·對整個產品做可用性評估

          ·對新增的功能模塊進行評估

          ·提前觀察新方案對新老用戶有怎樣的影響

          ·提前檢測改版是否達到預計目標

          ·設計時存在爭議,如何選擇解決方案

          ·某個環節流失率較高,檢測是否為設計原因導致

          ·需要拓展某一類特殊用戶,測試針對這類用戶在設計上是否需要作出調整


          準備測試方案

          方案中應當包含以下內容:

          ·測試目的:明確測試的目的及范圍,測試目的決定了測試方案

          ·測試關注點:與負責的設計師一起梳理測試中要關注的問題

          ·用戶招募:招募要求,樣本配比,招募渠道

          ·經費預算:獎勵的形式和額度

          ·時間計劃:用于把控時間計劃


          撰寫測試腳本:設計測試任務,通過用戶行為去觀察提問來獲得我們想要的內容

          基本的流程有:

          ·暖場:3min,簡單聊天,消除用戶的緊張情緒

          ·測試說明:2min,對測試內容規則做說明

          ·測試前訪談:10min,了解用戶基本信息

          ·簡單試用:3min,讓用戶熟悉產品

          ·測試執行:30-45min,提示任務并觀察

          ·事后訪談:15min,針對疑點問點追問,填寫評價表

          ·道別:5min,支付禮金,送用戶離開


          招募用戶

          招募什么樣的用戶呢?

          ·根據測試目的來定,找出與測試目標有關的篩選緯度

          ·特別考慮用戶使用行為相關的特征,例如競品使用經驗,使用產品的目的,用戶的活躍度等

          ·挑選最核心的緯度,轉化成用戶招募的條件,并盡量客觀化,具體化,可衡量

          ·避免設置交叉條件過多,導致樣本代表性降低

          ·學會辨別真假的用戶信息


          招募多少用戶合適?

          ·以發現問題為目的快速可用性測試,6-8名即可

          ·考慮產品的復雜性,覆蓋人群差異性,適當做調整,拓展到10-15名


          招募渠道有哪些?

          ·公司內部

          ·現有產品用戶庫

          ·公司其他產品用戶庫

          ·熟人,朋友等

          ·推廣渠道:官微、公眾號、門戶網等

          ·社區,論壇,qq群等

          ·第三方調研公司


          準備測試素材:低保真或高保真原型,或線上已經可以使用的產品,也可以準備一些量表工具來輔助測試。在測試

          過程中需要用到的電腦或手機設備,攝像頭,紙,筆,桌椅等。


          測試場地選擇:

          ·專業可用性測試實驗室:一般對測試質量要求較高,旁聽人數較多且需要采集豐富的數據的時候采用此方法。實驗室有兩個房間,一個測試間,一個觀察間,中間有單向玻璃分隔。測試間中有多角度的攝像頭,用來記錄測試過程,觀察間可以同步看到測試間里的情況,

          ·普通測試環境:在觀察人數較少(小于3人),條件有限時使用。


          預測試階段:正式測試前進行預測試,保證測試流程通暢

          ·走查:記錄可能出現的問題

          ·預測試:找人先測試一下

          ·調整:調整測試流程


          正式測試階段

          測試參與人員有

          ·主持人:引導整個測試流程

          ·記錄員:記錄操作行為,訪談內容,發現問題等

          ·產品團隊:參與旁聽,觀察,結束后交流

          ·用戶:完成測試及訪談任務


          測試過程中需要觀察的要點:

          ·用戶是否獨立完成了任務

          ·是否存在無效操作或不知所措的情況

          ·用戶是否滿意


          結果分析

          邊測試邊總結,越及時越好

          ·測試完一個用戶,做一次小結

          ·測試結束當天寫小結,與設計師當場討論

          ·重要問題反饋后再總結分析報告

          ·邊測邊改,邊改邊測

          結果分析4個步驟:1、對發現分類  2、整理不確定項  3、評定優先級  4、結果記錄


          撰寫報告

          從4個方面來寫:

          ·總體如何

          ·有哪些問題

          ·嚴重程度如何

          ·建議是什么

          ·除此之外,還可以圍繞關注的問題,未滿足需求補充分析


          優化跟蹤

          在測試之后需要出優化的方案,測試優化的過程是循環的。

          測試之后如果還有其他問題沒有得到解決,可以結合其他的一些測試方法來得到。



          問卷調研

          問卷調查法是以書面提出問題的方式搜集數據的一種研究方法,研究者將所要研究的問題編制成問題表格,讓受訪對象以郵寄、當面作答、在線作答或追蹤訪問的方式填寫,從而了解被試者對某一現象或問題的看法和意見。問卷調研可以用于需求挖掘階段,也可以用于產品上線后的評估階段。

          如果是想了解用戶對產品上線后的滿意度,可以使用問卷調研的方法。它比較適合去了解用戶的認知態度,也可以附帶了解用戶的行為習慣,


          問卷調研的優缺點

          優點:統一性、靈活性、量化性、匿名性

          缺點:(1)只能獲得書面的信息,而不能了解到生動、具體的情況。(2)缺乏彈性,很難做深入的定性調研。(3)調查者難以了解被調查者是否認真作答,是不是自己填寫的。(4)填寫問卷比較容易,有些別調查者會隨意選擇,或者按照社會主流觀點選擇,這樣會使調查失去真實性。(5)回復效率低,對無回答者的研究比較困難。


          問卷調查的使用場景

          適用于:(1)需要進行定量分析的調研。(2)需要匿名進行調研的問題。(3)對已有假設進行檢驗。(4)尋找問題隱藏的關聯。(5)對產品設計用戶認知及態度的評估。

          不適用于:(1)發現和描述具體問題。(2)探索受訪對象的模糊態度。(3)獲取創新想法。(4)獲取精確的行為數據。


          問卷調研流程

          1、確定目標:確定調研目的、對象、分析目的和應用對象。

          2、調研方案:通過訪談、經驗、理論等,確定調研框架,題目選項,分析思路,投放渠道,相本配比等。

          3、問卷設計:問卷設計,問題美化,投放渠道。

          4、問卷測試:多人測試,確保問卷的可讀性,邏輯通暢

          5、問卷投放:按照計劃好的投放渠道進行投放,回收數據,數據清洗

          6、問卷分析及填寫報告:分析及報告填寫,調研結果落地



          數據分析

          概述:通過在網站或應用中進行數據埋點,獲取用戶對產品的使用和行為數據,并進行基于產品體驗優化的數據進行分析。


          數據分析可以做什么?

          1、可以做到用戶從哪里來,來了多少

          2、獲取用戶屬性,用戶地域,用戶設備

          3、訪問了哪些頁面,使用了哪些功能,消費了多少錢,消耗了多少時間

          4、哪些流量可能存在問題,忠誠度如何,活躍度如何,有沒有達到目標,和行業相比如何

          5、流失情況如何,離開之后是否還回來

          可以作為產品的眼鏡和大腦,提供客觀衡量的依據,可以持續優化改進。


          數據獲取方式的對比

          日志文件:優勢,完整的服務端請求記錄。

                            缺點,日志的獲取和清洗有過濾成本,許多頁面操作無法記錄。

          JS頁面標記:優勢,數據獲取可控、靈活,可以對頁面操作記錄進行記錄,獲取數據比較完整豐富。

                                缺點,需要在頁面植入JS標記代碼,某些情況下無法獲取,如當用戶禁用JS功能時。


          常用的數據監控平臺

          1、第三方監控平臺:如Google Analytics、百度統計、騰訊云分析等

          2、自研平臺


          數據分析流程

          1、監控  2、定義  3、埋點  4、測量  5、分析  6、優化


          Web分析常用的指標

          PV:是指頁面瀏覽量,網頁瀏覽數實施評價網站流量最常用的指標之一,用戶每一次訪問網站中的頁面均被記錄,對統一頁面多次訪問,訪問量累計

          UV:是指獨立訪客,是通過互聯網訪問、瀏覽這個頁面的自然人

          UPV:是指唯一身份綜合瀏覽量

          訪問:是指在一定時間范圍內,網站所有訪問者對網站發起訪問的總次數,從訪客來到網站到最終關閉網站所有頁面,記為一次訪問

          識別用戶的方式:IP、IP+User Agent、cookie、User ID、設備ID、其他


          復合指標

          跳出率:指用戶來到網站,只瀏覽了一個頁面就離開的訪問次數,占全部訪問次數的百分比,簡稱“來了就走”。跳出率可以被用來衡量流量和頁面質量,高跳出率表示訪問者對著陸頁面不感興趣,沒有繼續訪問更深入的頁面。也可能頁面設計存在問題,也可能是導入的用戶不匹配。跳出率可以通過調整廣告渠道,優化頁面內容來降低。

          退出率:訪問者離開網站一次被記錄為一次退出,某一范圍內退出的數量/該范圍的綜合訪問量就是退出率。如果關鍵流程中的某一頁面退出率高,代表某一頁面可能出現了問題。

          訪問時長:網站停留時長,頁面停留時長,應用使用時長。訪問量是訪問質量的一個衡量指標,較長的訪問時間說明用戶與產品進行了較多的互動。

          訪問深度:可以理解為單個用戶平均訪問的頁面數,是PV/UV的比值。訪問深度也是訪問質量的一個衡量指標,可以考察用戶是否和網站進行了較多互動。這個比值越大,代表網站的粘性越高。

          轉化率:指在一個統計周期內,完成轉化目標行為的次數占總訪問次數的比率。根據設置不同目的進行計算,例如注冊轉化率、付款轉化率等,是一個重要的分析指標。


          移動端基礎指標

          移動端的基礎指標監測與web端略有不同,但分析思路大致相同。指標分為:新增設備、累計設備、啟動次數、單詞使用時長。


          常見分析內容

          流量分析(哪里來?)、用戶分析(什么樣的用戶?)、行為分析(如何使用的?)、路徑轉化(表現如何?)、流失分析(粘性如何?)



          A/B test

          A/B測試是一種幫助網頁優化實驗的方法。A/B測試的目的在于通過科學的實驗設計和采集數據的方式,來獲得具有代表性的實驗結論,從而尋找到更好的產品策略。

          簡單來說,就是為同一目標制定兩個方案,讓一部分用戶使用A方案,另一部分使用B方案,記錄用戶的使用情況,對比兩個方案的結果,選擇更符合的方案。

          A/B test一般會在產品改版正式上線之前使用,來驗證新的設計是否可以提高產品的表現。


          A/B test可以測試的元素有:標題、圖片、顏色、社交元素、段落文本、按鈕、導航、任務流程、頁面布局、價格、視頻等??梢淮沃桓淖円粋€元素或一次改變多個元素的方式來測試,這就是兩個測試類型單變量測試和多變量測試。


          A/B test工具

          Google Website Optimizer:搜索巨頭提供的免費A/B test工具,一個很好的入門級工具,但是沒有一些先進的功能。

          Visual Website Optimizer:一個易于使用的A/Btest測試工具,包含功能有所見即所得的編輯器,單機地圖,訪問者分割和標簽等。

          Unbounce and Performable:集成著陸設計的A/B測試工具。

          Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target:企業級測試工具

          App Adhoc Optimizer:國內A/B Test工具,同時支持前端(Web/H5、IOS、Android)及后端(Node.JS、PHP、Java)AB測試服務的專業Saas平臺

          Optimizely:是網上現有的最專業的AB測試工具之一,它的價格要比其他的工具高很多(也可以免費使用一個月),它提供了一些非常好的功能。

          Unbounce:對于登錄頁面的測試來講非常不錯,而且它不僅僅是個測試工具,還可以在無需自己編寫任何代碼的情況下來創建登錄頁面。


          如何做A/Btest

          1、確定目標,例如提高網站的付費轉化率,降低跳出率等

          2、測試方案,建立假設:購買按鈕的顏色會影響點擊率?縮短流程可以提高復費率?改變導航可以降低跳出率等?

          3、創建相比較的兩個版本,改變其中的變量

          4、發布測試,將部分流量導向B方案,但不一定是5:5

          5、數據分析,收集數據,對比AB版本的轉化率、跳出率、留存率等



          感謝閱讀!



          文章來源:站酷   作者:_微光

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

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

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

          界面設計中素材的處理技巧

          博博

          用科學合理的方法找到最合適的素材

          UI設計中,除了界面整體的布局,還有一些圖標、插畫的設計,大部分都是素材的填充,而這么重要的部分往往被設計師所忽略。


          對于素材的隨意挑選,殊不知選圖的技巧和方法有很多,眾多素材中如何找到我們心儀的配圖呢?這就是今天要和大家分享的主題,用科學合理的方法找到最合適的素材。



          一、選擇配圖的常見錯誤


          在為產品尋找配圖素材時,是一個長久過程。所以素材的運用即能幫你提升界面的效果,也能拉低界面的效果,很多設計師不在意選材的重要性,往往因為配圖后界面效果還不如原型圖看起來規范好看。下面我總結出三個方法可以提升配圖的效果。



          1、素材與用戶預期:


          不真正調研產品的用戶群里和心里。搭配的素材必然達不到用戶預期。每款產品的使用人群是不同的,我們的素材配圖要符合產品使用人群的預期。


          如下圖:是一款有關于售車的界面效果,此項目的用戶的目標已經確定,主為高端用戶,我們來看看左右配圖的區別。



          左圖中我們在找配圖時如果不能保證對高端車的認知,必然會有低端車的產品圖的出現,由于不符合產品的使用人群,給用戶造成心理落差;而右圖則是我們了解高端車后的選圖,內容是符合用戶心理預期的,同時通過配圖再次提升產品的逼格。


          PS:我上面說到圖片內容的心理預期與用戶不符,其實在關于選圖上,也是存在這個問題的,例如左側是通過百度找到的素材,不夠精致,無法提高界面的整體效果,而右側則是在站酷海洛找到的素材:


          只要進行裁剪,縮放比例即可使用,界面整體檔次也提升很多。



          2、素材與主視覺:


          說到主視覺,就先要說說有關顏色的歸類,顏色主要分為暖色系,冷色系和中性色系三種,在界面中不同的顏色可以帶來不一樣的感受,如果不理解主視覺所要表達的感受,便找不到合適的配圖,無法提升界面效果。所以我們在選擇配圖時一定要追尋界面的主色系所以傳達的情感。


          如下圖:左側是以冷色為主的直播界面,右側是以暖色為主的產品詳情頁。



          左圖由于忽略了主視覺的關系,配圖為顏色過多,頁面整體表達出來的情感不夠直觀,無法產生共鳴。


          右圖中我們通過控件可知主色為暖色系,選擇同色系的素材進行搭配,通過素材和主視覺的完美搭配才能明確傳達產品想要給用戶的感受。



          3、素材與素材:


          這是最容易出現的錯誤,我們通常只關注于素材的整體感覺,反而忽略同類素材之間的差異,不是所有的同類素材都可以放到一起來用的,我們還要注意素材與素材內容的差異化。


          如下圖:左圖為一款外賣食品列表的效果圖,右圖為商品列表的效果圖,大家可以分別感受一下左右兩側的哪個更舒服些。


          左圖中列表的素材與素材的內容是不同的,雖然都是食物圖,但有的是實物,有的是適量圖,給人的感覺是不同的,這也是大家總是覺得哪里不對,卻又說不出來的問題。


          再看右圖中的列表,配圖元素統一,同為國外真人模特,符合素材與素材之間風格的統一。


          PS:我們平時在做概念稿時,找同類型的產品圖消耗的時間也是很大的,不是圖片少,而是同質量的素材太少了。


          所以一定要在專業的素材平臺找查找,因為專業的素材平臺會根據設計師的需要提供方便快捷的素材集合。



          例如上圖,我在站酷海洛中的搜索水果,便的到各個角度和不同風格的同質量圖片,可以有更多的選擇去搭配。



          二、運用配圖的常見錯誤


          上面我們說的是如何選擇素材,而下面一部分主要是讓大家了解到沒有量身定做的素材,不是什么素材都可以拿來直接用的,理想是豐滿的,現實是骨感的。


          辛辛苦苦找到的素材,就差一步便可以提升作品的效果,卻因為嫌修改麻煩而失之交臂,我們來看看下面三種方法是如何將素材進行優化的。




          1、統一素材比例:


          在設計界面時,素材被拉伸變形,填充不滿等低級問題出現的已經越來越少了,所以這里要說的不是基礎的尺寸問題,而且是素材內容的占比比例。要保證素材中的內容與背景的占比是一致的,才能提升界面規范性。


          如下圖:兩張運動類產品的界面列表,我們來分別單獨預覽兩個界面,有沒有發現同樣的界面同樣的產品,但預覽產品的順序是不同的,這是什么原因導致的呢?我們往下看。


          左圖中的產品展示內容與背景的占比不統一,可能是按現實中的比例進行擺放的,有大有小,界面顯亂,干擾用戶的閱讀順序。


          右圖通過更改圖片比例后,統一了圖片內容與背景的比例,不會干擾用戶閱讀界面的順序。



          2、統一素材角度:


          素材因為角度不一,給人的感受也是不同的,在一個界面中的素材如果角度各式各樣,會影響到用戶的點擊欲望。所以在挑選素材時應該注意參考圖的角度,統一的拍攝角度可以讓界面變得更有秩序。


          如下圖:左右兩張界面的產品展示部分。



          左側界面中產品配圖角度各異,有正視拍攝,有俯視拍攝的界面毫無秩序感。而右側則對配圖進行了規范,都為正視圖,讓界面看起來更統一規矩。



          3、統一顏色:


          很多素材的構圖和內容都很棒,但放到界面中卻顯得格格不入,主要原因在于顏色之間的差異。選用素材后,如果對差異較大的顏色不做改變,便會造成顏色混亂,弱化了主視覺的顏色,用戶對其產品的認識便會漸弱。


          如下圖:播放器界面中唱片封面的顏色差異。



          左圖我們為播放器尋找到了合適的素材封面,但素材的顏色是橙色的,素材與整體的顏色調性是不融洽的,破壞了界面的統一性,并不適合。


          所以我們可以將封面改變其顏色變為符合我們界面中按鈕以及播放時長的進度條的藍色即可。



          三、線上運營用圖


          前面說到的都是關于概念稿選擇素材用到的一些技巧,可能大家看了會覺得這是概念稿,在實際的線上是沒辦法控制的,這個觀點我并不同,實際線上的配圖就真的沒辦法提升了嗎?還是我們選擇性忽略了呢?也許我們最初的選擇就是美麗的謊言。



          1.確保真實用圖:


          在設計初期我們就應該使用真實的運營圖片進行設計,防止上線后才發現圖片與設計風格不符的情況,為時已晚。


          如下圖:兩組圖為圖書展示模塊區域。



          左圖為設計時擺放的封面,都是精心挑選的優質素材,美化了模塊的效果。


          而右側為線上效果,無法保證封面設計的統一性,所以切勿使用與實際上線不符的圖片,會影響產品最終效果的判斷。



          2.不可重復用圖:


          很多設計師在做設計稿時,通篇只用一張素材圖,交給開發,其實這樣做出的設計,和原型無太大差異。


          但是我們的設計稿是為了給運營提供參考的基礎模版,為了能和線上效果保持一致,所以設計稿中的素材不可在一個界面中出現兩次。


          如下圖:視頻App中的頻道頁,左側為復用素材設計,右側為選擇不同素材設計。



          左側的復用設計其實和原型區別不大,無法根據界面中的素材選擇運營圖,可利用性不大。而右側更貼近線上效果,可以給運營提供找素材圖的方向,避免返工。



          3.圖片的清晰度:


          模糊的圖片會使用戶的視覺體驗變得糟糕,現在的用戶對于圖片的瀏覽量每天都是不計其數的,如果想要在配圖上得到用戶的親睞,就必須要清晰且看著舒服的圖片。


          如下圖:兩張同樣的界面展示,分別用了模糊的素材和清晰的素材。



          左圖中圖片清晰度不夠,影響用戶的瀏覽,同時也會給用戶造成未加載完成的錯覺。


          右圖中的素材則清晰可見,增加界面的美觀度。所以我們在用圖時,不可以用小尺寸的圖片強行拉伸,會導致圖片模糊不清,請選擇高清大尺寸的配圖。



          4.圖片比例:


          同一張圖片可能需要在多個界面中進行展示,而展示的尺寸也有可能存在差別,所以我們需要統一制定界面中運營圖的尺寸規則,也可以做好安全區,避免界面因比例不對造成的圖片拉伸或者顯示不全等情況。


          如下圖:下面的圖片是原圖素材,接下來要將原圖分別放入不同的區域內,他們的尺寸也不同。



          在左側界面中,如果任由系統自動適配比例就會出現前兩種的錯誤,留白或變形,所以我們應該把較大的圖片制作規范,畫出安全區。


          如右圖banner通過上面等比例縮放到剛好填充滿即可,下面的素材也是等比縮放大填滿整個擺放區域后在進行裁剪。



          5.元素太多不使用:


          很多運營的用圖元素過多,一心想把能放的都放進去,最后圖片內容中沒有重點,用戶看的也是一頭霧水,元素少,突出重點的圖來使用。


          如下圖:同為視頻App中熱播模塊,同樣的美劇和字段,只是素材有所不同。



          左側素材中元素過多,影響用戶對圖片閱讀,無重點,沒有點擊欲望。


          而右側的配圖簡單清晰一目了然,不會給用戶帶來閱讀負擔,更是挑選影片中簡單清晰的畫面作為封面使用,增加用戶點擊欲望。所以我們要選擇元素少的運營圖作為配圖。



          6.格式太大:


          圖片格式過大是一件很嚴重的問題,用戶預覽時加載速度過慢影響用戶體驗的流暢性,圖片過大也會增加用戶流量的使用費用。所以我們在導出運營用圖時,一定要記得壓縮圖片,對于壓縮到什么程度,要看圖片本身的大小,只要保證壓縮完依然清晰就可以。


          如下圖:兩張同樣的素材圖,他們的清晰度是一樣的,可大小卻有區別。



          左側為原圖大小,右側為壓縮后的圖片大小,我們可以看到壓縮后的圖片明顯占用的內存更小了。



          7.不要使用白色背景:

          目前線上產品中白色背景的產品占比還是很高,所以我們在選用素材時,要避開白色背景的素材,當界面背景也為白色時,會造成無邊緣感。


          如下圖:兩個模塊中選擇用了不同背景底色的素材圖。



          左側素材中用了大量的白色背景的素材,無法判斷圖片與圖片之間的距離,同時也會造成圖片大小不一的錯覺。


          右圖中使用有背景色的素材,可以清晰的區分每一個模塊的間距,整齊規范。


          總結

          我們在做概念稿時都知道需要精心選擇配圖,為什么在做線上稿時,圖片的質量就變得那么差,是一件需要思考的事情,難道沒有好的素材,我們就放棄了產品的美觀度嗎?


          我們不應該把美化調整運營圖變成日常的流程中嗎?這樣才能保證產品的最終質量。好看的素材不是找出來的,而是通過我們優化出來的。


          文章來源:站酷   作者:海邊來的設計師

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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