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

          首頁

          如何提升UI設計的高級感?來看高手的深入分析!

          周周

          完美,不是因為沒有什么可以增加,而是沒有什么可以減少。

          創建美觀、可用和的 UI 界面需要花費時間進行設計細節的打磨,本文從視覺和情感化設計兩個方面來說說如何提升 UI 設計的高級感。

          視覺元素

          在互聯網產品日趨成熟的今天,你會發現所有的 App 越來越像,似乎是同一套模版設計出來的產品。而這種普適化的設計會導致同質化嚴重,使得設計不精致,產品沒有氣質和品牌感。一個 App 設計是否精致,是否富有設計感,在于它的細節,這就意味著我們在進行設計的時候,要從細微之處著手,從多方面去鉆研如何創造出打動人心的 UI 設計。本節總結了 12 個簡單直觀的提升設計感的小細節,一起來學習。

          1. 使用顏色深淺構建層次結構

          在對 UI 文本進行樣式控制的時候,最常見的錯誤莫過于過度依賴字體大小差異來營造對比。單純使用字體大小對比,所營造的對比并不夠,嘗試結合色彩和字重來營造更好的對比效果。

          如何提升UI設計的高級感?來看高手的深入分析!

          每種顏色都有一個視覺權重,這有助于在內容中建立層次結構。通過使用顏色的深淺,為元素賦予不同的重要性。如果可以的話,你甚至可以采用兩到三種顏色:

          • 主要內容使用深灰色(諸如標題,但是不要用純黑)
          • 次要內容使用灰色(比如商品介紹)
          • 輔助性內容采用淺灰色(比如發布日期)

          如何提升UI設計的高級感?來看高手的深入分析!

          類似的,在 UI 設計的時候,通常兩種不同的字重足以營造出優秀的層次感:

          大多數的文本采用正常的字重(400 到 500,具體取決于字體)

          對于需要強調的文字采用較重的字重(600 到 700,具體取決于字體)

          如何提升UI設計的高級感?來看高手的深入分析!

          △ 主標題字重為600,其他標綠點的文字字重都為400

          應當盡量不要讓正文部分字重低于 400,因為這一部分字體本身尺寸已經較小,低于 400 會使得可讀性不佳。如果你依然需要降低字重,那么不妨讓字體色彩更淺一點,或者替換成其他識別度較強、字重相對較小的字體。

          灰色文字在無彩/彩色背景下要分開處理

          如何提升UI設計的高級感?來看高手的深入分析!

          不要在有色背景上使用灰色的文本,在白色背景下,將黑色的文本改成灰色(或者在黑色背景下使用灰色文本),是不錯的淡化其視覺效果的做法。

          如何提升UI設計的高級感?來看高手的深入分析!

          但是在彩色背景下,想要降低和背景色之間的對比,通常有兩種方法:

          一是降低白色文本的不透明度;二是讓文本逐步接近背景色,而不是改為灰色。

          如何提升UI設計的高級感?來看高手的深入分析!

          △  左圖設計師職位信息為白色文字降低不透明度,右圖為和背景同色相的顏色

          其次當涉及長篇內容時,大面積的深色粗體字會給人一種沉重感,而且很跳躍。通過選擇類似深灰色(#4F4F4F)這樣的顏色可以很容易地解決這個問題,使文字更容易被識別。

          如何提升UI設計的高級感?來看高手的深入分析!

          2. 統一色調

          選擇一種基礎色,再調整色調和顏色深淺來增加均衡。設計時避免用過多的顏色。如果項目允許,只需使用固定的色板,通過調整基礎色的飽和度和明度,利用這種簡單的方式為設計增加一致性。

          如何提升UI設計的高級感?來看高手的深入分析!

          3. 干凈的陰影

          陰影是 UI 設計中最常見的視覺表現手法,它可以增加元素的深度,使其從背景中脫穎而出,引起用戶的注意力,同時也能增強畫面的視覺層次感。相比于采用大范圍的擴散模糊陰影,使用微妙的垂直偏移陰影效果更明顯,更自然,它模擬了最常見的光源特征,光線從上往下照下來所營造的陰影效果。

          如何提升UI設計的高級感?來看高手的深入分析!

          這種輕柔的陰影呈現出的干凈,增加了畫面的精致。如果陰影的范圍太小或顏色太深,位置也沒有偏移,而是聚集在元素的四周,就會讓畫面更加扁平,讓視覺變得厚重,呈現出不精致的畫面感。

          如何提升UI設計的高級感?來看高手的深入分析!

          陰影不一定是黑色的,還有一種擴散陰影是模擬元素本身的顏色投射在背景上,由于陰影與元素的色調一致,因此呈現出十分融洽的畫面感。在 UI 設計中,這種手法不宜過多使用,否則呈現出的各種色彩搭配會讓人眼花繚亂。

          4. 個性的圖標設計

          合格的設計師能夠繪制風格統一的圖標,而優秀的設計師能夠創造風格獨特的圖標。我們能否在追求大小一致,圓角一致,線寬一致和配色一致的同時,為它的視覺表現力加入更多的創意呢?例如下面這組圖標設計,無論是在圖形上的創新,還是顏色搭配上都呈現出無與倫比的創意。

          如何提升UI設計的高級感?來看高手的深入分析!

          標簽欄作為一個 App 的全局導航起著至關重要的作用,它的設計影響著整個產品的視覺風格。通常,大多數 App 都是使用 iOS 規范的設計樣式(默認灰色,選中填充品牌色),這樣的設計太普通,太常見了。要想讓標簽欄圖標設計精致和富有個性,可以豐富每一個選中態圖標的視覺表現,例如給圖標加上背景和表情,即顯得生動有趣,又增加了用戶的好感,給人留下深刻的印象。

          如何提升UI設計的高級感?來看高手的深入分析!

          3D 立體圖標設計是近幾年來的流行趨勢,看上去十分精致、華麗,但是看久了會讓人產生輕微的視覺疲勞,同時因其復雜的結構會增加用戶的認知成本。一般在外賣美食類應用中比較常見。

          如何提升UI設計的高級感?來看高手的深入分析!

          5. Tab 的設計感

          Tab 是 App 設計中最常見的控件之一,它源自 Material Design 的設計規范?,F在很多 iOS 產品當中也開始使用這種導航欄樣式來進行設計,而原本屬于 iOS 規范當中的分段選擇器變得不那么常見了。

          在視覺表現形式上,Tab 和標簽欄同樣也分為選中態和未選態,它的設計較為簡單,通常是使用一組文字標簽,通過顏色或在標簽下加上小長條來區分兩者的狀態。因為它簡單,卻越難設計出彩,要發揮極大的設計想象力,跳脫出設計規范的限制,才能找到完美的方案。例如蝦米音樂的 Tab 選中態是一段音頻波線,再配合文字的大小對比,一個富有設計感又符合產品特征的 Tab 就被創造出來了。

          如何提升UI設計的高級感?來看高手的深入分析!

          我們還可以從品牌基因中獲取靈感,品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺富豪作為 Tab 選中態的小長條,這樣就建立起視覺上的聯系,讓用戶產生由內而外的一致感受。例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到 Tab 的設計上,既讓界面視覺,又進一步強化了用戶對品牌形象的認知。

          6. 無框設計 去繁從簡

          在 UI 設計中,有許多的裝飾元素,如卡片的邊框、列表的分割線等,雖然邊框,分割線是分隔兩個元素的好辦法,但是它不是唯一的方法,使用過多會讓整個布局的設計感降低,或多或少都會干擾用戶瀏覽的視線,讓信息內容失去注意力,因此可以減少不必要的裝飾元素。我們可以通過以下幾個方法來劃分元素的視覺層次,讓畫面變得干凈,整齊:

          使用陰影

          陰影同樣可以營造出邊界感,而且相比邊框分割線更加微妙,并不會顯得突兀,不會分散用戶的注意力,讓內容更聚焦。

          如何提升UI設計的高級感?來看高手的深入分析!

          使用不同的背景色來區分

          通常,相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以,你所需要做的就是在不同的區塊采用不同的背景色,并且嘗試刪除分割線,因為你根本不需要它。

          如何提升UI設計的高級感?來看高手的深入分析!

          增加額外的留白

          創建元素之間的分離效果,并不一定要通過線框來表現,只要增加留白,讓它們分隔開就行了。通過留白和間距來實現元素分組是 UI 設計中的常用手法。

          如何提升UI設計的高級感?來看高手的深入分析!

          7. 統一設計元素

          在 App 中的每一個界面都有許多元素,那些同類的元素應保持統一的設計樣式。通常個人中心的標簽欄圖標是一個人形剪影,它代表著用戶,因此可以在展示用戶頭像和用戶形象的界面中延續使用。如果圖形擁有獨特的外觀,如橢圓矩形,也可以作為視覺符號的一種,延續到其他界面中,成為圖形或按鈕的外觀。這樣,整個界面就被統一的設計元素聯系起來了,給用戶始終如一的一致感。

          如何提升UI設計的高級感?來看高手的深入分析!

          8. 符合產品氣質的字體

          選擇符合產品氣質的字體,可以與產品的定位相吻合,傳遞給用戶正確的情感意識。雖然默認字體可以滿足大多數 App 的設計需求。但會出現一個問題就是,系統字體的普適性并沒有什么特色,在一些特定的情境下就顯得收效甚微。例如在運動類 App 中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺,換成系統字體后,整體感覺在氣勢上就變弱了很多。

          如何提升UI設計的高級感?來看高手的深入分析!

          9. 第三方圖標風格統一

          大多數 App 都支持三方登陸,他可以減輕用戶注冊的時間成本。通常是在注冊登陸頁的底部展示第三方圖標入口,這也是設計師最常忽略的內容,往往是直接將第三方圖標調整一致大小和擺放整齊位置,沒有針對它們再設計。一個設計精致的 App 不應漏過任何的細節,我們可以以自家 App 的圖標風格為依據,對第三方圖標進行優化設計。

          如何提升UI設計的高級感?來看高手的深入分析!

          10.  圖片中尋找色彩

          App 中優美的圖文設計,能帶給用戶如沐春風的視覺享受,它非常重要。我們經??吹轿淖织B加在圖片背景上的設計樣式,為了減少復雜圖片背景對文字的干擾,通常的做法是疊加半透明度的黑色蒙版,讓白色文字清晰可見,但這不是最優的辦法。我們可以從圖片中提取主色調用于疊加背景的填充色,這樣就使文字、色塊和圖片融入到一起了,畫面變得高級和富有設計感。

          如何提升UI設計的高級感?來看高手的深入分析!

          11. 提高圖片質量

          圖片的質量影響著整個 App 的格調和用戶的情緒,高品質的圖片給人愉悅的視覺享受,產生美好的聯想。而低品質的圖片會瞬間拉低 App 的質感。在 App 設計中,一張漂亮的圖片從收集到上線,需要經過裁剪,調色等過程才能被使用。即使是普通的商品圖片,我們將它摳圖后調整成統一大小,再加上干凈的背景,就能立刻提升商品的美感,界面視覺也會變得美觀、整潔。

          如何提升UI設計的高級感?來看高手的深入分析!

          12. 卡片式設計

          現在的 UI 界面設計中,卡片式設計已經是一種非常常見的設計形式,它有利于信息分層和整合,劃分出更加清晰的組織結構,實現復雜內容的簡化處理,提高空間利用率。同時卡片式設計通常很依賴視覺元素,很強的視覺元素正是卡片式設計的一種優勢,也是提升設計品質感的良方。

          如何提升UI設計的高級感?來看高手的深入分析!

          情感化設計

          心理學認為,情感是人對客觀事物是否滿足自己的需求而產生的態度體驗。只有當產品觸及到用戶的內心時,使他產生情感的變化,那么產品便不再冷冰冰,他透過眼前的東西,看到的是設計師為了他的使用體驗,對每一個魔鬼細節的用心琢磨,人們會產生愉快、喜愛和幸福的情感。情感化設計并不是轟轟烈烈,有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心,使用戶獲得愉悅的使用體驗。讓設計變得高級不僅僅是視覺層面,這些簡單而美好的設計細節充滿了積極情緒,它是滿足產品的功能性和易用性之后,追求更高層次的目標。

          1. 提示性文字

          語言是情感化設計最直接的利器,擬人化的對白相比冰冷的話語更能獲得用戶的好感,賦予產品的新的生命力。例如 App 那些 push 推送通知,因為用戶每天收到的 PUSH 實在是太多了,早已心如止水!這個時候,你就需要一條成本低、效率高的 PUSH 文案,去撩動用戶主子們的心。將原本對用戶的打擾變成一種逗趣,讓人看到會心一笑。

          如何提升UI設計的高級感?來看高手的深入分析!

          2. 下拉刷新

          下拉刷新是用戶在 App 使用中經常進行的操作,常見的下拉刷新設計是圖標加文字的形式,這種設計簡單、直觀,但毫無設計感,不能引發用戶任何的情緒。

          如何提升UI設計的高級感?來看高手的深入分析!

          下拉刷新是一種臨時狀態,豐富它的設計細節不會造成與產品界面的格格不入,相反,一個富有設計感的下拉刷新設計能讓產品獲得用戶的好感。例如 uc 頭條在下拉刷新時會蹦出一只奔跑的小鹿,暗示正在快馬加鞭的加載新內容,小鹿形象延續了品牌 logo。作為資訊類產品,內容更新速度至關重要,奔跑的小鹿正好隱喻了這一點。用戶也在這種快樂的情緒中對產品產生好感,瞬間就讓下拉刷新變得生動有趣。

          如何提升UI設計的高級感?來看高手的深入分析!

          3. 頭像設計

          個人中心頁與用戶信息密切相關,用戶的虛擬形象在這里得以展現,常見的設計是一個用戶頭像加登陸文字的形式,這種默認的頭像設計無法得到用戶的認同感。

          如何提升UI設計的高級感?來看高手的深入分析!

          現在很多的產品已經放棄了死板的默認頭像,給用戶更多的選擇。賦予產品一些人格魅力,可以讓產品富有生命力,消除人機界面的冰冷交互,幫助用戶和產品建立友好的聯系。例如美團外賣和躺平,它們各自的身份都代表了產品的氣質和用戶的屬性,讓用戶產生一種身份的認同感。

          如何提升UI設計的高級感?來看高手的深入分析!

          4. 缺省頁化解負面情緒

          通常狀態是,當前頁面沒有內容或無網絡狀態下出現的頁面。常見的設計是圖標加提示文字的形式,這種簡陋的設計會給用戶心理造成很大的落差,陷入負面情緒中。情感化設計在此時就可發揮巨大的作用,它通過設計手段來減輕用戶在看到一個毫無內容的界面時所產生的挫敗感。 設計師可發揮的空間很大,根據產品屬性和品牌延展圖形,結合動效或插畫等情感化設計,可以很好的豐富頁面內容。例如躺平的空白頁呈現出一種賤萌的場景,讓用戶會心一笑,使產品充滿了趣味性。

          如何提升UI設計的高級感?來看高手的深入分析!

          5. 標簽欄微動效

          情感化設計變得越來越豐富,圖標設計上升至可以展示動畫效果。通過動效的使用,標簽欄切換變得不再死板。用戶在頻繁切換頁面時,不再覺得單調。精心設計的動態效果,能夠緩解用戶等待時焦躁的心情,從心理上縮短用戶等待時長,讓品牌更加深入人心。

          如何提升UI設計的高級感?來看高手的深入分析!

          6. 模擬用戶行為

          如果一個產品可以模擬用戶的行為,將用戶代入真實的情境中,用戶就會對產品產生深刻的認同感。例如「潮汐」會根據時間場景和季節變化,播放不同的背景音樂來營造氛圍。雨聲、雷聲、風聲、潮水聲等讓人時刻感受到身臨其境的情境。

          如何提升UI設計的高級感?來看高手的深入分析!

          情感化設計可以拉近用戶與產品之間的距離,在更深的層面體現出對人性的關懷,為人們帶去情感上的愉悅和感動。洞悉用戶的行為,換位思考去滿足用戶的需求,情感交流就產生了。例如當你截屏了一張圖片,打開微信對話框時就會自動顯示這張圖片,提前預知了你發截圖的需求。

          如何提升UI設計的高級感?來看高手的深入分析!

          再例如很多觀眾都習慣了在電影結尾等彩蛋的習慣,因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結果只能白白浪費了時間。在「淘票票」上購買電影票時,你會發現影片詳情頁會有彩蛋提醒,告知你電影是否有彩蛋且彩蛋會出現在影片的什么位置。有了這個提示信息,就不必再為了不確定的彩蛋期待浪費時間啦。

          7. 有趣的細節設計

          俗話說:有趣的靈魂萬里挑一,可見有趣是可以引發交流進而讓人們產生積極的情緒。 在 UI 設計中,有些有趣的設計是隱形的,需要用戶自己去發現,當用戶找到這顆彩蛋時,就會獲得一份喜悅和樂趣,增強用戶對產品的探知欲。例如在電腦端打開 B 站的鬼畜區長按這個返回圖標 10 秒左右,你會打開鬼畜區的新世界(⊙o⊙)(友情提示:記得戴上耳機或調小音量)其實長按「返回頂部」10秒后網頁下方會出現一條黑框提示「嘗試輸入字母,發現鬼畜秘密」。按照提示乖乖輸入字母就會出現鬼畜明星劃過你的屏幕!

          如何提升UI設計的高級感?來看高手的深入分析!

          有些有趣的設計又是顯性的,目的是讓用戶與產品引發交流從而產生積極的情緒。例如成為優酷視頻會員,不僅可以尊享豐富的影視資源,還能讓自己的 ID 在發彈幕時使用劇集相關角色的頭像。帶角色扮演頭像的彈幕,讓發言更有劇集代入感。這個彩蛋的設置一方面強化了會員身份的尊貴感與特權性,一方面也豐富了彈幕區的多樣化,可謂一舉兩得了。

          如何提升UI設計的高級感?來看高手的深入分析!

          總的來說:UI 設計的“高級感”意味著在視覺層面要從細微之處著手,創造出精致富有設計感的畫面;另一方面要從情感化設計出發,使用戶與產品產生情感上的共鳴,獲得更高層次的使用體驗。

          寫在最后

          好的學習方式就是把日常積累的知識點匯總并講出來才能真正為自己所有,新的一年愿每位設計師都能繼續保持對設計&生活的激情和熱愛。希望這篇文章對你有所幫助。



          文章來源:優設網     作者:印跡



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

          為什么短視頻難逃【單列沉浸式】的真香定律?

          資深UI設計者

          編輯導語:如今可以說是短視頻時代,各種短視頻平臺充斥著我們的娛樂生活,在如此快節奏的時代,碎片化的時間剛好可以被短視頻滿足;本文作者分享了關于短視頻【單列沉浸式】的分析,我們一起來看一下。

          誰能統一短視頻領域?

          抖音?快手?還是視頻號?

          目前來看,這個答案是【單列沉浸式】。

          準確來說,單列沉浸式不是一款產品,而是一種產品形態。

          過去這一兩年,抖快兩極越發明顯,格局變化不劇烈的短視頻領域發生的一個還算比較明顯的變化是,所有的短視頻都開始在產品形態上向抖音看齊了。

          包括快手、微信視頻號,甚至微博小視頻,主流的短視頻產品都已經全面擁抱單列沉浸式。

          為什么短視頻難逃【單列沉浸式】的真香定律?

          圖:抖音(左1)、快手(左2)、視頻號(左3)、微博(左4)

          這是不是可以證明單列沉浸式就是短視頻消費的最佳形態?

          無論是成熟的老產品快手和微博,還是初出茅廬的新產品視頻號,為什么短視頻難逃單列沉浸式的真香定律?

          如果要找一個正確的角度去切入,主要包括三個維度:

          • 單列沉浸式更加適合短視頻消費;
          • 單列沉浸式讓用戶消費的時長增加;
          • 單列沉浸式的商業化更加理想;

          01

          單列VS雙列,沉浸式VS非沉浸式,到底區別在哪?為什么說單列沉浸式是更加適合短視頻的消費呢?

          短視頻是高度碎片化、kill time式的消費,這個消費有個非常大的特征,就是無腦,也就是用腦成本極低。

          為什么短視頻難逃【單列沉浸式】的真香定律?

          圖:系統1(左)、系統2(右)

          我們在刷短視頻的時候,大部分時間是處于左邊的系統 1 狀態,是快速的、本能的、自動化、情緒化的大腦工作狀態,用腦成本低。

          為什么同樣是2個小時,明明可以完整看完一部電影,很多人仍然選擇用短視頻來消費?就是因為看短視頻不需要動腦,只要被動的接受平臺投喂的多巴胺、腎上腺素和荷爾蒙,產生愉悅感就好。

          長短視頻獲得的快樂自然是不一樣的,長視頻雖然也大量充斥著價值極低的內容,但普遍認為長視頻的內容價值遠遠高于短視頻;因為長視頻是比較完整、系統的去闡述,比如說長時間鋪墊后的高潮、明線暗線的多方交織、一波三折、高潮迭起的情節等;而這些更加高級的價值感都是需要大腦去思考、分攤到時間上面才有意義的。

          用戶在看長視頻是相對高喚醒的狀態,在看短視頻是相對低喚醒的狀態。

          單列沉浸式是更加完美的契合這種無腦狀態的,因為它的消費成本更低、體驗更好。

          02

          首先是單列相比較于雙列,是更加短平快的消費方式,可以減少用戶的思考、選擇和操作。

          在單列中,用戶切換視頻只需要上下滑,播放完自動切換甚至無需成本;而雙列中,用戶需要返回重新選擇并點擊觀看;切換視頻的成本,雙列高于單列。

          為什么短視頻難逃【單列沉浸式】的真香定律?

          圖:單列消費路徑(左)、雙列消費路徑(右)

          短視頻因為時長極短,意味著用戶在單次消費的過程中會消費非常多的內容單元,每多消費一個內容單元,雙列與單列的成本差就會進一步擴大,雙列成本相對的就越高,單列成本越低。

          因為單列消費路徑短、消費成本低,在相同的時間內,單列比雙列能夠看到的視頻數就更多,效率就更高。

          當然,雙列可以給用戶更多的選擇,提高系統整體的容錯率,但是這個選擇的收益本身就不大;因為短視頻價值極低,時長又極短、消費成本極低,這代表著選擇的ROI低、選錯的成本也低。

          不妨將選擇的成本分攤到視頻消費時長中,長視頻因為時長很長就會比較劃算且必要性強,而短視頻因為時長極短就不劃算且必要性弱。

          而且現在推薦系統越來越準,在短視頻的消費中比人的主觀選擇還要準,基本上是抹掉了選擇帶來的收益,還省了選擇的成本。

          所以單列是比雙列更加適合短視頻的。

          而沉浸式為什么比非沉浸式更加合適,是因為沉浸式可以使用戶更快、更好的進入視頻情境之中;而忘記真實世界的情境,因為沒有其它視頻信息的干擾,能夠讓用戶只專注于當前的視頻。

          為什么短視頻難逃【單列沉浸式】的真香定律?

          圖:可對比視頻號單列沉浸式(左)和單列非沉浸式(右)

          抖音負責人張楠曾經將抖音的成功在消費端歸結為“全屏高清、音樂、個性化推薦、傳遞美好”四個因素。

          全屏高清其實對應的就是沉浸式的消費體驗。

          手機中的原生相機拍出來的視頻就是全屏的,如果將一模一樣的短視頻放在不同的尺寸上去看,全屏效果無論是視覺沖擊力,還是進入其中、身臨其境的感受上都是最強的。

          這說明全屏高清是當時沉浸式在視頻尺寸和清晰度上體驗最好的形態,到了現在,全屏依然是最佳,清晰度卻已經變成了1080P甚至更高。

          單列沉浸式的消費體驗更佳、成本更低,且非常適合短視頻這種無腦式的kill time消費,自然是最佳的消費形態。

          同時,這種形態也是產品上癮的基礎之一。

          03

          為什么刷抖音會上癮,停不下來,一刷不知不覺就一兩個小時了?

          主要的原因可以歸結為兩個,第一個是用戶持續無腦、愉悅的狀態,跟短視頻的內容有關;第二個則是因為單列沉浸式上下滑。

          沉浸式的視頻構建了專注的情境,讓人忘了時間的流逝;而單列上下滑切換視頻成本極低,切換時間極為短暫,這點非常重要;因為這意味著用戶基本無縫切換視頻,無腦、愉悅的狀態不會因為切換而被打斷;上下滑簡單、不用思考,容易形成習慣,甚至是自然反應。

          用戶打開抖音不知不覺就繼續看下去了,不喜歡就立即劃走,像個快樂的魔盒,沒有盡頭,自然而然就上癮了。

          上癮后用戶時長也就增加了。

          時長的增長可以看做是短視頻目前階段絕對的核心指標,首先是因為短視頻本來就是殺時間的利器,時長代表著一切;其次則是因為短視頻用戶數量的增長已經趨緩,只能靠爭奪時長來保持增長。

          • 時長增加,代表著平臺給用戶提供的價值增加,因為幫助用戶殺的時間變多了。
          • 時長增加,代表著用戶生命周期價值增加,因為可變現的時長也增加了,用戶給平臺貢獻的商業價值就變大了。
          • 時長增加,也代表著打擊了競爭對手,因為時長是絕對的存量競爭,人一天24小時是固定的。

          這也是為什么那些原本不是單列沉浸式的短視頻敢改版的原因,強推一個新的功能尚且要考慮用戶的舊習慣、是否接受、學習成本如何,何況這是完全另一種產品形態。

          單純拿用戶體驗提高是無法有效說動的,因為沒有數據去論證用戶體驗到底提沒提高、提高了多少,大廠的產品運營都背著嚴重的KPI或OKR,但是用戶時長的增長就是最有利的支持。

          04

          單列沉浸式對于平臺商業化的貢獻其實可以基本從單列的角度去分析,主要有兩個層面:

          NO.1 單列的變現效率遠高于雙列。

          以目前最主流的信息流廣告為例。

          單列比雙列消費的路徑短、成本低,同樣的時長內,單列比雙列能夠消費的視頻總數更多,也就意味著可消費的廣告更多。

          更重要的是,單列的內容推薦完全由系統決定,用戶無法選擇,系統對流量可以做到100%的精準把控,決定推薦給用戶內容就內容,決定推薦給用戶廣告就是廣告;抖音可以做到讓廣告跟內容一樣100%的曝光到用戶面前,目前抖音基本上是每5個內容就插一條廣告。

          雙列由于在消費路徑上,還需要用戶去選擇點擊觀看,意味著轉化路徑多了一個環節:從瀑布流的圖片封面到內容觀看的CTR轉化率。

          為什么短視頻難逃【單列沉浸式】的真香定律?

          雙列形態下,廣告的CTR是不可能達到跟內容一樣的。

          據快手《2019快手創作者報告》披露,快手的內容CTR為20%,但是根據【亂翻書】對實際從業者的訪談,內容CTR和廣告CTR的差距要比想象中更大,甚至達到5-10倍的差距,也就是廣告的CTR可能只達到1%-2%。

          當然,有人說雙列因為有了用戶主動選擇來表示較為明確的需求,所以理論上是可以為每個點擊收取更高的價格,類似于搜索廣告的價格遠大于展示廣告,有沒有可能正負為零,完全彌補曝光率的不足?

          很大程度上是不可能。

          雙列仍然是展示廣告,它跟單列的差距會在一個有限的范圍內,搜索廣告之所以點擊價高出這么多;除了明確的意圖帶來的高匹配度之外,另外一個很重要的就是搜索是比較急迫的需求,急迫的需求+高匹配度才使得搜索廣告的溢價高。

          而日常我們刷抖音快手這些娛樂性質的短視頻是沒有這些急迫的需求的,是需要短視頻平臺展示的廣告來切中或者激發我們需求的;這也是為什么雙列形態下,廣告的CTR達不到跟內容一樣的原因,娛樂性的內容跟廣告的內容是不統一的,用戶的心理接受度也不會很高——用戶上來是看包袱消磨時間的,不是買買買的,而人的主觀選擇也會趨向于避免廣告。

          那么單雙列展示廣告的點擊價的高低就來自于命中需求的準確程度+展示效果了,準確率由推薦系統決定,關乎算法和數據;而數據的維度是來自于非常多層面的,不僅僅只是點擊廣告的數據,所以這方面就算有差距也很難說差距多大;而展示效果的話,單列沉浸式的【大屏+視頻】的展示效果遠高過雙列下的【小屏+圖片】。

          所以很可能的結果是,單列和雙列的廣告點擊價之差在一個合理的范圍內,是很難完全抵消掉內容和廣告CTR的差距的。

          這樣綜合來看,單列的變現效率是高于雙列的。

          單列不僅增加了用戶整體變現的時長,同時也提高了整體變現的效率,因為增加的變現時長不僅僅來自于新增的總用戶時長,也來自于搶奪了其它消費形態下的時長;比如說快手的單列會搶奪雙列的時長,而因為單列變現效率比雙列高,所以也提升了變現時長在用戶消費總時長中的比例,提高了整體的變現效率。

          05

          NO.2 單列雙列會造成不同的內容生態,影響到公域和私域的強弱,進而影響到平臺的整體變現效率。

          單列相較會強內容、弱關系,因為單列完全是系統推薦什么看什么,容錯率低,系統往往就傾向于推薦頭部優質的內容;而雙列就弱內容、強關系,因為雙列除了系統推薦之外,還要用戶主動選擇,加強了整體的容錯率,所以系統推薦的內容就會更加多元。

          相較而言,前者私域弱、公域強,后者私域強、公域弱,而公域強才有利于平臺變現。

          公域強意味著平臺對于流量的掌控權,快手老員工就在內部信中提到:

          雙列下kol的私域流量粘性太高太強勢,很不利于我們把用戶的arpu(每用戶平均收入)持續做高(直播電商雖然現在勢頭很好,但本質是kol的私域流量太強,所以我們公域的短視頻推小店效果不好),那么今年流量分配也要重新調整……

          私域強是有利于平臺創作者,公域強才能肥了平臺自身,淘寶、拼多多和美團等超大型交易平臺之所以收入這么高都是因為強公域,更好的掌握了流量的分發權,進而更的變現;抖音之所以成為超級印鈔機,也是因為完全掌握了流量分發,公域能力極強。

          單列可以將流量的分發權更加集中在平臺的手上,提高了平臺整體的變現效率。

          或許是基于單列沉浸式在商業化上的這些優點,現在連以雙列和中視頻為主的B站都坐不住了,也開始加入單列沉浸式。

          為什么短視頻難逃【單列沉浸式】的真香定律?

          圖:B站的【單列沉浸式】

          B站因為文化氛圍好、私域強,無論留存還是用戶時長都很理想,但就是整體變現效率低:雙列下信息流廣告不好變現,同時也為了文化氛圍而束手束腳。

          新開一個單列沉浸式可以說是創造了新的消費場景,同時也有助于提高變現效率。但中視頻在B站的單列沉浸式的視頻中占據著比較大的比例,未必會真香。

          06

          短視頻之所以真香,歸根到底還是跟短視頻這種載體和消費場景密不可分。

          短視頻因為沖擊強(體驗好)、消費成本低,所以非常適合碎片化、kill time式的消費。

          沖擊強跟視頻這種載體有關,視頻比文字、圖片的沖擊性更強;

          而消費成本低則跟時長有關,因為時長極短,所以消費成本極低,同時時間彈性也極高,又因為時長短,很難承載比較有深度、有價值的內容;再加上碎片化的消費場景,所以用腦成本極低,看短視頻大多數時候都是無腦狀態。

          商業的進化必然是往體驗更好、成本更低、更加的方向去進化,單列比雙列、沉浸式比非沉浸式的體驗更好、消費成本更低,更符合短視頻碎片化、kill time式的無腦消費;

          但B站的中視頻已經有點脫離了這個場景,中視頻已經可以承載一些有深度、有價值的內容,很多人在B站也并非完全是單純的kill time,而是看財經、漲知識等,需要用腦思考,消費成本也比較高。

          在這個場景下,雙列的多選擇、強容錯就是有必要的,因為選擇的RIO變高了,選錯的成本也高了,所以B站做單列沉浸式未必會有短視頻這么香。

          當然,B站也可以學微博,單列沉浸式只展示短視頻,無異于在內部開一個抖音,創造一個完全的短視頻產品。

          具體會如何,拭目以待吧;希望對你有幫助。



          文章來源:人人都是產品經理  作者:頂尖產品思維

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



          模態和非模態對話框的應用場景和規則

          資深UI設計者

          模態和非模態對話框是一種非常常用的用戶界面元素,將用戶的注意力轉移到子任務上。那么何時使用,二者又有哪些區別呢?

          模態對話框會打斷用戶并要求采取措施。當需要將用戶的注意力轉移到重要信息上時,它們很合適。


          為了更好地理解模態對話框和非模態對話框之間的區別,讓我們看看術語“對話”和“模態”的含義。

          一個對話框(或對話)是指兩個人之間的對話。在用戶界面中,對話框是系統與用戶之間的“對話”,通常會向用戶請求信息或采取措施。


          用戶界面模式是特殊狀態,其中同一系統具有一些不同的用戶界面。每種模式可能帶有不同的命令,或者相同的命令(或操作)可能會產生不同的結果,具體取決于系統的模式。換句話說,在不同的模式下,相同的輸入將具有不同的結果。例如,打開Caps Lock的計算機處于特殊模式:所有鍵入的字母都將顯示為大寫字母。打開或關閉大寫鎖定時,鍵入字母會有不同的效果。或者,在Microsoft Word的“跟蹤更改”模式下,所有以前進行的編輯和注釋都是可見的(而在正常的默認模式下,不會對其進行跟蹤或顯示)。


          通過對“模式”和“對話框”的了解,我們可以輕松定義模式對話框。

          定義一個模式對話框是一個對話框,在主要內容和移動系統到需要用戶互動的一種特殊模式的頂部顯示。在用戶與模態對話框明確交互之前,此對話框將禁用主要內容。

          相反,模式(或無模式)對話框和窗口不會禁用主要內容:顯示對話框不會更改用戶界面的功能。對話框打開時,用戶可以繼續與主要內容進行交互(甚至移動窗口,最小化窗口等)。

          模態對話框最初旨在警告用戶錯誤或需要立即采取措施的其他系統狀態。在這些情況下,必須先中斷用戶才能解決錯誤。因此,將對話框放置在屏幕中間作為界面的焦點,使其非常有效。這種模式對話框的最大優點是它們引起了用戶的注意,并允許他們認識到問題并迅速進行了糾正。

          但是,這種原始用法已經發展起來,現在出于合法或不太合法的原因,有說服力地使用了模態對話框和窗口來吸引用戶的注意。

          模態對話框的缺點

          這是模式對話框引起的一些常見問題:

          他們需要立即關注。本質上,模態窗口是強制性的,需要用戶立即采取行動。由于對話框將系統置于不同的模式,因此用戶只有在確認對話框后才能繼續進行操作。

          • 它們中斷了用戶的工作流程。模態對話框迫使用戶擺脫他們最初正在處理的任務。每次中斷都會浪費時間和精力,這不僅是因為用戶必須對對話框進行尋址,而且還因為一旦他們恢復了原始任務,人們將不得不花費一些時間來恢復上下文。

          • 它們使用戶忘記他們在做什么。一旦上下文切換到其他任務,由于模態對話框帶來的額外認知負擔,人們可能會忘記與原始任務相關的一些細節。在這種情況下,恢復原始任務的上下文可能會更加困難。

          • 它們使用戶創建并解決了一個額外的目標-關閉對話框。出現對話框時,將向用戶的工作流程添加額外的步驟:讀取和理解對話框,然后對該對話框做出決定。除非對話理由充分并且確實包含重要信息,否則交互成本的這種增加可能會使用戶推遲。稍后我們將詳細說明這一點。

          • 它們在后臺阻止內容。當對話框出現在當前窗口的頂部時,它可以覆蓋重要內容并刪除上下文。結果,當對話框詢問與剛剛被遮蓋的信息有關的問題時,對對話框的響應可能會變得更加困難。

          由于這些缺點,模態對話框在用于非關鍵性活動時會出現問題。

          使用模態對話框的準則

          什么時候使用模式對話框合適?以下是一些指南,可幫助您確定是否確實需要模式對話框。

          1.使用模式對話框顯示重要警告,以防止或糾正嚴重錯誤。

          只要有可能丟失用戶的工作或某個動作可能造成破壞性且不可逆轉的后果,請中斷用戶以避免災難。

          要確定什么錯誤嚴重到足以引起模式對話框,請考慮以下事項:

          • 如果將用戶的注意力從任務上移開,這個問題會更容易或更難解決嗎?如果可能的話,最好避免人為錯誤。但是,一旦發生錯誤,如果錯誤消息顯示在主要內容中而不是模式對話框中,則可能更容易修復錯誤。例如,表單中的錯誤應在發生錯誤的頁面上報告,以便用戶在解決問題時可以參考錯誤消息。但是可以在模式對話框中顯示通知用戶她的計算機將在10秒后重新啟動,以確保用戶注意到該消息。

          • 錯誤是不可逆的嗎?不可逆的錯誤通常會導致信息丟失,這對于復雜且耗時的任務尤其有害。例如,對于電子商務企業而言,未能將項目添加到購物車可能是一個不幸的錯誤,但如果用戶沒有注意到微妙的通知,則它不是不可逆的(如果他們確實想要該項目,他們可以重做其操作)。另一方面,覆蓋文件或無法保存對數百張幻燈片的更改都是不可逆的操作,因此非常需要中斷,并且經常受到干擾。


          Microsoft Powerpoint使用模式對話框來防止不可逆的錯誤或意外的用戶操作,例如在不保存工作的情況下退出應用程序。


          Google Mail桌面應用程序:當用戶在郵件中包含“我已附加”或“請參閱附件”等關鍵短語后忘記附加文件時,將出現此模式對話框。此對話框可防止用戶錯誤(以及笨拙的后續電子郵件)。


          2.使用模式對話框要求用戶輸入對繼續當前過程至關重要的信息。

          當缺少信息會阻止系統繼續用戶啟動的過程時,模式對話框可以提示用戶輸入該信息。

          如下所示,Etsy使用模態窗口中斷用戶的登錄信息(當該用戶試圖將某項保存到收藏夾列表中時)。

          每當用戶嘗試執行需要進一步步驟才能執行的任務時,Etsy都會使用模式對話框。例如,當用戶嘗試將某個項目標記為“收藏夾”而用戶未登錄時,將出現一個對話框,以獲取執行所需操作所需的信息。


          3.模態對話框可用于將復雜的工作流程分成更簡單的步驟。

          對于工作流,更快并不總是更好。對于耗時且涉及精神(和情感)的任務,一次要索要大量信息可能是不堪重負的。在這些情況下,模態對話框可用于將復雜的信息分解為更簡單,更易消化的塊。向導是使用模態對話框的常見實例。

          但是,必須注意的是,具有多個步驟的模式只會延長花費在主要任務上的時間,從而使用戶更有可能一開始就忘記自己在做什么。因此,如果您必須執行多步驟模態,請讓用戶了解他們的進度,這樣他們就不會立即放棄。就是說,如果開始需要多個步驟,則可能有理由為其分配整頁。


          4.使用模式對話框詢問信息,如果提供這些信息,可能會大大減輕用戶的閱讀量或工作量。

          當所請求或提供的信息相關時,模態可以有效地工作,或者可以簡化當前任務的完成。

          就房地產網站Zillow.com而言,用戶無需帳戶或房地產經紀人即可瀏覽物業列表。但是,當他們嘗試與代理商聯系以獲取列表時,站點將顯示一個模式對話框,詢問他們是否已經有代理商。該信息對于立即進行下一步(聯系上市代理)并不重要,但在簡化未來的交互過程中仍然很有價值。該對話框使用漸進分析,并一次提出一個易于回答的問題。這些問題的承諾度很低,只關注相關細節。

          Zillow.com在用戶提交有關特定列表的查詢后,要求用戶提供更多信息。詢問用戶此時是否有房地產經紀人是有意義的點, 因為它減少了將來與其他代理進行冗余對話的機會。


          漸進分析的關鍵在于它們遵循用戶對工作流程的期望-中斷僅在它們與當前任務相關或有幫助時才有幫助。


          5.不要將模式對話框用于與當前用戶流程無關的非必要信息。

          如上所述,模態對話框對用戶具有許多缺點和成本。為了使這些費用合理,與任務和重要性的相關性應該很高。與用戶目標沒有直接關系的模態對話框被認為是令人討厭的,并且會減少對公司的信任。


          此外,當非優先信息以高優先級格式(如模式對話框)顯示時,用戶將拒絕關注此格式的其他實例。這就像伊索寓言中的“哭狼的男孩”一樣-反復誤導他人將使他們在真正需要時不會給予您信任。


          與普遍看法相反,郵件列表注冊雖然對于產生業務線索至關重要,但對用戶而言并不重要。在最近的一項網絡可用性研究中,我們聽到了與電子郵件通訊注冊有關的模態對話框的內在鄙視。


          GoodHousekeeping.com通過模式化的郵件列表對話框發揮了更大的作用-不僅停用了背景,而且還用全屏照片完全替換了背景,從而刪除了用戶在網站上的所有上下文。它也出現在用戶首次登陸網站首頁后的前3秒鐘內,使用戶沒有時間從該頁面上收集任何值。該對話框要求的信息對于用戶或其工作流程而言并非必不可少,并且幾乎不提供上下文或感知的價值。


          Wayfair使用模式對話框來請求用戶指定應將該項目固定在哪個板上。另一個UI元素(例如主要內容中的一個選項)將更適合于輸入此信息。底部:選定木板后,Wayfair使用模式對話框來要求用戶邀請朋友加入他們的木板-這對用戶來說不是必不可少的操作,并且會增加固定項目的交互成本。


          6.避免使用模態對話框中斷高風險的流程,例如結賬流程。

          結帳對用戶和企業都是高風險的過程:用戶希望確保該過程是安全和無錯誤的,而企業希望確保用戶遵循其購買決定。模態對話框(如果不需要的話)充其量會分散用戶的注意力,最壞的情況是削弱用戶的信心。

          較早的Walmart.com版本使用模式對話框提示用戶在結帳期間登錄。最好的情況是,這種模式可能會分散用戶的注意力,并引導他們進行全面的搜索以查找Walmart.com密碼,而不僅僅是以訪客身份完成結帳。在最壞的情況下,用戶可能會感到他們被迫開設一個帳戶,而這又會影響購買決定。此后,沃爾瑪重新設計了其網站以刪除該模式對話框(但重新設計也完全刪除了訪客結帳,現在要求用戶擁有一個結帳帳戶-坦白地說,這令人反感)。


          7.避免使用模態對話框進行復雜的決策,這需要模態中沒有可用的其他信息源。

          模態對話框應用于與用戶的簡短直接對話。如果模態要求用戶進行復雜的研究或咨詢其他信息源(可能被模態阻止),則該交互不是正確的UI元素。

          邊境航空公司使用模式對話框促進基本航班的加價銷售。該對話框要求用戶決定花更多的錢,但是不允許他們訪問做出該決定所需的其他信息(例如,是否還有剩余的體面座位)。


          請考慮使用非模式對話框

          在任務不是很關鍵的情況下,非模式對話框可能是合適的。非模式對話框的攻擊性不如模式對話框,因為它們允許用戶繼續其活動并在不相關時忽略它們。但是,它們仍然可能是破壞性的,特別是如果它們使屏幕上的重要信息模糊不清或需要太復雜的交互。

          此外,某些非模式對話框不能在設備和瀏覽器之間很好地轉換-例如,臺式機上的Chrome中的非模式窗口可能會在iPhone上的Safari中變為模式窗口,例如下面的Meowbox.com。

          在Meowbox.com桌面網站(左)上,主頁右下角顯示了用于時事通訊注冊的定時非模式對話框。但是,在網站的移動渲染(右)上,非模式窗口變為全屏模式窗口,迫使用戶在向前移動之前提供輸入。桌面版本允許輕松消除提示,而移動版本則不允許。


          當用戶需要在模式之間快速切換以訪問某些信息時,非模式窗口非常有用。例如,Google Mail使用非模式窗口作為編寫新電子郵件的默認方法。用戶可以繼續打開此窗口,在不丟失電子郵件的情況下最小化編寫的電子郵件(或選擇將其最大化到模式窗口)。該單獨的視圖使用戶可以查找較舊的電子郵件或其他信息,這些信息可能有助于撰寫當前電子郵件。


          Google Mail的非模式窗口使您可以輕松地在寫入和讀取信息之間進行切換。


          涉及模式對話框時,請考慮以下問題:沒有人喜歡被打擾,但如果必須的話,請確保值得這樣做。


          在使用對話框時,還有哪些需要注意的點呢?


          1.減少干擾

          謹慎使用對話框,因為它們會打斷他們。它們的突然出現迫使用戶停止其當前任務,并專注于對話框內容。對于模式對話框,用戶必須先進行對話操作,然后才能繼續訪問下面的頁面。有時這是一件好事,例如,當用戶必須確認一項重要操作時(例如“您要刪除您的帳戶嗎?”),但是對于許多任務而言,這是不必要的,而且通常很煩人。

          要求確認

          在需要用戶在繼續操作之前進行交互的情況下,或者當錯誤的代價可能很高時,使用對話框是最有意義的。


          不要突然打開對話框

          在用戶未做任何事情的情況下突然打開對話框是一個非常糟糕的主意。不幸的是,許多網站都用下面的示例用訂閱框轟炸了訪客。

          用戶在頁面上執行某項操作時,應該始終打開一個對話框。那可能是單擊按鈕,跟隨鏈接或選擇一個選項。

          tips

          • 并非一切都值得中斷

          • 對話框的替代方法是內聯擴展,可以幫助維護當前上下文。

          • 不要只是彈出對話框


          2.對話與現實世界之間的匹配

          對話框應該說出用戶的語言(使用用戶熟悉的單詞,短語和概念),而不是特殊的系統術語。

          明確的問題和選項

          您應該使用清晰的語言寫問題。例如,當您要求用戶刪除她的文件時,而不是說“釋放存儲空間?” 問“您要刪除文件嗎?” 通常,您應該避免道歉,模棱兩可或諸如“警告!”之類的問題。或“您確定嗎?” 因為它們會帶來額外的視覺混亂。


          避免為用戶提供含糊不清或不清楚的選項。您應該只使用清除選項。在大多數情況下,用戶應該能夠根據標題按鈕文本來理解選擇。

          錯誤的示例:在此示例中,輕蔑的操作文本“否”回答了問題,但沒有建議之后會發生什么。


          很好的例子:平等權利行動文本“放棄”清楚地表明了決定的結果。

          提供重要信息

          對話框不要遮蓋可能對用戶有用的信息,這一點很重要。例如,一個對話框,要求用戶確認某些項目的刪除,應列出要刪除的項目。


          提供信息反饋

          處理完成后,請記住顯示通知消息(或視覺反饋)。讓用戶知道她已經完成了所有需要的工作。

          tips

          • 在對話框中使用明確的問題和選項。

          • 設計對話框以產生閉合。

          • 操作后通知用戶。


          3.追求極簡主義

          不應該試圖過多地塞入對話框。保持其干凈簡潔(遵循KISS原則)。但是極簡主義并不意味著有限。所有信息都應該是有價值的相關的。

          元素數量和選項

          對話框永遠不應部分出現在屏幕上。您不應該使用包含滾動內容的對話框。

          錯誤的例子: 巴克萊銀行的付款處理對話框中有很多選項和元素,其中的一部分選項僅可通過滾動來使用(尤其是對于通常具有相對較小的屏幕區域的移動設備)。



          很好的例子: Stripe使用簡單而智能的對話框,僅包含基本信息,這些信息在臺式機和移動屏幕上都看起來不錯。

          操作數

          對話框不應包含兩個以上的動作。第三項操作(例如“了解更多信息”)通常用于使用戶離開對話框,這增加了未完成任務的風險。

          對話框中不要包含多個步驟

          將復雜的任務劃分為多個步驟是一個好主意,但這通常也表明某些事情太復雜而無法要求用戶在對話框中完成。


          如果交互足夠復雜,需要多個步驟(如下面的示例所示),那么它就足夠復雜,可以保證擁有自己的頁面。

          tips

          • 通過刪除不需要的元素或不支持用戶任務的內容來簡化對話框

          • 嘗試避免對話框包含多個步驟。

          4.選擇正確的對話框類型

          正如上面所介紹的,對話框有兩種主要類型。第一類是尋求注意力的模態對話框,它迫使用戶在繼續之前與他們進行交互。模態對話框通常用于離散的阻塞過程,需要顯式的“接受”或“取消”操作才能將其關閉。單擊其外部區域時,它不會關閉。第二種類型非模式對話框,允許用戶在其外部單擊或點擊以將其關閉。

          您僅應將模式對話框(第一種類型)用于非常重要的交互(例如,刪除帳戶,同意條款和條件)。

          系統對話框也是模態對話框,通常具有以下基本元素-內容,操作和標題。

          5.視覺一致性

          對話框的背景

          打開對話框時,重要的一點是要使后面的頁面稍微變暗。這有兩個工作。首先,通過對話框吸引人們關注疊加層;其次,它使用戶知道該頁面當前未處于活動狀態。

          但是要注意著色。如果您將其設置得太暗,則用戶將無法再在后臺看到頁面。如果將其設置得太淺,則用戶可能會認為該頁面仍處于活動狀態,甚至可能根本沒有注意到對話框。

          清除關閉選項

          右上角的對話框應該有關閉選項。許多對話框在窗口的一角都有一個“ x”按鈕,用戶可用來退出該窗口。但是,對于普通用戶而言,此“ x”按鈕并不是一個容易的逃生路線。單擊“ x”通常會花費更多的時間和精力,因為它的尺寸較小,用戶必須發現并單擊(點擊)它。

          允許用戶單擊非模式窗口時,可以退出非模式窗口,這是一個好主意。

          避免對話框啟動對話框

          對話框應避免啟動其他對話框,因為它們增加了視覺上的復雜性。

          tips

          • 大多數情況下,允許用戶單擊(或點擊)以關閉對話框(模態對話框除外)。

          • 對話框應避免啟動其他簡單對話框。

          結論

          模態和非模態對話框都非常有用,可以請求或鼓勵用戶參與。在決定這兩種類型的對話框時,請考慮用戶上下文和工作流程。避免不必要地打擾用戶并中斷他們的工作流程。使用戶更容易解決問題并實現目標。如果公司希望朝著業務目標持續發展,則在這些設計決策中必須優先考慮用戶目標。

          涉及模式對話框時,請考慮以下問題:沒有人喜歡被打擾,但如果必須的話,請值得確保這樣做。


          文章來源:站酷  作者:ZZIUP

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


          【PS必備技能】2.5D圖形制作規范

          前端達人

          【PS必備技能】2.5D圖形制作規范,用ps最簡單的方法讓你學會2.5d圖形設計!

           

          轉自:站酷

          作者:櫻桃教你學設計


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

          視覺設計基礎“四大原則”之《重復性》

          前端達人

          視覺設計基礎“四大原則”之《重復性》


          轉自:站酷

          作者:CB_張大偉


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

          TMT微信小程序-缺省頁

          前端達人

          公司微信小程序缺省


          轉自:站酷

          作者:cattie喵星


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

          【干貨】怎么做才能讓你的設計看起來更規范?

          ui設計分享達人

          如何制作視覺平衡的圖標,正確的形狀對齊以及完美的圓角

          文章來源:UI中國  作者:美膩膩nii

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

          可訪問性和可用性:為每個人設計一個更可用的界面

          ui設計分享達人

          如何一次只做一個小決策,創造一個更容易獲得和使用的體驗



          文章來源:站酷  作者:嗷ao

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




          引人注目的UX設計背后的心理學

          ui設計分享達人

           

          引人注目的UX設計背后的心理學

          每天,您都會在線訪問多個網站。他們中的一些給人留下了積極的印象,而另一些則使您在數毫秒內按下了后退按鈕。您最終從一個網站購買了產品,而不是從競爭對手那里獲得了產品。是什么引導這種行為?您為什么對某些網站感到滿意卻卻避開其他網站?

          這樣做的主要理由之一是在用戶體驗設計中實施心理學。您喜歡的網站聘用的UX專家知道如何在與網站交互的每個階段觸發心理反應。在線心理學的使用是成功的,因為我們在人類生存的幾個世紀中獲得的某些進化特征在我們每天與世界各地的互動中仍然發揮著重要作用。

          本文介紹了一些常見的UX元素以及它們背后的心理思維。




          有關服務或產品的建議

          例如,當您在機票預訂網站上時,會在預訂完成之前或之后獲得有關酒店,餐廳或旅游選項的建議。在許多情況下,如果價格足夠誘人,人們就會繼續預訂酒店或在餐廳預訂。當您搜索抵押貸款時,同樣適用,并且您還會獲得有關債務管理或退休計劃的建議。

          圖片:Skyscanner



          這是一種稱為“預期設計”的UX創意。目的是根據您在網站上查看的內容來建議您最可能需要的其他內容。這個設計思想是基于當我們在互動中感到被理解時更快樂的心理原理。這在所有領先的電子商務門戶網站上也可以看到。

          圖片:Flipkart



          這種UX設計的一種變體是在許多網站上延遲顯示彈出框以進行加價銷售或潛在客戶。這也是可以預見的,因為它基于這樣一個事實,即許多用戶直到從站點上花費的時間中獲得了一定的滿意,才會對彈出框的內容不感興趣。

          顯著性原則是另一個鼓勵用戶體驗設計決定的心理原則。它說人們將注意力集中在當時與他們最相關的事物上。因此,正在尋找飛往夏威夷的廉價航班的度假者將很高興看到提供經濟實惠的住宿,甚至為他們的旅行提供融資選擇。僅登陸頁面以讀取癥狀的用戶將僅關注頁面的內容,而不關注訂閱彈出窗口。



          限制用戶選項

          您選擇的網站比強迫您跳過五個菜單來查找相同內容的網站更容易找到。這是因為我們發現很難做出決定時,有太多的選擇。這是基于希克定律的心理原理:選擇的負擔。

          圖片:Apple



          最好的UX設計人員了解這一點,并確保用戶可以找到所需的信息,產品或服務而不會感到不知所措。

          搶眼設計

          圖片:例如葡萄酒




          如果網站或應用程序的設計精美(根據用戶的描述),則立即導致對品牌的有利傾向。這是一種心理原理,稱為審美可用性效應。如果您的網站漂亮,那么普通用戶就會相信它比同一個利基網站的其他功能更實用,更值得信賴。關于吸引力的這種偏見也可以在離線狀態下看到,因為研究表明,更具吸引力的人被認為比其他人更有能力和更友好。

          此外,引人注目的設計可能使人們忽略網站或應用程序上的其他缺點。頂尖的UX設計人員花費必要的時間來獲得任何項目的最佳美學效果也就不足為奇了。


          醒目的顏色口音

          圖片:Paypal




          諸如Trustly,PayPal,FreshBooks之類的品牌,以及您日常遇到的許多其他品牌都使用顏色強調點,以使您的眼睛指向CTA按鈕,注冊表格等。網站上的主要顏色為藍色時,它們使用綠色,紅色或黃色來表示突出這些區域,它會起作用!這些網站的任何訪問者都可能會錯過頁面上的其他內容,但會看到這些部分以獨特的口音仔細突出顯示。

          這是基于赫德維格·馮·雷斯托夫(Hedwig von Restorff)的心理對比原理,即人類更容易記住那些與其周圍環境脫穎而出的東西。有趣的是,沒有顏色被認為是最有影響力的。UX設計人員只需確定主導的顏色主題,并使用不會混入背景的另一種顏色作為重點選擇。



          產品差異化價格計劃

          這也稱為“金發姑娘”定價技術。企業使用這種技術來銷售“中檔”產品。當您四處尋找虛擬主機計劃時,您可能會看到更多。提供商通常列出三到五個訂閱計劃,并將中間計劃突出顯示為“受歡迎”或“熱門”。

          圖片:Acowebs




          許多人立即分析出最昂貴的計劃和最便宜的計劃,最終選擇了所謂的中端計劃。這是因為他們將其視為最高價值計劃和入門級計劃之間的完美中間地帶。有趣的是,這些中端計劃的價格沒有像其他任何人一樣受到嚴格審查,這使得它們成為提供這些品牌的品牌中最賺錢的。


          這種定價技術之所以有效,是因為它基于取景的心理原理,該原理強調了人們在做出購買等決策時如何避免極端情況。它還顯示了選擇的呈現方式如何影響決策過程。


          其他領域的更多用戶體驗設計師正在采用這一原理?,F在,各種電子商務商店都提供多層定價結構或提供價格不同的相似產品。大型科技品牌也不例外。他們可能是這一原則的最大受益者之一。因此,下一次您發現自己忽略了中端選項規格,規格稍高但仍低于最貴機型的三星Galaxy設備時,您就知道了!

          這是另一個例子。



          圖片:SEObirth



          限時優惠

          電子商務網站已經完善了使用限時報價創造產品需求的技巧。一些品牌會聲明要約/產品“僅在接下來的X天內可用”,而其他品牌如亞馬遜將顯示詳細信息,例如“僅剩5個庫存”。無論哪種樣式,兩種策略都旨在引起您的相同反應:緊迫感,因為該產品很快將不再可用。

          圖片:亞馬遜



          這是基于稀缺性的心理學原理,該原理指出,與到處都有的物品相比,我們傾向于更加重視稀缺或不可用的物品。一個1975年的研究證實了這一原則。研究人員將相同類型的曲奇放在兩個罐子中,但是第一個罐子有10個曲奇,而第二個罐子只有兩個曲奇。研究參與者對第二個罐子的評價高于第一個罐子。


          研究還發現,人們對以前豐富但現在稀缺的產品的評價要比總是稀缺的產品更有價值。經濟學專業的學生不會對此感到驚訝,因為可用性的下降總是會觸發需求的增長。


          除電子商務網站外,其他具有在線形象的品牌也采用稀缺性原則。出售在線課程的企業家強調諸如“僅適用于前10名學生”,“一周內結束”之類的術語。其他人則為采取特定行動的人們提供獨家利益,例如提交電子郵件地址,支付服務費用等。 。


          當品牌試圖銷售“限量版”產品時,該原則也可以在離線營銷中看到。


          UX設計師之所以采用這種技術,是因為他們知道,即使產品或服務沒有迫切需求,人們在產品或服務稀缺的情況下也會注意。


          推薦書的戰略定位

          圖片:ElegantReports


          有沒有想過為什么許多產品或服務網站的主頁上都有推薦?為什么在做出購買決定之前總是要尋找推薦?這是因為社會證明的心理學原理。


          當我們對任何事情都持懷疑態度時,我們會尋求同行的指導。這就是為什么您會發現人們在選擇公司之前先在社交媒體上要求評論特定品牌的原因。在1969年社會科學實驗強調了這一先天行為。研究表明,如果已經有足夠的人參與,人們至少可以說服人們注意某些事情。


          除了推薦之外,UX設計師還通過炫耀可信賴的從屬關系(例如SEO專家從事的業務或以作家為特色的博客)來結合社會證明原則,訂戶數量,帖子中的股份數量以及產品的等級或服務,甚至獲得的獎勵數量。

          圖片:Acodez


          電子商務商店通過顯示名為“客戶也已購買的商品”的部分來使它更進一步,以突出顯示可能會使用戶感興趣的流行產品。


          突出贈品

          圖片:皮特和佩德羅


          如果您免費提供某些商品,在線用戶現在或將來更有可能從您的品牌購買商品。這是基于互惠的心理原理。這就是為什么許多UX設計師強調任何交易的原因。


          如果您要購買新鞋,則更有可能選擇在其網站上提供“免費送貨”的品牌。同樣,您也可以在提供免費指南或免費咨詢的登錄頁面上提交聯系方式。


          UX設計師結合對比和互惠的心理原理來創建高度轉換的頁面。


          結論


          達到既定目標的引人注目的UX設計并非偶然。最好的設計師知道,在線成功的關鍵是要吸引一般用戶群的基本本質,他們會運用心理原理來實現這一目標。人類的在線行為是可以預測的。結合心理學和用戶體驗設計,您的品牌可以產生更好的結果。

          文章來源:UI中國  作者:Shawn

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

          官方解讀來了:淘寶品牌LOGO升級

          ui設計分享達人


          全新的2021已經到來,在這個適合展望未來的時候,淘寶也迎來了品牌形象的升級,一個萬象更新的淘寶正在向我們走來。

          全新的2021已經到來,在這個適合展望未來的時候,淘寶也迎來了品牌形象的升級,一個萬象更新的淘寶正在向我們走來。

          “淘寶直播很有趣味”,“淘寶人生很新潮”,“淘寶更好逛了”越來越多的用戶在感受淘寶的新變化。新淘寶,讓用戶在“淘好物”過程中更能感受到“逛”的樂趣,從產品、直播等多場景多維度帶給用戶全新體驗。作為淘寶的鏡子,我們的品牌也伴隨著產品的升級,在設計層面表達了全新內核。


          設計思路

          在新淘寶的大背景下,設計的挑戰在于如何將抽象的心智具象表達。此次品牌設計將圍繞“連接”“開放”“有趣”三大設計理念透過字體傳達淘寶的品牌新內核。

          連筆&連接

          在新的字體中將有粘連但又不夠流暢的筆畫結構,讓它們“一氣呵成”起來,通過連筆來表達“連接”,它寓意了新淘寶要更好地連接商業、用戶和內容。

          空隙&開放

          “通透”是新的字體比較直觀的感覺,讓字體本身結構上有“呼吸”的空間,它代表了新淘寶對外能夠提供充足的空間,同時也將生態體系打開,從而吸收更多的資源共贏共創。

          弧度&有趣

          新的字體在彎折筆畫的連接處做了弧度處理,讓整個字體看起來更加有活力,它要展現的是新淘寶將產出更加豐富多樣的內容,讓消費者能體驗到更多趣味且好逛。


          我們的聯合設計伙伴

          很榮幸本次升級邀請到了國內著名的字體設計廠商方正字庫與知名品牌設計公司MetaDesign一起聯合完成我們的LOGO設計,整個過程中都提供了非常專業的指導。


          設計解讀

          全新“淘寶”品牌標識,充分融合了中華傳統書法文化和現代的設計語言、設計手法,呈現出多元、豐富、有趣的品牌面貌。

          寫意&節奏

          全新升級的“淘寶”特別注入了自然書寫的筆勢,將寫意融入設計之中。在設計上借鑒了行書的技法,在字體的筆勢相承之處運用連筆書寫,線條流暢自如,筆畫之間氣息貫注、流動和諧。

          連筆

          蓄勢&能量

          字體部件的設計突出了筆畫的血脈與氣勢,字體起筆處注入能量,轉折時意氣相聚,呈現出蓄勢待發的姿態,末尾的鉤畫收筆果斷,整體給人一種勢如破竹、一氣呵成的視覺感受。

          蓄勢

          “淘寶”橫畫起筆處采取直切手法,如逆鋒蓄勢,運筆時線條微弧上揚,收筆處筆畫輕提,筆勢流麗、煥發風采。

          橫畫上揚

          精細&整體

          新“淘寶”的設計細節精微生動,通過適當的減細、避讓,字體筆畫結構緊密得當,布白停勻、筋骨相諧,穿插避讓恰到好處。

          避讓

          兩個單字點畫的筆形渾圓一致、遙相呼應,形成左右顧盼的姿態,文字之間脈絡貫通,構成一個有機的整體。

          呼應


          升級中英文字標,讓形象更統一更聚焦

          中英文字標互相呼應;英文字標需要足夠簡約才能滿足LOGO以中文為主,英文為輔的傳播需求。

          為數字化時代而生

          優化LOGO的筆劃及布白,提高LOGO在數字端上小尺寸下的可識別度。

          當淘寶的中文字標設計逐漸成型,我們希望英文字標能承載相同的設計理念。

          ‘T’的橫畫呼應中文的橫劃特征:微弧上揚,以流暢的圓角收筆。

          ‘a’維持雙層結構,更能與相鄰的‘o’更能區分,保持高的視別度;頂部的拱形弧線與淘字的‘勹’部筆勢互相呼應。

          開放’o’字的內白,平衡筆劃粗細的變化;確保外輪廓的弧線圖滑流暢,使造形更豐富生動。

          升級后的英文字標彰顯中文字標的設計精髓,與時并進。

          新淘寶,新品牌,新形象。為了能夠讓用戶對于品牌有更具體的認知,此次品牌升級還創造了淘寶自己的超級符號,結合業務豐富的場景,讓視覺語言更具專屬性和多樣性,讓用戶更好的感知到,一個更連接用戶、更開放平臺、更充滿趣味的新淘寶正在走來。


          文章來源:UI中國  作者:AlibabaDesign

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

          日歷

          鏈接

          個人資料

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

          存檔

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