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

          首頁

          3D to H5工作流應用手冊:理論篇

          資深UI設計者

          前言

          設計師需求中 3D 視覺平移到互動 H5 中的項目越來越多,three.js 和 PBR 工作流的結合卻一直沒有被系統化地整理。

          和各位前端神仙一起做項目,也一起磕磕碰碰出了愛與痛的領悟。小小總結,希望 3D 去往 H5 的道路天塹變通途。

          本手冊主要分為兩大部分:

          Part 1 理論篇:主要讓設計師了解計算機到底是如何理解和實時渲染我們設計的 3D 項目,以及 three.js 材質和預期材質的對應關系。

          Part 2 實踐篇:基于 three.js 的實現性,提供場景、材質貼圖的制作思路、以及 gltf 工作流,并動態討論項目常常遇到的還原問題。

          本文主要面向剛接觸 3D 圖形學的設計師,僅截取了最常用的理論知識和大家一起學習;部分涉及技術美術或計算機圖形學的描述可能不甚嚴謹,希望大家多多交流討論哈。

          其實無論 H5 開發用到的是哪種 webGL,設計相關的材質制作基本還是基于 PBR 思路進行的,所以這邊建議各位親可以先去閱讀一下 Substance 官方寶冊《The PBR Guide》。

          Part 1 理論篇

          設計師在還原 3D 類型的互動 H5 項目的時候一定想過這個宇宙終極問題:為什么 H5/Web 實現的 3D 效果和 C4D 里渲染出來的差異那么大?

          其實這是我們對實時渲染引擎(UE、Unity、three.js 等)和離線渲染工具(Redshift、Octane、Vray 等)的差異存在誤解:一是離線渲染工具是基于真實光照環境來計算每顆像素的著色,實時渲染如果要實現這種效果需要耗費更多硬件基礎和算力去模擬光照(沒個好顯卡都開不動光追)。

          雖然 UE5 的實時渲染技術和硬件兼容性已經讓大家大吃一驚,但在實際項目,尤其是需要兼容低端設備的 H5 來說,渲染能力還是相對有限的。二是對于游戲或 H5 互動網站實際應用來說,流暢的互動體驗優先級往往高于畫面精細度,所以犧牲視覺保性能也是常見情況。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 1-Octane 離線渲染效果 vs three.js 實時渲染效果:材質細節、全局光照及投影、以及抗鋸齒表現差距明顯

          當實時渲染效果與設計預期差距過大時,設計師能多了解一些基礎的計算機圖形學,也許就能更好地和開發同學商討性價比更高的視覺實現和資源優化方案(以及更多 Battle 的籌碼)。

          1. 著色器與著色算法差異(硬核預警)

          首先我們要知道計算機之所以能在 2D 屏幕上畫出 3D 的圖像,是因為有著色器(Shader)在繪制,它將我們三維空間里的模型與光照信息進行轉換,并光柵化為二維圖像。在計算機圖形學中,著色器是用于對圖像的材質(光照、亮度、顏色)進行處理的程式。

          常用的著色器分為四種:像素/片元著色器(Pixel/Fragment Shader)、頂點著色器(Vertex Shader)、幾何著色器(Geometry Shader)、細分曲面著色器(Tessellation Shader)。

          像素/片元著色器與頂點著色器(Vertex Shader)在 webGL 處理過程中都有使用,頂點著色器先將模型中每個頂點的位置、紋理坐標、顏色等信息進行轉換裝配,再由片元著色器對 3D 信息光柵化并轉換成 2D 屏幕信息。(關于著色器差異,感興趣的同學可以直接跳到附錄查看。)

          著色器是怎么把頂點中所帶有光照、紋理等信息轉換并重建在二維圖像的像素中呢?GPU 中是透過不同的著色算法來實現的。

          一種是獲取每個三角形的插值(Interpolate)來實現,這種方法稱作 Per Vertex Lighting,但是當三角型很大的時候,插值往往不夠精準。此時還可以引用另一種方法 Per Pixel Lighting,計算每個像素的光照信息,獲得更好的渲染效果,但是往往也帶來更大的計算量。

          一般常見計算機圖形著色算法有三類:Flat Shading、Gouraud Shading、Phong Shading。這些算法雖然看起來和我們設計師沒啥關系,但事實上在后面了解 three.js 材質時,就會發現他們在呈現時的差異。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 2-Flat、Gouraud、Blinn-Phong 著色法比較 [ F1, ©?Stefano Scheggi ]

          平直著色法 Flat Shading

          這種著色法認為模型中所有面都是平的,同一個多邊形上的任意點的法線方向都相同。著色時,會優先選擇多邊形的第一個頂點或三角形的幾何中心計算顏色。這種著色法實踐上的效果很像低面模型,也比較適合使用在高速渲染的場景。值得注意的是,這種著色法難以做出平滑高光效果。

          高洛德平滑著色法 Gouraud Shading

          這是一種平滑的著色方法,在著色時會先計算三角形每個頂點的光照特性,利用雙線插值去補齊三角形區域內其他像素的顏色。這個著色法比起平直著色法增加了插值的細節,而且也比 Phong 著色法渲染單個像素的光照特性的性能要高。

          但是在渲染高光時,可能會因為無法獲取精確的光照值而出現一些不自然的過渡(或 T 型連接容易被錯誤繪制),此時可以考慮對模型進行細分或使用漫反射材質。

          Phong 平滑著色法 Phong Shading

          與 Gouraud Shading 不同的是,它會對頂點的法線進行插值,并透過每個像素的法向量計算光照特性。這種做法能繪制出精致、精準的曲面,但是計算量較大。Blinn-Phong 是 Phong 的進階版,著色性能更好,且高光彌散更自然。

          2. 基本光照模型 Illumination Model

          簡單了解計算機如何繪制 3D 圖形后,再來看看它要如何具體理解我們所設計的 3D 場景。

          3D 轉換成 2D,也就是 3D 柵格化的過程中,每一個像素的顏色是需要基于它所在的環境計算出來,而基于被渲染物體表面某個點的光強度計算模型就被稱為光照明模型(Illumination Model)或光照模型(Light Model),透過計算光照模型所得到表面位置對應像素顏色的過程被稱為表面繪制(Surface Render)。

          *請注意這里說的光照模型并不是指設計師理解的 3D 立體模型,而是指模型對象表面光照效果的數學計算模型。

          影響光照模型的因素有兩大方面,一是本身給渲染物體材質設置的各種光學特性(顏色反射系數、表面紋理、透明度等),二是場景中光源光及環境光(場景中各個被照明對象的反射光)。

          傳統光照模型都是對漫反射和鏡面反射的理想化模擬,如果要還原基于真實物理世界的效果,光照模型需要遵循能量守恒定律:一個物體能反射的光必然少于它接受的光。在實踐層面則表現為,一個漫反射更強且更粗糙的物體會反射更暗且范圍更大的高光,反之亦反。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©?Joe Wilson ]

          光照模型與著色組合在不同的渲染需求下也會有不同的應用:

          • 真實感渲染(Photorealistic Rendering):目的是基于真實物理世界對 3D 場景進行仿真還原。
          • 非真實感渲染(Unphotorealistic Rendering):也被成為風格化渲染(Stylistic Rendering),會更抽象化地對模型進行重繪。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 4-真實感渲染及非真實感渲染對比 [ F3, ©?Autodesk ]

          真實感渲染 Photorealistic Rendering

          考慮到真實感渲染對硬件的依賴,目前 webGL 中使用的一般以簡單的局部光照模型為主(只計算光源對物體的光照效果,不計算物體間的相互影響,我們看到的“假反射”通常透過貼圖來進行模擬),根據反射形態,經典的光照模型有下列幾種:

          • Lambert 漫反射模型:

          這種模型的粗糙表面(如塑料、石材等)會將反射光從各個方向反射出去,而這種光反射也稱為漫反射。理想的漫反射體我們通常稱作郎伯反射體(Lambertian Reflectors),也就是我們熟悉的橡膠材質。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 5-漫反射模型與其他光照模型對比 [ F4, ©?ViroCore ]

          • Phong 鏡面反射模型:

          這是一種以實驗及觀察為合成基礎的非物理模型。它的表面反射同時結合了粗糙表面漫反射和光滑表面鏡面反射,但 Phong 模型在高光處的表現有過渡瑕疵。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 6-Phong 鏡面反射模型視覺構成 [ F5 ]

          • Blinn–Phong 模型:

          是在 OpenGL 和 Direct3D 里默認的著色模型,一種調優后的非物理的 Phong 模型,頂點間的像素插值使用 Gouraud 著色算法,比 Phong 著色算法性能更好,而且高光效果也更平滑。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 7-Phong 及 Blinn-Phong 鏡面反射模型對比 [ F6 ]

          • Cook-Torrance/GGX 光照模型:

          如果你用過 C4D 的默認渲染器,那么一定在材質的反射通道設置中見過它倆。

          這是相對高級的光照模型,不同于 Phong 和 Blinn-Phong 模型僅僅對漫反射及鏡面反射進行理想化模擬,這兩個光照模型基于不同物理材質加入了微表面(Microfacet)的概念,并考慮到表面粗糙度對反射的影響,對鏡面反射進行了調優,使得高光的長尾彌散更加自然,也是目前 PBR 渲染管線(Unity、UE)中較常用的光照模型。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 8-Phong、Blinn-Phong 與 GGX 鏡面反射模型對比 [ F7, ©?ridgestd ]

          • 次表面散射模型 Subsurface scattering/SSS:

          終于有一個設計師們常見的概念了。次表面散射是指光穿透不透明物體時(皮膚、液體、毛玻璃等)的散射現象?,F實生活中,大部分物體都是半透明的,光會先穿透物體表面,繼而在物體內被吸收、多次反射、然后在不同的點穿出物體。以皮膚為例,只有大概 6%的反射是直接反射,而 94%的反射都是次表面散射。

          BSSRDF(雙向次表面反射分布函數)是用于描述入射光在介質內部的光照模型,目前也被應用在最新的虛擬角色皮膚實時渲染中;但由于 SSS 材質的計算需要依賴深度/厚度數據,所以 webGL 對這種高級光照效果的還原程度還是相對有限的。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 9-Unity 中模擬次表面散射光照模型效果 [ F8, ©?Alan Zucconi ]

          非真實感渲染 Unphotorealistic Rendering

          也就是我們常說的 3 渲 2,非寫實渲染風格也是從人們對 3D 場景套以 2D 繪畫或自然媒體材質需求而演化過來的。因此非寫實渲染技術實際上是不同光照模型+不同著色處理共同作用的風格化輸出,目前也被大量應用在動畫及游戲中,像《英雄聯盟:雙城之戰》《蜘蛛俠:平行宇宙》都是頂級三渲二大作。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 10-在不同通道中混合應用真實感渲染及非真實感渲染效果 [ F9, ©?Polygon Runway]

          • Cel Shading/Toon Shading:

          卡通著色,一種最常見的以 3D 技術模擬扁平風格的著色形式,通常以極簡的顏色、漸變及明確的外框線等漫畫元素作為風格特征。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 11-Blender 中不同類型的 Toon Shader 效果 [ F10, ©?Blendernpr]

          日本創意編程師 Misaki Nakano 制作了一個非常有趣的 Toon Shading H5 互動頁面,大家可以體驗一下不同著色形態下非常模型的視覺表現。點擊體驗: https://mnmxmx.github.io/toon-shading/dst/index.html

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 12-Misaki Nakano 的 Toon Shader 互動網站 [ F11, ©?Misaki Nakano]

          • Customized Shading:

          目前越來越多渲染器可支持設計師及工程師根據項目需求對著色進行定制化處理,以產出更具風格化和藝術化的著色效果。例如工業界插畫常用的冷暖著色(Gooch Shading),以及更具繪畫質感的素描著色(Hatching)及油畫水墨畫等自然媒體著色,都已經深入到了我們日常的創作之中。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 13-在 Unity 中,基于真實感渲染的貼圖效果與 NPR 水墨風格化著色效果對比 [ F11, ©?鄧佳迪]

          3. Three.js 材質著色對比

          說完真實感與非真實感渲染差異后,我們再來看看 Three.js 中的材質。

          和許多渲染引擎一樣,除了原生材質外,webGL 的材質和著色都是可以根據需求進行定制的,但這往往會也帶來較高的開發成本及兼容性風險。考慮到 H5 項目的實際應用場景,下表羅列了 Three.js 原生材質的對比,包含了材質特性優勢、貼圖差異及適用場景,大家可以基于項目需求快速選擇并混合使用:

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 15 – three.js 材質對比表

          4. 色彩描述與管理 Color Space

          雖然著色、光照模型以及材質渲染對 3D 表現有著最為直觀的影響,但 3D 工作流仍有一個隱秘而關鍵的環節——色彩管理。

          真實世界中按照物理定律,如果光的強度增加一倍,那么亮度也會增加一倍,這是線性的關系。理想狀態下,像素在顯示屏上的亮度也應為線性關系,才能符合人眼對真實世界的觀察效果(如圖 b:橫坐標為像素的物理亮度,縱坐標為像素顯示時的實際亮度)。

          但是顯示器的成像由于電壓的影響,導致輸出亮度與電壓的關系是一個亮度等于電壓的 1.7-2.3 次冪的非線性關系,這就導致了當電壓線性變化時,亮度的變化在暗處轉換時變慢,如果顯示器不經過矯正,暗部成色也會整體偏暗(如圖 c)。目前大多數顯示器的 Gamma 值約為 2.2,所以也可以理解 Gamma2.2 是所有顯示器自帶的一個遺傳病。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 15-紅色上曲線=Gamma0.45=sRGB Space;綠色下曲線=Gamma2.2=顯示器真實成像缺陷;藍色斜線=Gamma1.0=Linear Space 真實物理世界線性關系

          為了矯正顯示器的非線性問題(從圖 c 校正回圖 b),我們需要對它進行一個 2.2 次冪的逆運算(如圖 a),在數學上,這是一個約 0.45 的冪運算(Gamma0.45)。經過 0.45 冪運算,再由顯示器經過 2.2 次冪輸出,最后的顏色就和實際物理空間的一致了,這套校正的操作就是伽馬校正(Gamma Correction)。

          而我們常見的 sRGB 就是 Gamma0.45 所在的色彩空間,是 1996 由微軟與惠普共同開發的標準色彩空間。當照片素材一開始儲存成 sRGB 空間,相當于自帶一個 Gamma0.45 的遺傳病抗體,當它被顯示器顯示時,就自動中和了顯示器 Gamma2.2 的缺陷,從而顯示出與物理世界相符的亮度。

          另一個校正原因是因為人眼在接受光線時的敏感度也不是線性的,人對于暗部的感知更敏感,對高亮區域感知較弱,而且人眼感知光強度與光的物理強度也剛好是對數關系。為了在暗部呈現更多人眼可感知的細節,Gamma0.45 的色彩空間中(如圖 a),像素的實際亮度也會高于它的物理亮度。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 16-人眼感知光強度與發射光真實物理強度對比

          上面那一大段確實有點繞,但也就說回來為什么建議渲染時使用線性空間(Linear Space)了。因為在計算機圖形中,著色器的運算基本上都是基于物理世界的光照模型來保證渲染真實性的,如果模型的紋理輸入值是非線性的(sRGB),那么運算的前提就不統一,輸出的結果自然就不那么真實了。

          而在大多數工作流及渲染軟件中,大部分貼圖資源都是默認輸出 sRGB 的(設計師作圖環境一般也在 sRGB,所見即所得),而法線貼圖、光線貼圖等紋理(純數值類紋理,只用于計算)又是 Linear 的,這個部分就需要我們根據渲染引擎本身的特性,來判斷是否需要對不同的貼圖進行不同的“去 Gamma 化”處理了(WebGL、Unity、Octane 等)。

          將所有貼圖進行去 Gamma 化,統一為 Linear 空間后,再在渲染輸出時由引擎統一進行 Gamma 校正,這個時候在顯示屏里顯示的就是接近真實世界的效果了。

          更多色彩空間的實際效果比較,大家可以看下 Unity 的文檔:《Linear/Gamma 渲染比較》:https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html

          回到 H5 所用的 Three.js,它的著色器計算也是默認在 Linear 空間,如果最終渲染時不轉化為 sRGB,在設備顯示時可能會造成色彩失真。在 three.js 中色彩管理的工作流會根據導入模型 Asset 的差異而有所不同,如果貼圖與模型是分別導入場景,則建議可嘗試以下流程:

          1. 輸入貼圖數據 sRGB to Linear: 含色彩的貼圖(基礎材質、環境、發光)設編碼為 sRGB(texture.encoding = sRGBEncoding),或將渲染設置 renderer.gammaInput 設為 True,可將原為 sRGB 的貼圖轉換為 Linear,而原純數值類貼圖(法線、凹凸等)仍舊保持 Linear;這一操作可保證貼圖輸入數據的正確性與統一性。

          2. 刷新材質:當材質編碼類型被修改后,需要設置 Material.needsUpdate 為 True,以重新編譯材質。

          3. 輸出渲染 Linear to sRGB: 校正渲染輸出值的 Gamma:

          renderer.gammaOutput = true; renderer.gammaFactor = 2.2;以供顯示屏正確顯色。

          《Part1-理論篇》就先告一段落啦,如果你偶發失眠,建議可以反復咀嚼延伸閱讀的內容。

          《Part2-實踐篇》會繼續完善 three.js 場景、材質貼圖的制作思路、以及 gltf 工作流,并動態討論項目常常遇到的還原問題。

          2022,咱們需求再見。

          附錄

          1. 著色器差異

          像素著色器 Pixel Shader

          也稱為片元/片段著色器(Fragment Shader), 為二維著色器。它記錄了每一個像素的顏色、深度、透明度信息。最簡單的像素著色器可用于記錄顏色,像素著色器通常使用相同的色階來表示光照屬性,以實現凹凸、陰影、高光、透明度等貼圖。同時,他們也可以用來修改每個像素的深度(Z-buffering)。

          但是在 3D 圖像中,像素著色器可能無法實現一些復雜的效果,因為它只能控制獨立的像素而并不含有場景中模型的頂點信息。不過,像素著色器擁有屏幕的坐標信息,可以依據屏幕或鄰近像素的的材質進行采樣并增強,例如,Cel Shader 的邊緣強化或一些后期的模糊效果。

          頂點著色器 Vextex Shader

          是最常見的 3D 著色器,他記錄了模型每個頂點的位置、紋理坐標、顏色等信息。它將每個頂點的 3D 位置信息轉換成 2D 屏幕坐標。頂點著色器可以處理位置、顏色、紋理的坐標,但是無法增加新的頂點。

          幾何著色器 Geometry Shader

          是最近新興的著色器,在 Direct3D 10 和 Open GL3.2 中被引用。這種著色器可以在圖元外生成新的頂點,從而轉換成新的圖元(例如點、線、三角等),而優勢也是在于可以直接在著色中增加模型細節,減低 CPU 負擔。集合著色器的常用場景包括點精靈(Point Sprite)生成(粒子動畫),細分曲面,體積陰影等。

          細分曲面著色器 Tessellation Shader

          在 OpenGL4.0 和 Direct3D 11 中出現,它可以在圖元內鑲嵌更多三角體。為傳統模型新增了兩個著色步驟(一是細分控制著色,又稱為 Hull Shader,二是細分評估著色,又稱為 Domain Shader),兩者結合可以讓簡單的模型快速獲得細分曲面。(例如,含細分曲面效果的模型加上置換貼圖就可以獲得極其逼真細膩的模型)

          2. 一些術語的簡單理解

          GL: Graphics Library, 圖形函數庫。

          webGL:Web Graphics Library,Html 5 可接入的 3D 繪圖協議/函數庫,可以為 H5 Canvas 提供 3D 渲染的各類 API。

          Z-Buffering:深度緩沖,3D 圖像在渲物體的時候,每一個生成的像素的深度會存儲在緩沖區中。如果另一個物體也在同一個像素中產生渲染結果,那么 GPU 會比較兩個物體的深度,優先渲染距離更近的物體,這個過程叫做 Z-Culling。當兩個物體靠很近的時候(16-bit),可能會出現 Z-Fighting,也就是交疊閃爍的現象,使用 24 或 32bit 的 Buffer 可以有效緩解。

          Rendering Pipeline:渲染管線/渲染流水線/像素流水線,為 GPU 的處理工作流,是 GPU 負責給圖形配上顏色的專門通道。管線越多,畫面越流暢精美。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 17-渲染管道細節工作流 [ F12 ]

          Rasterization:光柵化/點陣化/柵格化,就是將管線處理完的圖元轉換成一系列屏幕可視的像素,過程包括:圖元拼裝(Primitive assembly)-三角形遍歷(Triangle Traversal)- Pixel Processing-Merging。

          文章來源:優設 作者:ISUX


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

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

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


          深度解析|流量時代私域H5營銷設計的流量密碼

          ui設計分享達人









          一、由銷售演變成運營


          在我看來,當今互聯網行業的經營實際上與傳統行業的銷售并無區別,我們可以從以下兩個行業的業務結構圖看出,互聯網行業的經營實際上是從傳統行業的銷售模式轉變而來。



          1.1 傳統行業的銷售

          按照傳統行業的業務結構可分為“采購、生產、加工、銷售、財務”四個環節。一提起銷售大家肯定都不陌生,指的是企業生產的產品通過銷售人員的銷售手段,將企業的產品賣出來兌換成貨幣,流入企業的財務。



          1.2 互聯網行業的運營

          在互聯網行業中業務結構還可分為“采購、PM/開發、運營、財務”。就流程而言,互聯網行業的經營實際上存在著傳統銷售的影子,在將企業的產品(成品)轉化為財務的這一環節之前,需要經歷銷售或運營這兩個環節。


          不像傳統企業銷售,運營不直接負責賣,更多地是負責推廣。不直接負責銷售,更多的是負責推廣。換言之,互聯網企業的產品并不直接兌換成貨幣,而是通過“引流、活動、轉化、流失”等一系列運營操作,提升用戶體驗,將產品好服務賣給用戶。


          ·引導用戶使用產品:我們可以將傳統銷售中的初次拜訪客戶當作運營中的引流;

          ·保持用戶黏性:把傳統銷售中的維護客戶關系當作運營中做的活動和轉化;

          ·用戶流失管理:將傳統銷售中挽回客戶這個動作當作運營中用戶流失這個動作。

          因此,互聯網行業更加重視運營而不是銷售。






          二、運營設計的核心目標


          在簡單了解了互聯網的運營之后,我們再談一談最新出現的一個新詞“運營設計”。



          2.1 運營設計并不是運營

          運營設計在我看來是一個相對模糊的詞匯,我能清楚地講明白什么是品牌設計、界面設計、工業設計、平面設計、產品設計,但總覺得說不明白什么是運營設計。


          比如說品牌設計是品牌,界面設計設計的是界面,而運營設計不是運營設計,好像運營設計無法用一個專業的方向來描述。


          但在國內的互聯網市場中,產品的運營又是一件必不可少的事情,從企業盈利的角度來看運營設計的地位不亞于UI設計和產品設計。在我看來運營設計是介于“運營”與“設計”之間的一個崗位。


          ·菜鳥運營設計師:多是幫助運營經理完成運營活動的投放物料,按時上線。

          ·老鳥運營設計師:通過較為多樣的手段(合理的規劃)和技能(設計感覺形式)更好地實現“用戶獲取&用戶付費”等目的,并且在這個過程中可以“更好實現已有用戶的維系”。



          2.2 增長設計(海盜模型)

          實際上,運營設計也被稱為增長設計,一提到增長,我的第一反應就是《增長黑客》中的海盜模型,也就是AAARR模型。


          AARRR(海盜模型)是《增長黑客》中最為重要的理論——用戶生命周期的模型,因為這個模型和運營設計有許多相似之處,也有人將其作為業務流程的模型。運營的流程需要經歷:先拉新,再促活,接著提高留存,然后獲取收入,最后實現自我傳播這5個環節,可以和模型中的概念一一對應上。


          *對于海盜模型的知識點,我在這篇文章《一文讀懂|數據好體驗就好嗎?—數據認知篇》里面講過,這里我就不做過多地贅述了。


          對用戶生命周期AAARR模型的理解是一方面,最重要是要學會用模型中的關鍵數據指標去衡量活動,畢竟我們做運營設計的最重要的是以最低的設計成本來獲得最大的運營收益。模型只是一種工具,對于不清楚怎么使用模型的同學,我建議看看我寫的《史上最全|數據體驗好就好嗎?—體驗度量篇》。



          2.3 以運營目標推導運營形式

          運營經理的運營手段可謂是百花齊放,變化莫測,這里我們不展開討論。一般運營活動屬于推廣這個動作,在推廣的這個環節里面不會特指某一個目標,而是包含多個目標,所以對于運營設計師而言目標不能是一個,而應該多個。常規的以產品運營為核心提出來運營目標大致是“拉新、促活、回流、營收”等這四種。


          如果把運營的目標需求轉換成我們設計師的目標需求的話,逃不出我們常見的“用戶增長、品牌傳達、營銷策略、商品成交量”這四個范疇。


          把運營側的目標轉換為產品是為了幫設計更準確理解運營經理的需求,以目標確定活動類型、以類型快速定位適合的風格,提高運營活動質量,促進用戶轉化,如圖


          ·基于用戶的活動運營:如果是以用戶為目標的活動,設計應該偏向于符合用戶屬性的風格,比如我們的用戶都是年輕的用戶,那在頁面的設計上就應該多有“年輕化、博人眼球的、好玩有趣”等元素的呈現。


          ·基于營收的活動運營:如果是以營收為目標的活動,設計應該偏向活動場景對于入口的設計優化,比如Banner、落地頁等物料設計。通過優化入口,提高轉化率,完成產品體驗的優化的目標。


          ·基于品牌的活動運營:如果是以品牌宣傳為目標的活動,設計應該偏向企業品牌形象的樹立以及傳播,把產品的特色傳遞給用戶,與其他競品拉開差距,提升自己產品的核心競爭力。





          三、私域的精細化運營

          與運營有關的“私域”這倆詞,最近火得不行,哪里都可以見到。為什么互聯網企業這么重視私域的運營呢?主要是因為在互聯網時代,大家都認同有了私域流量就相當于有了盈利這個觀點。


          3.1 什么是公域運營

          首先我要簡單地描述一下什么叫流量,流量的本質就是指用戶,但是“用戶”這個詞過于抽象了,常常都用閱讀量,粉絲量,點贊量,播放量等這些數據維度去衡量流量的體積。


          打個不恰當的比喻,流量就像是一條河,如果無人管理的話,那就叫公域交通。您在河邊挖一條水溝,將河水引到自己事先制作好的蓄水池里面,這個蓄水池里面的河水就叫做私域流量。


          3.2 什么是私域流量

          如上例所說,我們將能夠自主運營的流量或用戶(蓄水池),可以反復觸達、“騷擾”、交流,獲取反饋的流量統稱為私域流量。典型的產品形態有微商、拼團群、朋友圈、微信公眾號。私域流量相對于公域流量來說,是一種更精準,更容易被轉化的流量。


          簡單的理解就是可以為所欲為的流量,比如我在我自己的微信公眾號里面可以隨意地刪減用戶的評論,典型產品形態有微信公眾號、微商、拼團群、朋友圈等。


          如今許多互聯網產品都是私域流量與公域相結合的產品,比如說大家經常使用的站酷這個平臺,如果我發布的作品沒有上首頁的推薦,只會在我的個人主頁展示,獲得的粉絲就屬于私域流量;反之我的作品獲得了首頁推薦,在站酷首頁展示,獲得粉絲增長量就屬于公域流量。


          許多企業老板都明白這樣一個道理“用戶在哪里,私域流量就在哪里,生意就在哪里,企業的盈利就在哪里?!?/strong>因此,企業老板們都希望把公域流量吸引到自己產品的中,成為私域流量,這樣企業的流量即相對公域流量而言更加可控、高效、精準,后期盈利也有保障。



          3.3 精細化的運營模式

          正是因為許多企業開始注意到私域流量的重要性,互聯網從之前的流量粗放運營模式,逐漸變成用戶精細化運營模式,這是流量思維到用戶思維的轉變。精細化運營簡單理解就是基于龐大的數據分析,讓企業的產品為不同的用戶推送不同的運營內容(或者是用戶感興趣的內容)。


          提出“精細化運營”這一個概念行業里面最早最有名氣的應當是號稱一分鐘出8000張Banner的鹿班平臺,鹿班平臺最大的意義不在于取代設計師這一個崗位,而是阿里巴巴在精細化運營的第一次嘗試,為不同的用戶推送自己所需要的商品內容。當然了,除了鹿班平臺京東集團也有羚瓏營銷內容創意平臺,有興趣的同學可以查看一下。


          在精細化運營中還有一個很專業的名詞叫“千人千面營銷策略”,這個營銷策略的概念是指每一個用戶看到的每一個內容都是不一樣的,仔細想想這是人力所不能及,只有AI的大數據才能做到的,例如用戶A的收藏夾是襯衫品類比較多,那淘寶Feed流推送的商品襯衫比重會多一些,用戶B的購物車首飾品類比較多,那產品中推送的內容珠寶首飾占多數;用戶C喜歡電子產品,那么產品推送的將會是電子類產品比較多。





          四、了解運營設計師的工作內容

          在公司里,產品體驗設計師(又被稱為界面設計師、UI設計師)在公司中扮演著美化產品的角色,隨著互聯網行業的業務擴張、人才涌入后會把UI設計師這一角色進行更加精細化的分類,在互聯網企業中會把設計師按照工作內容進行兩種類型的分類,分別是產品體驗設計師和運營視覺設計師。



          4.1 產品體驗設計師

          工作職責:產品體驗設計師的工作職責,主要以提升產品功能體驗為主。在分析產品邏輯和交互邏輯后,從視覺層面把控產品界面設計,并通過視覺設計高效傳達有效的信息,并制造出愉悅的用戶體驗。

          設計工具:Figma、Sketch、Axure、問卷工具等。



          4.2 運營視覺設計師

          工作職責:運營設計工作職責是在短期內達成提升相關運營活動的指標。他們以運營活動設計為主,運用視覺語言吸引用戶參加對應的活動,加深用戶對產品的印象,從而促使用戶參與活動,完成活動中完成引流、成交、復購、傳播等行為。

          設計工具:PS、AI、AE、C4D等。



          4.3 運營設計師需要具備的能力

          運營設計師的主要工作內容就是協助企業中的運營經理做好產品的用戶運營、內容運營、產品運營和活動運營。運營設計師應該參與到運營活動的策劃中去,幫助運營經理想一些更有趣更好的設計策略,并且在這個過程中更好地提高自己的運營策略、數據分析、文案能力和視覺表現能力。


          4.4 運營設計的工作范疇

          運營設計師這個一個崗位更多的是內容驅動型(音樂、視頻、教育應用等)、交易驅動型(電商、o2O服務等)產品中。它的工作范疇是一個很繁雜的事情,不僅需求數量大而且頻率高,最繁雜的一點是需求種類比較多,比如有廣告位Banner、專題頁面設計 、活動專題、Icno圖標等內容,并且需要批量處理的各種資源入口圖,線下活動的海報、印刷物料等等。










          如今運營活動可謂鋪天蓋地,手機端也能經常見到各大企業產品的優惠活動設計,比如活動圖,落地頁,優惠券,戰略樓層等設計。國內的運營設計推廣形式多以落地頁(H5)的形式幫助企業做推廣企業產品或者樹立企業形象的活動。


          由于,這類狂轟濫炸式的運營活動,讓用戶倍感無味,致使運營活動流量不高,設計師在實際的工作中往往會遇到以下三類問題,導致我們的運營活動流量不高,達不到預期的運營目的,如圖





          一、用形式解決內容過長問題

          近些年在市面上落地頁的推廣形式多以長頁面為主,比如電商的推薦頁、商品的宣傳頁。由于企業想要表達的內容過多,使落地頁的長度越來越長,這種形式雖然可以更全面地介紹商品優勢,但是在快節奏的互聯網市場,用戶自然會覺得很臃腫。


          針對落地頁內容過長,視覺呈現不佳的問題,我們最快能想到的辦法就是刪減字段,但是如果運營經理不同意刪減字段那怎么辦?因此,刪減這是一個辦法,但不是最好的辦法。


          既然不能刪減,我們不妨換個思路來解決這個問題。剛剛談到內容過長導致用戶感覺臃腫,感覺臃腫的核心所在是“內容”對用戶沒意義,按著這思路延展下去解決問題的關鍵在于“突出重點”,這里我提供四個方法幫助大家解決困擾。



          1.1 優化頭圖的尺寸

          許多設計設計師由于沒有考慮清楚手機到最終的預覽效果,導致很多重要的元素出現在低活躍的區域 ,用戶第一眼看不到能吸引自己的內容,從而失去往下滑動了解更多內容的動作,造成運營推廣的效果大打折扣。


          因此在設計這種長圖時要事先考慮好首屏要呈現什么內容,一般的運營頭部高度一般定在600px-750px左右,如果是內容較多的話,我建議把頭圖的高度控制在460左右,這樣可以促使用戶在首屏看到更多的信息,引導用戶有興趣向下滑動,用戶的點擊率也隨之上升。


          1.2 手機海報的表現形式

          除了縮減頭圖的高度之外,實際上利用海報宣傳的方式進行設計也是可以的。在朋友圈或其他社交平臺上經??吹竭@種帶有二維碼的宣傳海報,用戶通過掃碼直接進入運營活動中心。


          這類海報形式有著短小精悍,言簡意賅、便于傳播的優點,是一種提高運營活動流量很好的表現形式。



          1.3 九宮格拼圖的表現形式

          雖然現在是抖音的天下,但是這類九宮格拼圖的表現形式,在微博(微信、微淘)如日中天的時代也是風靡一時的,這里提出九宮格拼圖的形式也是給大家提供一個思路,是否采用還需要考慮企業主要運營的平臺。



          1.4 閃屏的表現形式

          閃屏這種表現形式雖然點擊率并不高,但是一種很好蹭熱度的方法。對閃屏的設計,設計師只需要思考好用什么呈現表現形式為閃屏物料注入新的活力,例如用下面這種只突出主體物和標題的表現形式,把內容更加精簡、準確地傳遞給用戶,這種表現形式就很好。





          二、了解興趣低的原因

          在第二部分里,我想分為4個模塊——了解興趣低的原因、用形式提高用戶興趣、讓標題文案更加突出、用獵奇心理引起用戶興趣,來談一談我對“用戶興趣”的理解。


          2.1 解決用戶興趣的方法

          早期的互聯網產品以工具為主,例如百度就是用來搜索的、QQ就是用來聊天的、淘寶就是用來買東西的,這些產品呈現的感覺都以簡潔清晰為主,但隨之互聯網越來越普及,娛樂產品出現與工具類產品越來越多的差異性趨勢發展,尤其對于運營設計,簡潔清晰變得沒那么重要,個性、趣味才是占據主導。想要運營設計做得讓用戶有興趣,不妨試一試我下面所說的四個技巧。



          2.2 為什么要“動”會引起用戶興趣

          以圖片+內容的這種展現形式在市場出現很久了,對用戶的吸引度不免有減弱的趨勢,在這一階段我們需要尋找一種更加有趣的形式來吸引用戶。


          興趣可以用更為科學的方法“注目度”來解釋,當我們眼睛在看到某一個事物的時候,大腦會根據事物的形態給一個由“強”到“弱”的排序,去支配眼睛去觀察事物,如下圖所示,我們可以直觀地看到“動畫”這個類目是排在前面的。大部分用戶在看到運營活動內容的精神狀態(注目度)是分散的,所以要搶占用戶的時間,設計用戶第一眼的吸引力。




          三、用形式提高用戶興趣


          3.1 加入更多的動效

          根據上面的結論,在提高用戶興趣這個問題上,我們完全可以增加展示效果的動效來做到,很多產品也是這樣做的。


          比如今年拼多多的Banner上,做了一些標題旋轉、優惠券飛出的動畫效果:

            


          像京東購物節中做一些開場的動畫效果:

            



          在活動流程上面的動效,比如在一些抽獎環節模擬真實物體的運動軌跡:

            




          在圖標或者標簽上面加一些位移、漸隱漸顯的動畫效果:

            


          在一些彈窗上面加上一圈光效,也是一個不錯的選擇:

            


          如今在運營活動上加入更多的動效是設計師必備技能之一,最常規的就是把畫面中的某一個元素變大,像是下面的按鈕,采用放大縮小的動效。

            


          或者是按鈕旁邊加上一個手指的元素,也可以起到吸引用戶的目的。

            


          元素圍繞主題物周邊沿著運動軌跡活動。

            


          關于動效的案例,這里我就不一一舉例說明了,大家可以登錄螞蟻設計服務平臺 - 犸良這個平臺獲取靈感。



          2.2 以靜制動

          對于不會動效軟件的同學也沒有關系,也可以著重對畫面的張力進行設計,以靜至動,以下我就分享幾個以靜至動的方法。


          ·元素之間的動勢:合理的運營元素之間的組合關系可以營造出有動的感覺,如果單單放一個開飛機的場景可能并沒有感覺在飛,但如果加上飛翔的紅包、模糊的背景,那就感覺真的在開飛機。


          ·有力的指引力:如果單單地放一張優惠券,不會產生吸引人的觀感,但設計四只手從四個方向爭搶的畫面,就會感覺畫面有力量有爭搶的感覺。


          ·以破形產生動感:畫面中從左側設計一張卡片,遠處門的入口塑造的,大膽地破形處理,很容易營造出一種動態感覺。


          ·夸張的構圖設計:當然了不同的視角和構圖也可以讓畫面感覺生動,如下面這樣的構圖就會給用戶營造出一種畫面外還有畫面的感覺。


          ·營造運動畫面感:下面這套海報采用硬朗的直線和運營動作的完美結合,通過營造強烈的運動感給用戶傳達動的感覺。



          2.3 視頻推廣的形式

          由于短視頻領域的興起,朋友圈中轉發視頻的用戶也日益增加,如果設計師可以給運營經理在以視頻形式進行運營活動的推廣的需求上出謀劃策的話,也是一個很專業的設計師了。





          四、讓標題文案更加突出


          造成用戶不感興趣的原因還有可能是信息傳遞效率不高,用戶無法通過標題知道這是什么活動,怎么可能引起用戶的興趣而點擊?

          標題的文案可謂是用戶判斷信息的首要思想要素,他能迅速讓用戶了解活動主題,傳達活動興趣點,激發用戶參與。


          4.1 選擇識別度高的字體

          設計師是一個創造美的職業,但是也要有取舍,在我看來漂亮固然重要但高效的信息傳遞更為重要,尤其是在運營活動的標題設計上應該盡量選擇一些識別度高的字體,先讓用戶清楚地知道該活動是干什么的,再用特殊的技法去吸引用戶點擊。


          在標題字體上我比較推薦使用無襯線字體,因為黑體去掉過多的襯線裝飾,是橫平豎直,筆畫粗細均衡,使字更為精練并且醒目。例如下面這張效果圖,都是在黑體的字體基礎上做的設計,光看標題就可以清楚活動大致是個什么類型的了。



          4.2 給字體加點效果

          如果覺得以上的方法并不能給用戶起到視覺沖擊力的效果,不妨給標題的字體加一點效果圖,比如立體效果、加裝飾物、更改字體結構等等,如圖

          我推薦一個我自己作圖的習慣,就是先做標題文案的樣式設計,再做配圖元素的設計,我覺得這個方法既可以突出標題文案字體設計又很高效。博大精深,有機會后期會寫一篇字體設計的文章,敬請期待吧。





          五、用獵奇心理引起用戶興趣


          以下內容不算是設計技法的內容了,算是運營思維方面的小竅門,我認為身為運營設計師,還是有必要知道的。



          5.1 倒計時營造緊張感

          如果在手機海報的表現形式上,加入以下這種“倒計時”主題,有助于激發起用戶期待感和代入感,起到事半功倍的效果。


          5.2 明星的效應

          如果活動中有明星素材可以使用,千萬不要放過這個機會,因為明星自帶流量和話題,也是吸引用戶興趣,提高流量的好辦法。


          5.3 節日的熱點

          一年中有很多節日或者節氣的時間節點,這些時間節點自帶吸睛功能,可以把他們當成借勢營銷的主題,有的放矢地制作活動宣傳圖,增加曝光度,保證營銷的新鮮度。


          接下來,讓我們談一談第三個問題——用戶審美疲勞。









          隨著市場上充斥大量運營活動,對用戶來說不免會造成審美疲勞,而用戶出現審美疲勞的情況也是造成運營數據下降一個重要的因素。



          一、了解什么叫審美疲勞


          1.1 審美疲勞的概念

          所謂審美疲勞,源于一個經典的心理學概念——刺激適應(Sensory Adaptation),就是用戶長時間接觸一種類型或者表現形式的事物而產生的厭倦、麻木的心理,最終都會被“適應”(即令人無感覺)。


          這里我列一個例子,比如每天打你一棍子,你當然很不爽。但是連續打你一年后,你并不會感覺到不爽了,因為它變成了你生活的一部分,你已經沒有感覺了——這就是刺激適應。


          1.2 為什么會出現審美疲勞

          審美疲勞的出現,有其客觀必然性,多數情況造成用戶審美疲勞的原因可以分為兩種:


          內容上眼花繚亂:是指一方面市場的運營活動太多,另一方面是活動內容讓用戶提不起興趣,久而久之自然就會產生審美疲勞的心理。


          時間上的心生厭倦:這是人正常的心理狀態,當人從外部獲得了幸福感(升值、金錢、美食)多會隨著時間的推移最終回到基礎水平。

          這里我列一個例子,比如剛收到名校錄取通知書的大學生,感覺到幸福感爆棚,但也最多持續幾個月——等他入學后,日復一日地上課下課和高中生活一樣,慢慢地覺得索然無味。



          二、審美疲勞的解決方法

          對于內容讓用戶提不起興趣這一點,我在前一章我已經闡述了自己的觀點,這里不做過多贅述了。但是我們可以就“時間上的心生厭倦”這一問題出發,來討論設計方面的解決方法。


          在我看來設計側的解決方法其實就一個詞——新穎,我總結設計師可以從以下5個方面著手進行設計方案的確立——夸張視角、細致刻畫、多種風格、故事性、游戲化。



          2.1 設計一些新奇的視角

          這種方法屬于吸引眼球而追求的形式上的“奇特”,比如我們看看第一幅設計稿(植美村的頁面),夸張的魚眼大透視配合風格感十足的原畫級頁面,至少第一眼就把我震撼了。


          或者以微觀視角看世界的視角去做設計稿,比如說OPPO的運營圖設計,正常視角中人永遠都是比手表大的,但如果反過來去觀察,就好比自己像是一個小微生物去觀察這個視覺,會給用戶一種很新奇的感覺。



          2.2 把刻畫發揮到極致

          形、色、質、構是搭建一個畫面的基礎,其中質感是拉開差距的關鍵,它是細微的,往往有質感的視覺感受會給用戶一種高級的感覺,吸引用戶點擊或者是向下滑動瀏覽更多的內容。身為設計應該更專注于自己觀察方法和技法的提升,一個圖層達不到想要的效果,那兩個圖層呢?那把其中一個圖層的圖層樣式調整成“正片疊底”呢?


          質感雖然是一個相對抽象的詞,但是做出質感并沒有想象中的那么難,最重要的就是有耐心多做一些層次,如下圖,不管是以文字或者圖像為主形象的效果,都是因為考慮了字體變形、字體結構、投影、高光、色塊對比等細節,才會讓整體的效果給人一種很有質感的感覺。


          *設計技法的提升是一個很漫長的過程,比較注重于直覺和感性的認知能力的培養,要多觀察、多嘗試,要相信自己總會有成功的那一天的。



          如果你會3D類型的軟件那就太好了,因為3D類型的工具最終呈現的畫面本身就帶有空間關系并且由于可以渲染不同種類質感的材質,畫面天生帶有一種質感,比如下面這兩張圖如果單單地鋪上一個大色塊點綴一些圖形元素和3D類型的作品對比來看,質感還是差一截子。左側是質感相對較弱的落地頁,右側是質感較好的落地頁,如果你是用戶的話,你會點擊哪個?又會向下劃動查看哪個呢?


          并且現在的移動端設備的性能都有提升,并且5g的技術也在市場中出現,以前的3D場景加載卡頓的問題也逐漸在消失,我們不妨事先在運營活動中多加入一些3D的效果,來博取用戶眼球。


          就目前來看視覺觀感偏向越來越立體化,而不是簡單的平視扁平效果,以下這種成系列的設計稿,是深受用戶所喜歡的,并且成系列的設計稿,也很容易讓用戶產生記憶點,是一個我非常推薦的做法。



          2.3 多種風格的探索

          為什么要做多種風格的運營設計呢?從設計美學的角度上來講,用戶的審美性質在發生變化,由過去“專注式”的審美在強大的信息流影響下變成娛樂式的“快餐式”審美,所以做多種風格這是適應市場趨勢的必然結果。


          每個企業的目標并不是為了用戶設計出更好的視覺作品,企業的目的是在于用“創意”快速吸引用戶眼球。有點兒像是鉛筆和鋼筆的關系,不是為了最好的鉛筆而是鋼筆,而是為了設計出可以代替鉛筆的鋼筆。


          例如下圖中的描邊MBE風格、孟菲斯、噪點插畫、復古等風格都可以運營到設計中。


          今年大火的酸性設計(最早出現在西方60年代迷幻搖滾(Aicd Rock)文化中)是一種打破傳統美感的設計,暗調的背景和鐳射材質的素材搭配鏤空的字體設計,在視覺感受上制造出一種迷幻絢爛的氛圍,特別適合用在一些需要體現“潮流、新銳、個性”的視覺設計中。文章結尾我也給大家準備了素材,需要的去獲取吧。



          2.4 有故事性活動延展

          大多數用戶都喜歡聽故事,在故事中包裝自己的產品,告訴用戶可獲得什么好處的這種方法也是提高運營活動的數據的一種好辦法。


          這種形式早在2017年的offo就有用過,當時ofof的產品有借助于《神偷奶爸3》中小黃人的形象,設計了一系列新的自行車造型,以一系列報紙的形式設計,以小黃人車潛入車間為主要故事,了解 OFO小黃人版是如何造出來的,某種程度上說很好地宣傳了 OFO。


          例如《德芙Dove x故宮》的H5項目中,用長卷的表現形式繪制了從清朝至現代的過年場景,意指“以前宮里人也吃德芙,現在將德芙的福氣傳到千家萬戶”,讓用戶眼前一亮的同時,也宣傳了企業產品。


          《當代清明上河圖》,快手品牌宣傳H5項目中,設計師將現代與古代結合,通過長圖繪制生活百態,用不同的故事來講述勵志故事和暖心故事,是故事性宣傳企業品牌的經典案例。



          2.5 活動ip的游戲化

          用戶對簡單的商品宣傳(運營活動)是沒有什么興趣的,但是如果把運營活動包裝成一個游戲,卻能俘獲用戶的芳心。很多企業正是抓出用戶的這個心理,在自己企業的ip形象上做足了功夫,阿里巴巴集團就是這樣一個典型的企業,只要是過節,ip形象總能參與其中發揮其最大的商業價值,是典型把ip形象加入運營活動游戲化的企業。


          每年支付寶都會有積攢5福的游戲,在2021年他們還升級了自己的ip形象,讓用戶體驗更加升級。ip形象的游戲化,未來也會成為一個趨勢,每年應該都會有吉祥物來送錢。




          三、構圖好就成功了一半

          畫面清晰、構圖合理應該是做運營設計的第一準則,尤其是大家都審美疲勞的今天,有一個好的構圖,可以起到事半功倍的效果。


          接下來我就介紹運營活動中常用的四種構圖方法,便于大家在工作中有規律有節奏地排版畫面上的圖形、文字、元素之間的關系。



          3.1 上下構圖法

          “上下的構圖法”是將布局分成上、下兩個部分,或使整個畫面元素呈上下分布的趨勢,主要信息(標題)常常融入圖片中,放在主空間成為主體,閱讀性文字放在次空間,這種構圖的特點是內容的沖擊力比較強。



          3.2 左右構圖法

          “左右構圖法”是占據圖片和文字的一部分,形成左右兩個獨立的空間,產生良好的閱讀體驗。很實用的一種構圖方式。這種構圖的特點所占圖幅較小,但要求文案的數量需要精簡,盡量不超過6個字。



          3.3 三分構圖法

          “三分構圖法”是將畫面中的內容三等分,并突出c位的信息,旁邊有裝飾元素圍繞增添畫面的氣氛,具有穩定性又可以避免使用中心構圖形成的呆板感。



          3.4 中心構圖法

          “中心構圖法”是把主體放置于畫面視覺中心,形成視覺焦點,再利用其他信息烘托與呼應主體。其特點是能夠突出重點信息,讓用戶一目了然。



          3.5 對角構圖法

          “中心構圖法”是指對畫面進行等值分割,并將所要表達的信息對角排列。這種構圖方式,會讓頁面顯得更靈活,有動勢,讓畫面有更多可能性。



          3.6 傾斜構圖法

          “傾斜構圖法”是版面整體或部分元素以傾斜的角度呈現在畫面上,能很好地營造出輕松、動感、刺激等氣氛感,一般游戲類活動也會比較常用。









          好的運營活動會為企業帶來可觀的短期收益這是眾多互聯網企業所認同的,也是每一個企業所需要的,以下是我對運營設計的一些經驗心法,希望對你有所幫助




          一、如何最大限度地規避返工風險

          對于設計者來說,最苦惱的是改稿,特別是那種做許多疊加質感光效的效果圖,改起來成本很高,改稿這件事對運營設計師來說可以說是最頭疼的事。


          針對這種返工改稿的情況,我個人認為問題多數出在“溝通”這個環節。在溝通環節中最要解決的核心問題就是要進行有效的溝通,如果需求方(運營經理)和設計師之間的溝通是無效的,改稿那是必然結果,下面是我對于“高效溝通”上的3點經驗。



          1.1 明確項目的目標

          身為設計師的你遇到一次兩次交付后要改稿的情況倒是沒有關系,有些協同的同事是初次合作,難免有些觀點不對齊的情況,這屬于正常的,但是經常遇到這種情況就要引起重視了。


          需要反思一下是不是自己對項目的目標沒有搞清楚,在做項目之前我建議直接讓需求方說出痛點,多問問目標用戶群體是誰?投放平臺和渠道是哪些?上線時間和排期?尺寸大小等問題,把目標明確下來。


          1.2 從抽象化到具象化

          人和人受到教育不同,理解能力是不同的,有的需求方上來就說了很多概念詞匯,比如我希望這次運營活動是高端、大氣、上檔次的,這很難讓設計師正確地理解。


          對于這種情況,我建議找一些可用的真實案例給到需求方,將抽象的概念具象化,事先搞清楚需求方心中的畫面是什么樣子的,特別是要明確設計風格、配色方案、背景元素、圖文板式結構等信息。



          1.3 提前弄清楚運營活動的要求

          關于版權的問題是有可能導致項目無法上線的,我之前的一個項目就因為C4D這款軟件侵權收到了一份律師函,需要將帶有3D效果的在線元素全部替換。


          因此在項目啟動前可與需求方確認有關字體版權、圖片版權、軟件使用權等問題,避免在效果圖出來后再去調整,耗費公司人力成本。



          1.4 除了溝通還應該設立審核環節

          這個并不屬于交流的范疇,但是我覺得他也是影響設計師反復改圖的重要原因之一,還是有必要說一下的。


          運營活動上線都是有明確時間節點的排期安排的,所以設計稿審核的環節要特別重視,尤其是大型的運營活動不要等到最后的環節再去審核,因為如果審核不通過有可能會重新做,所以在設計過程之中應多設立幾個審核環節,保持和需求方的想法是時時同步的,千萬不要等交付時間快到了再進行審核,到時候誰加班誰痛苦。詳細審核環節設置,大家可以參照下面的圖片:






          二、運營設計其實也可以增效

          “增效”這個詞近幾年火得不行,尤其是和老板說增效的事情,他會非常感興趣的。以下是我親身經歷的一個項目,也正是從這個時候開始,我開始思考團隊增效的事情。



          2.1 明白運營經理想要什么

          以前遇到一個運營活動落地頁的項目,需求方說;“我們不需要繪制復雜的插畫放在Banner里,簡單畫點喜慶的元素,把活動標題展現清楚就好了,設計同學也不需要花那么多時間來設計,你們能多久給到我呢??!?


          我相信有不少小伙伴曾經遇到過這個情況,通過以上案例,不難看出設計師想要的跟運營經理想要的并不一樣。大部分運營經理更在意的是文案的露出、能多快地交付;而大部分運營設計師更在意的是圖片美不美、炫不炫,整體的圖形表達最終給用戶的感覺是否和設計師所想的一致。



          2.2 增效的兩種方式

          在理解了運營經理他們所在意的事情之后,我發現針對有嚴格交付時間的運營項目而言,運營設計的增效是很有必要的。一般來說“增效”有兩種方式,一種是提高輸出效率,另外一種是降低人工成本。


          提高輸出效率:我知道在行業內,58集團自主研發的運營頁面設計平臺——斑馬智能物料設計審核平臺和靈動編輯器算是兩款增效的工具,這兩款工具為運營工作提供高效且高質量的輸出環境。


          降低人工成本:我相信大多數同學的公司是沒有這類平臺資源,不用擔心,沒有我們可以自己搭建簡略版的組件代替,比如公司里有些運營活動要跟上新聞熱點,如果我們事先做好3-5個尺寸一致的模版套件,當新聞熱點來的時候只需要插入圖片更新標題就可以先推送出去,這種做法會極大地降低設計師的制作成本。


          再比如組內成員可以利用平時的工作時間做一些通用的組件如紅包、優惠券等,在要求快速完成運營活動的時候,可以挑選風格合適的樣式替換。





          三、做好運營需要了解用戶心理

          縱觀市場,會發現大部分設計師都是作圖高手,那些能夠在前期參與策劃運營活動,幫助運營經理想一些更有趣好玩兒的idea的人才是鳳毛麟角的。



          3.1 需要有正向、反向思考角度

          記得看過一次求職類節目,一位求職者推銷頸椎治療儀的案例讓我印象深刻。因為他的推銷過程很精彩,他用了兩種方法去推銷產品。


          第一種思路:介紹產品的優點,表示你買了我們的頸椎儀脖子的酸痛問題會得到緩解。

          第二種思路:如果你不買我們的頸椎儀,你很有可能因為頸椎不舒服而失去良好的睡眠質量。


          當然那個應聘者也得到了心儀的企業offer,那時候我就覺得這位應聘者很聰明,聰明的點在于對猶豫不決、不想買的用戶都設計了自己的對策。


          對猶豫不決的用戶來說,通過正向介紹產品優勢,從而獲取用戶青睞;對于不想買的用戶則利用反向思維講述這個產品會和你睡眠質量有關系。


          設計師是一個很重視用戶同理心的一個職業,當我們越是了解用戶的想法,就會知道用戶最需要什么,做的設計也就能更好地貼合用戶需求,最終完成提高運營活動的數據的運營目標。



          3.2 觸發點擊行為和用戶心理有關系

          2009年,斯坦福大學行為科學教授福格(Fogg)提出了一種人體行為模型,簡稱為 FBM。根據這一模型,他提出促使一個人的行為的發生離不開三個因素:行為動機(Motivation),行為能力(Ability)和觸發條件(Triggers),用公式表達就是B=MAT。用戶行為的產生需要動機、能力、觸發等有機結合,通過對動機、能力、觸發等干預可以影響使用者的行為。


          引發用戶點擊行為,本就是運營設計師必須要做的事情,但是觸發用戶點擊這個行為就要洞察到用戶心理所想。這里我推薦《飛書官方-認知偏差知識手冊》,大家可以從這本書里面了解一些用戶基礎的心理學知識。


          這里我還想補充一點,設計師為什么要學習心理學。如果有人問你設計是什么,很多人都會回答設計就是解決問題,這是一個很標準的答案。在我看來,設計解決兩個問題,第一個就是實現,把以前沒有的東西做出來,第二個就是推廣,把已有的東西賣出去讓更多人知道。很明顯運營屬于第二種。


          但是需要大家注意的是主語,上一句話的主語是“設計”而不是“設計師”。設計師更像是一個翻譯官的角色,其本質在于精準地表達,設計師利用擅長的圖形、色塊等元素給用戶傳遞信息,比如說格式塔原理就在于能幫助設計師,清晰地規劃出用戶先看到什么,提早預測出用戶看到這張圖會產生什么感受,做到可以通過設計技巧,讓用戶感受到設計師想傳遞的信息和感受,這就是我們要學習心理學的原因——為了更科學地了解用戶使用習慣(如格式塔原則可以科學地構建效果圖的閱讀順序),做貼合用戶需要的設計,讓用戶滿意,從而完成盈收的運營目標。總結一句話,運營設計師不僅要詢問用戶想要什么,更要詢問運營經理想表達什么。



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

          文章來源:站酷 作者:斜杠7濕兄
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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




          最新安卓規范入門解析

          資深UI設計者

          零基礎 UI 入門六:最新安卓規范入門解析

          零基礎 UI 入門六:最新安卓規范入門解析


          安卓英文名是 Android,它是系統級源碼的總稱,而谷歌官方為這套系統提供的設計規范,叫做 Material Design (下稱 MD),我們了解官方的設計規范,即了解 Material Design 的過程。

          目前,Material Design 已經更新到第 3 代,與 Andoirid 12 代共同發布,它的設計進行了大量的更新和調整,雖然我寫作的時候這代 MD 設計還沒有正式上線,但下文也將以該版本做說明。

          零基礎 UI 入門六:最新安卓規范入門解析

          建議學習前先下載安卓官方的組件文件(MD2 版本,以后會更新的)和對應字體,可以通過下方官方鏈接獲取。也可以在這個網址中用網頁翻譯查看官方的規范介紹。

          零基礎 UI 入門六:最新安卓規范入門解析

          1. 安卓布局規范

          安卓和 iOS 類似,也包含狀態欄、頭部標題、底部導航欄以及 …… 底部指示器,我們簡單對它們做個介紹。

          首先,頂部狀態欄在 MD2 中,是有背景色的,而在 MD3 則改成了和 iOS 一樣的透明背景。它的高是 52dp(安卓的單位,和 PT 就名字的差別),使用方式和 iOS 狀態欄基本一致。

          零基礎 UI 入門六:最新安卓規范入門解析

          頂部標題欄上,MD 提供了 4 種模式,依次為 center-aligned, small, medium, large,在實際界面中可以根據自己的需要選擇。

          零基礎 UI 入門六:最新安卓規范入門解析

          在 MD3 中,基本取消了安卓過去在頂部放導航的 “優良傳統”,所以原先 MD2 中的 Bottom navigation 改名成 Navigation bar,不過我們依然可以用中文稱呼它為底部導航欄。

          它和 iOS 底部導航類似,提供了 3-5 個選項的不同版本,可以根據自己的需要選擇。并且使用底部指示器的過程中,需要將導航底部延長,覆蓋底部指示器的高 28dp。

          零基礎 UI 入門六:最新安卓規范入門解析

          零基礎 UI 入門六:最新安卓規范入門解析

          在 MD3 中,官方默認使用的畫布是 412*892,左右頁邊距默認為 24。所以如果我們要創建一個以 MD3 規范為標準的頁面,就可以通過置入所需的官方元素完成基礎布局,進行后續設計。

          零基礎 UI 入門六:最新安卓規范入門解析

          至于其它的官方組件,可以在源文件和官方的規范文檔中查看,就不在這里展開了。

          2. 安卓規范細節

          MD3 和 MD2 看起來完全像 2 套規范,原因就在于細節層面變化太大。MD3 一改以往直男的設計風格和配色,搖身一變成年輕人喜聞樂見的網紅風……

          零基礎 UI 入門六:最新安卓規范入門解析

          而相比起來,顏色填充的邏輯比色彩風格的變化更大。在安卓 12 中,提供了用戶自定義系統色彩風格,和色彩根據場景自動化生成和填充的強大特性……

          零基礎 UI 入門六:最新安卓規范入門解析

          這套規范異常的復雜,這是一個針對 MD3 色彩配置的萬字干貨才能講清楚的特性,我只在這邊做一些最基本的講解。

          首先就是 MD3 中,也強調了色彩的角色:

          • 主色 Primary Key Color
          • 二級主色 Secondary Key Color
          • 三級主色 Tertiary Key Color
          • 中性色 Neutral Color
          • 錯誤色 Error Color

          只要這些角色的色值被確定,系統就會自動幫助我們生成不同的明度等級,并應用在不同的場景,比如下方左側是我們設置的角色色值,右側是系統會自動生成的關聯色彩。

          零基礎 UI 入門六:最新安卓規范入門解析

          下面是色彩應用的示例:

          零基礎 UI 入門六:最新安卓規范入門解析

          零基礎 UI 入門六:最新安卓規范入門解析

          零基礎 UI 入門六:最新安卓規范入門解析

          這些角色的具體色值,可是是我們作為 APP 開發方定義的,也可以完全交給客戶端自動生成(獨立設置或背景生成)。

          所以當我們使用 MD3 規范做設計的時候,就要借助官方的插件來完成角色色值的生成。感興趣的同學可以在 Figma 官方社區搜索 Material Theme Builder 插件,并根據下方介紹了解它的使用方法。

          零基礎 UI 入門六:最新安卓規范入門解析

          除色彩外,MD3 使用了更多、更大的圓角,讓界面元素變得更圓潤。圓角使用 4 的倍數,根據元素尺寸分別應用了 4、8、12、16、28 等圓角。

          零基礎 UI 入門六:最新安卓規范入門解析

          在使用了圓角的同時,還棄用了 MD2 中核心材質 —— 投影(我忍它很久了)。讓元素之間通過色彩的對比來實現分隔,而不是應用一大堆厚重的投影來突出元素。

          零基礎 UI 入門六:最新安卓規范入門解析

          除此之外,MD3 中篇幅最多的還包括設備適配有關的規范,就不在這邊介紹,留到后面的分享中講解。

          如果是面向國內市場的 UI 設計師,針對 MD3 只需要停留在了解的層面就行,在真實的工作環境里基本沒有應用場景。

          3. 國產安卓設計現狀

          為什么我們作為 UI 設計師可以對 MD3 停留在了解的層面,而不是真實的實踐?

          因為面向國內市場的安卓界面設計,基本不遵守谷歌官方的設計規范!這里面包含了非常多復雜的歷史問題,有谷歌自己規范做的不清不楚(對比 iOS)的關系,也有每個廠商各自為戰推出自己的設計系統的原因。

          零基礎 UI 入門六:最新安卓規范入門解析

          更底層的因素,是谷歌系統在國外才能獲取完整的體驗,沒有進入國內(被墻),缺乏了廠商去支持和適配它的基本動力。同時在商業層面上,如果我們每設計一個 APP,iOS 和 Andorid 使用各自的規范,會對產品規劃、設計、開發和測試都造成非常大的壓力,是一般公司完全承受不起的。

          再者,國內的安卓項目,多數是在完成 iOS 端的設計后,安卓工程師直接參照該設計稿適配到安卓端中。只有少數安卓特定的需求需要為其設計獨立的頁面。

          零基礎 UI 入門六:最新安卓規范入門解析

          所以常規情況下,我們只需要提供標準的 iOS 界面即可。只有在產品經理提供的特殊需求和頁面,要根據它輸出安卓尺寸的對應界面,但設計風格、元素依舊可以保持 iOS 版本的樣式。

          要提升對安卓官方系統的理解,就一定要在你們的安卓手機上刷原生的系統,同時安裝 Google 三件套,否則你們體驗的就只有魔改版 iOS。

          零基礎 UI 入門六:最新安卓規范入門解析

          今天的分享到這里結束!仔細研究了下 MD3 的新增規范花了不少的精力,個人意見,MD3 實在是非常難做出能讓我們滿意的設計……

          文章來源:優設   作者:酸梅干超人

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

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

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




          《如何定義APP視覺品牌》——設計流程與操作方法淺析

          ui設計分享達人


          概念簡述 

           

           

          視覺品牌這一概念,既陌生又熟悉。大部分ui設計師都或多或少做過視覺改版或者風格升級,先來看兩個概念:視覺風格&視覺品牌。

           

          ▲視覺風格&視覺品牌重點偏向

           

          風格是藝術概念,是在整體上呈現的有代表性的一種面貌。風格能反映時代、思想、審美等特性。也是設計師對審美獨特鮮明的理解。那么視覺品牌呢?它除了要體現產品本身特性,融入產品希望傳達的感受,也要思考什么對用戶有意義。研究視覺品牌,就是探索如何通過設計維護用戶對于產品的好感度 ,通過有共鳴的設計傳遞正能量,讓產品獲得最大的認同。簡單來說:視覺風格重點是設計師對審美的傳達;視覺品牌則是通過挖掘產品有價值的特點,創造有共鳴的視覺去打動用戶,助力產品。

          ▲視覺品牌作用

           

          了解完視覺品牌的概念,我們簡單聊下它的作用。視覺品牌最大作用是建立用戶和產品的關系。vivo互聯網單個產品的視覺品牌也受vivo母品牌影響,不同業務被滲透的程度不同。比如vivo品牌對vivo官網,vivo商城影響比較大,但是對瀏覽器,i視頻,短視頻的影響就比較小。


          流程

           

           

          那么,如何定義好產品的視覺品牌?借企業文化里的一句話:做正確的事,并把事情做正確。在設計工作中,這句話也有一定的指導意義,我們先要確定是否要做視覺品牌,再用合理的流程規劃好每一步。

           

          結合過往的業務經驗來看,對于已有視覺風格的產品來說,需要滿足以下兩個情況之一才是最適合做視覺品牌工作的時候:1、產品轉型、重大業務調整(包括用戶人群、需求變化等);2、與相關行業設計語言水準差距巨大。另外需要考慮的還有時間安排,由于整個流程耗時需要大約12周(3個月),所以設計師前期就要做好時間規劃。

           

          確定要做視覺品牌工作后,需要準備哪些資料?項目環節和流程如何?讓我們來看下這12周需要做的事情和基本順序:

          ▲視覺品牌的流程

           

          我們接下來會重點介紹流程中關鍵的8個步驟(圖標標藍色的step1~8):1、品牌定位資料熟悉 2、明確視覺品牌關鍵詞 3、關鍵詞發散和可視化 4、提取元素建立視覺符號 5、完善主要頁面 6、驗證視覺風格喜好 7、完成所有頁面的視覺效果 8、整理成視覺品牌規范手冊。

           

          1 、品牌定位資料熟悉

          大部分項目的產品,運營和用研角色會提前做一些品牌定位的工作(品牌屋),品牌屋有助于我們對產品各方面進行解讀。這類資料一般我們都可以獲得,設計師可以從中了解到目前我們產品全面信息,包括:產品形象、調性、核心價值觀等。我們需要的關鍵信息:產品關鍵詞就可以從中找到。如果品牌屋資料不夠明確或者設計師對確定的詞匯抱有疑問,我們還可以通過工作坊形式,邀請項目核心成員進行腦暴會議,討論出合適的詞語。

          ▲案例:vivo瀏覽器品牌屋

           

          圖中為瀏覽器品牌屋資料案例,經過項目成員討論,瀏覽器產品最終關鍵詞:智慧、有趣、默契、可靠、年輕。

           

          2、 明確視覺品牌關鍵詞

          然后,從產品關鍵詞里,我們需要選出符合產品定位又能達到受眾心理預期的視覺品牌關鍵詞,聚焦產品的視覺調性。視覺關鍵詞一般有2~5個,需要視覺專業團隊、項目相關人員、核心用戶一起來挑選,用戶的選擇可以放在問卷里進行,通過快速測試了解用戶對產品的視覺感受和期待。如果確定的視覺品牌關鍵詞比較多,可以適當確立1~2個核心視覺詞匯,便于聚焦后期的風格指導。

          ▲明確視覺品牌關鍵詞

           

          選擇標準有兩條:1、延展性高,有一定視覺可視化潛力:詞匯要抽象化,不能過于具體,一般都是描述情緒,氣氛,氛圍或者感受之類的。2、貼合公司品牌文化:追求樂趣、充滿活力、專業音質、極致影像、愉悅體驗、敢于追求極致、持續創造驚喜。

           

          3、 關鍵詞發散和可視化

          發散

          視覺品牌關鍵詞選定后,在繪制可視化的情緒版之前,還差一步,就是針對選出來的詞進行發散。做這一步的目的是希望設計師的思維能夠盡可能打開,收獲更大范圍的靈感和思考。我們通過三層映射方式,分別對2~5個視覺品牌關鍵詞進行發散收獲大量衍生詞。(圖中以詞語“友好”為案例,分別進行物化、心境、視覺映射出大量衍生詞語。)

          ▲三層映射案例:詞語友好

           

          在大量衍生詞里,我們還要經過一輪討論篩選,去掉不合適的詞語。主要看衍生詞和我們的視覺關鍵詞的關聯度是否足夠高,以及是否適合用視覺語言表達等。

           

          如果項目沒有做品牌相關的工作,沒有產品關鍵詞,那我們前3步驟怎么辦?遇到這種情況,我們要怎么深入下去?當然,你可以嘗試推進項目去做一下品牌屋,這對各個角色在產品認知上有很大的幫助。其實還有一個工具方法能夠幫助我們較好的完成各類關鍵詞提取。(Design O to O 主要是察覺用戶情感化的一個工具,工具里得出該類別情感相關詞匯和我們想要得出的視覺品牌關鍵詞概念非常接近,所以推薦作為遇到這類情況的解決方法。)

          ▲Design OtoO方法 

           

          這套工具方法的核心步驟分別是:收集,組織,反應,評估。每一步都有一些工具模型可以套用,能夠較準的幫助大家達到目標,找出合適的關鍵詞。

           

          可視化

          前面我們得出篩選后的衍生詞,是為了之后可以做出更全面、精準的可視化情緒版。很多設計師在情緒版制作上比較隨意,這里也給大家一些我們團隊常用來搭建情緒版的方式。一般我們將收集的圖片依照3個維度(人物、場景、物體)進行歸納整理,這樣共性的東西更容易被發現。當然,拼貼整理的方式很多種,也包括常見的任意拼貼、參考式拼貼和精致化拼貼。大家可以多試一些平時不怎么用的維度進行拼接,也許會帶來不一樣的靈感。

          ▲情緒板拼貼常用方法

           

          4、 提取元素建立視覺符號

          每個情緒版帶來的設計靈感都不相同,所以最終會有多個視覺符號方案。第四個step就是來解說如何從單個的情緒版里提取視覺符號的特征。

          ▲組成視覺語言最基本的五個維度

           

          “形色字構質”是組成視覺語言最基本的五個維度,當你描繪一個東西的樣子時,你通常會從這五個維度去闡述。所以,我們也從5個維度來提取視覺符號的特征。需要注意:五個維度不一定需要全部進行提煉,有時候遇到前期已經確定的就可以直接拿來用,也有的不涉及的,比如字體可能在部分圖標里沒有出現也就不需要提煉。讓我們來對色彩、圖形、字體、質感、構成這5個維度來細細展開:

           

          (1) 色彩

          ▲快捷工具Dopelycolor對圖片進行色彩分析

           

          色彩提取常規是可以從情緒版里找出的,最簡單的辦法就是找出占比高的色彩并判斷選擇。這里分享一個快捷工具Dopelycolor ,能快速讓你提取圖片中顏色,以及占比,讓你清晰的了解圖片用色情況。

          ▲提煉色彩需要重要關注4點

           

          需要注意的有以下幾點:1、已有的品牌色是否要延續使用 2、選中顏色需要后期調整三元素,達到最好的視覺效果  3、如果有輔色,主輔色多結合色環考慮合理性 4、你選的顏色是不是和市面競品太過雷同,是否要做點差異化?

           

          (2) 圖形

          對于我們大多數產品目前現狀,符號基礎圖形是不宜變動的。大環境也是如此,例如很大一部分視頻類應用圖標都圍繞播放三角展開。因為變化會引起用戶新的理解,可能會帶來識別和理解的成本,所以項目設計師在方案的設計階段,會多做幾個保守的常用圖形相關方案。

           

          另外,在沒有基礎圖形的產品品牌中,通常需要通過腦暴會去討論出適合產品的符號基礎形態。例如vivo積分商城在視覺品牌探索階段,組織腦暴會議,邀請項目中各個關鍵角色一起來發散討論適合積分產品的貨幣符號圖形(這也是積分定義的視覺品牌符號)

          ▲vivo積分商城貨幣符號發散腦暴會現場

           

          基礎圖形獲取方法介紹完了后,圖形的藝術表達,也就是圖形設計是需要我們通過情緒版或者常用創意手法來捕捉的。通過情緒版,我們可以提取出零碎的一些特征,這些通過觀察就可以提取了。比如下面這張情緒版圖上能得出的共性圖形特征有:描邊圖形、線面結合等。另一張能看出的有:大圓角、簡單幾何、Q型。

          ▲情緒板圖片提取共性特征

           

          特征好提取,但是如何去用于輸出我們的視覺品牌符號,這塊就依賴各位設計師的設計表達了。到這一步,建議參與的設計師們進行視覺比稿。比稿的設計師們可以看一看常用的6種創意設計手法,這些創意手法都是較常見的,在設計中協助我們創意的迸發。

          ▲6種常見圖形創意手法

           

          (3) 文字

          嚴格意義上,符號里的文字也是圖形的一種。不過,針對用文字來做的符號,可以參考字體創意設計的10個方法。這里不一一闡釋含義了,大家可以在網上找到更多每一類圖形的案例和應用解說。

          ▲10種常見字體創意設計方法

           

          (4) 質感

          如果要進行質感的提煉和確定,除了從情緒版里能夠找到一些共性的東西以外,也可以多在流行趨勢、設計網站材質圖形相關專題里,去嘗試獲取思路。在設計方案階段,可以多去嘗試不同的設計質感。

          ▲質感素材專題

           

          (5) 構成

          構成通常會用在版式,招貼之類的平面設計中。很多產品標志在構成上都很講究,圖標的內容和留白比例搭配合理,具備設計舒適感。我們在做符號設計時候,同樣要非常關注構成,好的構成會讓我們的符號更具魅力。常用的圖形構成有9種,我們在做圖形時候可以多去嘗試,也可以疊加嘗試,找到適合的構成樣式。

          ▲9大圖形構成

           

          案例

          回到視覺符號提煉的5大維度方法,我們來看下vivo瀏覽器是如何提煉視覺品牌符號的。由于不同設計師整理的情緒版,方案都不一樣,接下來來看瀏覽器視覺品牌探索眾多方案其中的一個例子。

          ▲視覺符號提煉的5大維度

           

          首先來看下瀏覽器目前一些背景設定,去除既定的情況,我們需要在這幾個方面找尋特征(輔色、圖形藝術、質感、構成),來完成我們的視覺符號。

           

          ▲vivo瀏覽器背景設定

           

          在這個方案中,設計師從情緒版提取了想要的特征(圖片中藍色文字):

          顏色:從情緒版提出占比較高的顏色,歸納成色組,在色環中逐一討論去留,去除對比強烈的黃色(因為瀏覽器作為工具類產品并不想傳達出刺激,沖突,過于活力的感受,故去除。)在鄰近色(青色、皮粉色)里考慮避開性別因素,青色更加適合。然后調整一下rgb,飽和度提高一些。

          圖形藝術:延續地球元素,情緒版提煉的:大圓角、簡單幾何、Q型,描邊圖形,線面結合。

          質感:瀏覽器在先前資料收集的時候就有傾向,考慮近兩年手機背面AG磨砂玻璃廣泛使用,界面上蘋果和微軟也整體設計轉向毛玻璃風格,關于這類品質感和空間感明顯的處理方式,瀏覽器設計師也想進行嘗試。

          構成:結合情緒版和圖形構成9個方法,提取并運用的主要特征是動勢,也是想賦予符號活力感受。

           

          最后,經過草稿比稿,評審通過的方案和確定的符號5個特征如下:

          ▲vivo瀏覽器符號的5個特征

           

          5、 完善主要頁面

          視覺品牌符號完成以后,接下來需要繼續繪制與符號強關聯的頁面。這些模塊有:loading、缺省、核心頁面、插畫插圖場景。不是把視覺品牌符號簡單的原封不動放在各個頁面里,而是通過一些設計手法將它更好的融入在頁面中。

           

          通常,核心頁面模塊的視覺呈現,都是基于已定的視覺品牌符號特征去發散。目前我們團隊有兩種不同的思路:一個是從先前符號里提取主要某個特征并結合場景做出版式布局的延展。類似我們做vi時候常用取logo的一部分進行圖形組合再創意。另一個是將已定符號的不同特征進行多個組合,創作出符合這些特征的衍生的新視覺。

           

          瀏覽器用的第二種方法,提取出的符號特征和定好繪制要求,其中為了保持整體風格的一致性,需要繪制的模塊特征應不少于一半目前特征(滿足1/2),如果有新增的特征需要保持和諧,不應該有其它明顯的風格傾向。這個也是用來檢查你做的系列衍生效果是否整體的標準。經常有同學做了一個很好看的缺省圖,但是風格特征與已定視覺符號風格相差甚遠,最后導致不能使用。

           

          下面是vivo瀏覽器視覺品牌符號延展的圖形或頁面樣式:

          ▲缺省圖樣式(6/8特征)

          ▲裝飾icon圖樣式(4/8特征)

          ▲特殊彈出層樣式(4/8特征)

          ▲視頻操作引導樣式(4/8特征)

          ▲應用在整體頁面效果

           

          看完瀏覽器的符號延展方法,再來感受下另一個方法:通過符號,延展多個版式視覺的案例——短視頻視覺品牌探索。項目設計師主要對視覺品牌符號圖形特征做了延展,局部提煉并創新版式。

           

          下圖是短視頻視覺品牌符號,基于此為基礎型,設計師根據總結的6種手法,用對稱、平移 等方式進行拓展,結合頁面實際情況完成。

          ▲短視頻品牌符號以及圖形應用解說

          ▲短視頻品牌符號頁面背景應用

          ▲ 物料拓展概念

           

          6、驗證視覺風格喜好

          完成主要頁面后,我們會進行風格測試,用來驗證不同的設計方案在用戶眼里的喜好程度,從而修正設計師的認知偏差。我們建議至少完成3個視覺品牌符號方案和對應3套頁面來供用戶測試。

           

          關于風格測試,是將已有的方案通過問卷和簡單的線下訪談,得出用戶的喜好結論。因為是敏捷測試,只需要一周就可以出結論。在這一步,有5條測試重點和對應解讀需要設計師關注,具體內容參考下圖:

          ▲5條測試重點與解讀

          目前vivo瀏覽器和i視頻都在視覺品牌升級時候,運用了這個較為敏捷的測試方法。

          ▲i視頻視覺品牌3套方案風格測試復盤

          ▲vivo瀏覽器視覺品牌升級核心頁面風格測試

           

          7、完成所有頁面的視覺效果

          經過用戶的驗證和后期修改,我們確定好了唯一的一套最合適的視覺品牌。在設計組內部評審+項目組核心成員評審效果通過后,接下來工作就是按部就班的去完成后續頁面的規劃和落地。這一環節的工作體量較大,需要花時間去梳理替換所有頁面。整體t替換預計耗時需要2周左右,建議多些成員參與完成。

           

          8、 整理成視覺品牌規范手冊

          最后一步也是最重要的一步,需要把視覺品牌的設計指導和規范進行沉淀。視覺品牌規范手冊是需要項目組設計師一起維護的。好的設計語言是第一步,維護和讓其發揮最大價值(原則、一致性、效率)是視覺品牌規范手冊的意義。

          ▲視覺品牌規范手冊4大模塊

           

          目前我們已經梳理出vivo瀏覽器、短視頻的視覺品牌規范手冊。內容包括4個部分:品牌概述、品牌符號、視覺語言、物料規范。對產品的視覺品牌理解和如何應用會完整的體現在手冊里,建議每一個參與項目設計師都應該在設計前先整體看一遍。

           

          結語

           

          視覺品牌的定義流程以及方法,是我們團隊資深ui設計師第三季度重點研究和探索的產物。希望能給正在做視覺品牌相關工作的設計師帶來一些幫助和啟發,如果有建議或者疑問,歡迎通過VMIC UED公眾號和我們交流,讓我們一起優化好這個視覺品牌定義體系,為用戶創造更好的視覺體驗。

           

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

          文章來源:站酷。 作者: vivo互聯網UED
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

           

          應用程序設計中的色彩原則

          ui設計分享達人

          顏色會潛意識地為觀看者提供有關應用程序的大量信息,即使他們從未閱讀過任何文字。


          什么是色彩心理學?

          不同的顏色實際上可以對人類的情緒甚至行為產生深遠的影響。這是全球各城市許多綠色和藍色倡議者背后的想法:綠色和藍色使觀看者感到更加平靜和放松。

          綠色對減輕壓力(和其他因素)的影響如此深遠,以至于實際上可以幫助人們延長壽命。

          這對應用程序設計意味著什么?

          嗯,顏色的影響不僅僅是觀眾喜歡與否,還會影響他們的感受。例如,深淺不一的藍色會激發忠誠和可靠的感覺。綠色激發舒適和幸福。黃色與快樂和刺激有關。紅色讓人興奮并引發欲望。

          但是那些不一定是感覺的東西呢?人們是否也傾向于將某些價值觀與顏色聯系起來?

          這項調查要求人們選擇與某個詞相關的顏色。他們發現:

          • 信任 = 藍色(34% 的受訪者)

          • 速度 = 紅色 (76%)

          • 便宜或便宜 = 橙色 (26%) 和黃色 (22%)

          • 高品質 = 黑色 (43%)

          • 高科技 = 黑色 (26%)、藍色 (23%) 和灰色 (23%)

          • 可靠 = 藍色 (43%) 和黑色 (24%)

          • 樂趣 = 橙色 (28%) 和黃色 (26%)

          • 恐懼、恐怖 = 紅色 (41%) 和黑色 (38%)

          應用程序設計人員在開發應用程序時最好牢記這些關聯。然而,這些都不是應用程序開發人員絕對必須遵循的硬數據。相反,它們是開發人員可以遵循的指南,并結合下面討論的其他設計原則。


          圍繞顏色的文化差異


          在選擇顏色時,牢記應用程序的受眾始終是至關重要的。

          例如,在西方文化中,白色往往代表純潔或純真。然而,在亞洲的某些地區,白色是用來表示哀悼、厄運和死亡的。顯然,如果應用不當,這可能會產生嚴重的意外后果。

          為此,設計人員應該了解他們的受眾并相應地選擇顏色,這在日益全球化的社會中并非易事。


          選擇主調色板


          應用程序設計人員和公司等都應該在確定其品牌的主要調色板之前進行仔細研究。最重要的是考慮觀眾和他們想要傳達的內容。

          藍色是一種流行的顏色,因為它與信任和可靠性有關,但它也變得有點過度使用了。

          橙色可以與廉價聯系在一起,但也可以與樂趣聯系在一起。

          紅色可以令人興奮和振奮,但也代表恐懼。

          更好的使用顏色來設計應用將有助于塑造觀眾的感知。設計人員需要了解顏色關聯以及用戶如何下意識地查看設計以創建成功的調色板。


          色彩和諧


          一旦應用程序設計人員確定了主要顏色,就該選擇其他顏色了。使用一種顏色很簡單,通常不會很引人注目。

          但是,選擇的顏色需要很好地搭配。

          沖突的顏色會讓觀看者感到不安或有壓力。相反,應用程序設計者應該尋求創造一種賞心悅目的組合。一種會讓用戶感興趣并讓他們對應用程序感覺良好的應用程序,從而引導他們嘗試它。

          這里有一些設計師可以遵循的基本原則,以在他們的設計中創造和諧的色彩。


          單色

          首先是在整個設計中堅持使用相同的顏色,但使用不同的色調。這增加了產品的興趣但又不會很突兀。


          類似色

          另一個流行的選擇是使用類似的顏色。這種方案也很難搞砸,盡管設計人員確實需要了解每種顏色的飽和度。

          此方法可以使用色盤上彼此相鄰的顏色。例如,綠色和藍色,或橙色和紅色。


          互補色

          互補色方案使用調色板上彼此相反的顏色。例如,黃色和紫色或藍色和橙色。

          使用互補色時,設計師必須仔細選擇陰影和色調。如果做得不好,很容易創建一個視覺上不和諧的方案。

          但是,如果做得好,互補色可以使應用程序設計真正流行起來,并在眾多其他不那么吸引人的應用程序圖標中脫穎而出。這可以使用戶更有可能選擇該應用程序而不是其他類似功能的應用程序。


          分裂互補色


          這種方法有點復雜,但可以產生一些引人注目的結果。它采用三種顏色,一種顏色和兩種相鄰顏色的互補色。例如,從紫色開始,然后添加橙色和綠色。

          設計師必須小心使用這種方法,錯誤的組合會使設計從有趣變成突兀。


          正確的應用程序設計顏色

          總而言之,應用程序設計中的顏色世界非常復雜。沒有一種顏色會吸引所有觀眾,也不會適合所有品牌。然而,選擇正確的顏色絕對意味著一個成功的應用程序和一個普通的應用程序之間的區別。

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

          文章來源:站酷 作者:ZZiUP

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

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

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

          移動端信息超載設計怎么做?

          資深UI設計者

          移動端由于屏幕尺寸較小,而產品經常需要展示過多的信息,因此對用戶瀏覽行為進行設計,即“頁面信息超載設計”。

               從兩個大環境下看待這個問題,一個是移動端產品,另一個是PC端產品,這里我們主要討論移動端產品。

          由于移動端頁面尺寸較小的特性,常常無法像PC端那樣在一個頁面中展現出多信息多任務,因此在面對多級的信息架構設計時,最常規且傳統的做法是將某一場景/任務下的信息,通過設計頁面的跳轉/或增加頁面的長度來實現。

          但是一個現實的問題在于,用戶愿不愿意滑動?根據埋點數據顯示,在首屏沒有做好內容曝光的前提下,多數移動端頁面超過首屏的內容點擊量會急劇下滑,說明用戶很少主動的查看一屏以外的內容。

          因此對于移動端產品來說,一些重要的內容必須保證用戶在一屏內可以看到,而用戶有必要進一步閱讀的內容也需要做好用戶瀏覽行為的引導。

          從適用場景角度,可將信息超載的設計類型分為「頁面展示信息超載」和「頁面版塊信息超載」,本文將分為上下兩節針對此將進行詳細的案例分析分享。

          頁面展示信息超載

          根據不同的用戶需求以及適用場景,當用戶僅限于當頁的瀏覽時,如何保證大量的信息能有節奏、有目的的傳達給用戶是我們需要考慮的。

          在此類型中主要實現手段有隱藏化設計、場景分頁、無限加載、向下展開按鈕。

          隱藏化設計

          在探索更多業務場景的同時,APP的迭代不僅僅是優化更需要考慮功能的疊加,強調不同的場景聚焦于不同的核心信息上成為了重中之重,為了向用戶營造一種架構全面而使用簡單的用戶體驗,隱藏化設計的概念可以幫助我們拓展更多交互的可能性。

          優勢:

          1. 滿足用戶不同場景不同需求

          2. 產品架構更清晰,用戶使用更簡便

          劣勢:
          沒有提示和線索的隱藏則需要做好新手引導,如早期微信小程序的下滑打開方式等。

          適用性:
          適用于一些多場景的產品,和用戶場景具有明顯行為特點的產品功能模塊中

          交互細節:
          結合上面的案例展示,主流app的隱藏化設計主要體現于卡片模態面板、屏幕擴展、浮窗。

          卡片模態面板

          自從19年ios13發布新設計特性,卡片模態面板就陸陸續續被運用到各大產品中。

          1. 使用熱區高頻于屏幕的中下方,且手勢方便快捷,適合單手操作,因此廣泛的用于一些出行類的app

          2. 具有可伸縮的特性,可適用于一個頁面的不同場景

          3. 處理當前模態面板的任務時,仍然可以看到面板后的界面環境,并不會讓用戶有太大的抵觸感。

          4. 但是使用時需要注意,模態的用途是切換任務狀態,不要僅因為喜歡它的樣式和動效而使用。

          5. 不適合用于展示沉浸閱讀內容,建議設計于復雜度不高的支線任務。

          屏幕擴展

          如案例展示的系統負一屏、蝦米音樂)

          當頁面的功能屬于重要但低頻時,可以考慮使用屏幕擴展進行設計。

          此類型常見的交互設計方式有兩種:一種是常見于各大手機系統主頁以及微信的“負一屏”設計;另一種是app首頁的“二樓”設計,如上面案例展示的“蝦米番你街”,還有淘寶之前推出的“淘寶二樓”。

          使用時需要最注意的是:

          此形態的設計和產品賣點已經運營思路是緊密相關的,需要綜合考慮

          浮窗

          這個控件的使用可能會和屏幕擴展的使用聯系較為緊密,從微信前期浮窗的使用情況來看,不排除是為了解決當使用小程序時無法接受到新消息,但又怕退出后無法找回而產生的焦慮感而誕生的功能。但同樣也是為了解決用戶不同場景的不同任務需求。

          但當浮窗中只有一個待看文章時,需要單擊浮窗后再點擊熱區才能打開內容,兩次點擊行為可以考慮是否有優化的空間。

          除了隱藏化設計,以下傳統頁面信息過載的處理方式也值得思考:

          場景分頁

          翻頁場景常伴隨著分頁器的使用,通過上下頁翻閱來進行信息瀏覽。

          優勢:

          1. 快速告知用戶信息量

          2. 可自主性選擇瀏覽內容

          3. 便于定位回找

          4. 瀏覽信息更有節奏感

          劣勢:
          需要點擊跳轉來獲取更多內容,如果設計不符合使用情景,會在一定程度上打斷用戶的思路,很有可能就會導致用戶的流失。

          適用性:
          移動端中可適用于一些對內容的掌控更強的場景,需要用戶更專注,如后臺表單等,

          但隨著移動互聯網的發展與移動設備的普及,早期的網頁端社區類產品和線下書籍的閱讀也開始嘗試轉戰移動端,可受限于功能形式和用戶習慣的使用差異,以至于需要在兩端之間做好平衡,去考慮用戶操作習慣以及兩端適配的問題。

          因此,較為早期的一類互聯網產品和由線下普及到線上的場景,會采用分頁的方式來綜合用戶在兩者之間的行為習慣,我們也可以看到像知乎這類普及于移動端的產品都并沒有選用分頁的方式進行內容的設計,而是直接設計貼合用戶移動端行為習慣的交互方式。

          交互細節:
          在移動端使用分頁器,一般常見為滑動條和動作面板這兩種控件進行設計。

          仔細去體驗了這兩款產品,發現它們的分頁并不是單純意義上的分頁,而是整合了無限加載與分頁選擇。

          類似于無限加載下滑,但是會自動定位到具體頁數上,比如我滑了 6 次,頁數就到了第 2 頁了。

          從這里看出,移動端出現內容加載的情況時,還是以無限加載為主要方式,即使有分頁,也是輔助作用。

          引發思考:

          滑動條的選頁方式也考慮在滑動滑塊的過程中頁面展示跟隨滑塊位置而變化,選定內容位置后點擊確認,否則可以點擊取消回到選擇前原來的位置。

          無限加載

          即無限滾動加載,通常以 Feed 流/瀑布流的形式出現于產品中,允許用戶通過滾動瀏覽大量內容而不刷到頁面最底層的技術。當你向下滾動頁面時,這種技術將會持續地刷新頁面。

          優點:
          沉浸式信息瀏覽,不會被打斷,增加用戶參與度,促進用戶停留更長時間。

          比起小熱區范圍的點擊行為,滑動對于用戶來說更為簡便更友好,尤其在移動端可以快速瀏覽到感興趣的內容

          缺點:

          1. 無法預知有多少信息,用戶容易產生迷失感,卻無法回定位內容

          2. 對頁面性能要求更高,用戶向下滾動頁面越多,頁面上承載的內容就越多,會導致頁面性能越來越慢

          3. 對設備資源要求更高,在含有大量內容的app中,資源有限的設備(如iPad)可能由于其已加載的內容信息過多而開始降速

          適用性:
          在移動端更方便使用,適用于快速瀏覽內容和發現內容的場景,如休閑娛樂為主的社交型產品/資訊性產品

          交互細節:
          對于這類交互形式,最高頻的用戶需求是回到頂部和資訊內容的刷新以快速尋找感興趣的內容。


          回到頂部

          這類需求常規解決問題的方式是點擊界面頂部回到頂部(ios用戶常用操作),除此之外最常規的操作是在頁面右下角的回到頂部懸浮按鈕。

          還有一種結合用戶心理認知的交互行為設計——底部欄首頁icon的利用,如上面案例的淘寶和同花順,點擊首頁icon可回到初始位置重新加載,淘寶/同花順過把這一隱藏操作顯性化,并且合理利用用戶回到頂部的需求,當用戶不斷下滑頁面時icon變成火箭/刷新的樣子,點擊后立即回到頂部并可進行所有資訊的重新瀏覽。


          尋找感興趣的內容

          無限加載最大的優勢就是能幫助用戶快速瀏覽以找到感興趣的內容,但當頁面本身預加載的內容就都不能吸引用戶興趣,就需要考慮如何通過設計幫助用戶找到真正感興趣的內容。

          如上面案例的同花順和知乎,當瀏覽同花順時,長時間沒有點擊進入任何一篇文章時,在瀏覽中部就會出現刷新提醒;當在知乎的搜索結果頁滑動大概3屏后,知乎會分析判斷用戶沒有找到他想要的信息,于是出現“向知友提問”的按鈕,引導用戶直接提問自己想要的(亮點之處在于對用戶行為進行潛意識分析,而不是全程展示這個提問按鈕,避免減少用戶實際瀏覽區域,造成干擾)。

          向下展開按鈕

          在pc端的網頁中,為了折中分頁和加載的利弊,常常會選用“查看更多”的按鈕,點擊后向下繼續進行加載,同時也能給用戶更多的停頓和節奏去主動的獲取更多的信息。

          而對于不停強調活躍度的移動端的產品來說,向下展開的“查看更多”按鈕,不僅僅只是折中的思考,還有運營層面的考慮。

          (向下展開更多的情況還分為兩種,一種是向下展開更多選擇,另一種是向下展開看到全部內容,以下講的更多是后者)

          優勢:
          產品運營層面

          1、增加點擊促進引流/轉化

          引導注冊、關注、付費等的轉化

          2、為精準推薦提供更多依據

          網站可以通過用戶點擊“閱讀更多”按鈕的行為,獲取有效點擊的用戶數,精準收集用戶閱讀喜好,開發完善用戶畫像,便于日后精準推送某個作者、某類作者、某類文章給點擊的用戶以及相似的用戶群體,優化智能推薦。

          3、判斷文章真實質量

          通過文章點擊的人數、點開率等對創作者進行管理,便于把控平臺內容質量,重點支持優質創作者,從而建立更好的內容生態。

          用戶層面

          1. 增加半遮面的神秘感

          2. 保證穩定快速的閱讀體驗,提升加載性能

          3. 降低閱讀成本

          劣勢:
          若不是為了提升轉化率或者增加曝光率,僅是展示型文章,就會犧牲掉部分的用戶體驗。

          適用性:
          適用于需要考核的內容創造者、需要收集更多用戶數據的產品

          總結

          移動端由于界面空間有限,具有「一個界面一個任務」的特點,因此當面臨產品增加功能時,不能一味在界面中進行功能的堆積排列,而應該更強調于頁面場景化的設計,同時頁面中的每一個細節設計都應該做到恰到好處,減少用戶思考是否需要使用的精力。

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

          文章來源:站酷 作者:六月星光

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

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

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


          金剛區的交互設計思考

          資深UI設計者

          金剛區是什么,想必大家都有所了解。

          沒有的話看這張圖就懂了:

          不止畫圖標!5 個金剛區的交互設計思考

          圖片來源:淘寶首頁

          我在微信上搜了一下,發現大部分討論金剛區設計的文章,都是在講怎么畫圖標。

          但是我自己在使用各大 APP 的過程中,發現很多金剛區并不是那么好用,而且這跟圖標好不好看無關。

          金剛區設計不好,會對我的使用造成直接影響:

          1. 不夠清晰易懂根本不想去看
          2. 首次使用找不到需要的內容
          3. 下次使用記不住圖標的樣子
          4. 圖標設計得怪怪的不好理解

          我今天就來總結一下,對于金剛區設計的交互/體驗思考:

          • 數量
          • 順序
          • 顏色
          • 樣式

          數量

          金剛區里有多少項比較合適?

          這其實是米勒法則(Miller’s Role)的典型運用了。

          如果你還不太了解米勒法則,看看下面這張圖里的詞語:

          不止畫圖標!5 個金剛區的交互設計思考

          現在,半分鐘回憶一下,你記住了多少個?

          ……

          大部分人能記住 5~9 個。

          米勒的研究發現,普通人的工作記憶(Working Memory)只有 7±2 個信息塊。

          如果給的信息超出了這個數字,大部分人也只能記住這么多。

          所以說,金剛區里的圖標數量,最好也維持在這個數,否則就是對用戶的記憶能力要求過高了。

          通常來,4 個圖標很輕松,說 6 個圖標是比較理想的,8~9 個就有點吃力了,10 個就超綱了。

          例如支付寶這個就過分了,好在這只是工具類產品,復雜一點也沒辦法:

          不止畫圖標!5 個金剛區的交互設計思考

          順序

          人們在看閱讀文字時,視線軌跡是之字形:

          不止畫圖標!5 個金剛區的交互設計思考

          人們在閱讀表格時,視線軌跡是除草機形:

          不止畫圖標!5 個金剛區的交互設計思考

          上圖來源:這樣設計表格,看著真難受!

          雖然金剛區的眼動圖我沒有,但第一步肯定是從左上角開始往右掃。

          不止畫圖標!5 個金剛區的交互設計思考

          所以,用戶最有可能使用的圖標,應該從左到右排在最上面一行,最不常用的可以排在右下角。

          例如美團外賣這個設計,看著就挺合理。不但把重要內容放在第一行,而且還做了很大的視覺區分:

          不止畫圖標!5 個金剛區的交互設計思考

          不過一些不愁流量的 APP 會選擇把黃金位置用做商業宣傳,難免損失點易用性。

          顏色

          1. 仿真圖標

          如果追求質感,多半會使用物品本身的顏色,例如每日優鮮這個:

          不止畫圖標!5 個金剛區的交互設計思考

          這種圖標就沒什么顏色好討論了,注意一下整體和諧就好。

          2. 數量較少

          如果圖標數量不多可以使用一個顏色,那么顏色上,同樣沒什么好討論的。

          例如 QQ 音樂:

          不止畫圖標!5 個金剛區的交互設計思考

          3. 數量適中

          如果圖標數量在 7 個左右或以內,那么可以每種顏色的圖標都來一個,這樣用戶也能記住大概什么顏色代表什么。

          例如京東這樣:

          不止畫圖標!5 個金剛區的交互設計思考

          4. 數量很多

          圖標數量遠超過 7 時,就不可能每種顏色來一個了,否則顏色都不夠用了。

          如果還是想要劃分顏色,可以將類型作為依據,這樣用戶在尋找圖標時會比較有方向。

          當然,其實也可以簡單點,干脆都一個顏色,例如聯通手機營業廳:

          不止畫圖標!5 個金剛區的交互設計思考

          樣式

          1. 底框

          一些產品為了統一感,會用圓圈或者圓角矩形,把所有圖標都框起來。

          這樣視覺上是好處理了,但交互上很不推薦,因為會大大降低圖標的識別度,乍眼一看都長一樣。

          這種底框在主流產品里已經很少見了,不過這么做的設計師還是不少:

          不止畫圖標!5 個金剛區的交互設計思考

          這種圖標數量少,有顏色區分還好,如果數量多又一個顏色,那就很難辨認了。

          風格

          縱觀常見的金剛區圖標,通常不外乎四種樣式:線條、形狀、2D、3D、仿真。

          不止畫圖標!5 個金剛區的交互設計思考

          聯通手機營業廳

          不止畫圖標!5 個金剛區的交互設計思考

          QQ 音樂

          不止畫圖標!5 個金剛區的交互設計思考

          京東

          不止畫圖標!5 個金剛區的交互設計思考

          美團外賣

          不止畫圖標!5 個金剛區的交互設計思考

          每日優鮮

          任何樣式都能讓用戶識別和記憶,但是不同的樣式給人的感官不同。

          真實性越高的視覺樣式,就越容易給人高級的感覺;相反真實性越低的視覺樣式,越容易給人簡單邊界的感覺。

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

          文章來源:優設  作者:ZoeYZ

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

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

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



          feed流應該如何設計

          資深UI設計者

          編輯導語:在當今內容為王的時代,傳統的信息流無法承載日益豐富的產品內容,一種個性化的內容推薦方式-feed流逐漸孕育而生。本篇文章中作者分析了feed流的組成元素,以及常見的feed流樣式。推薦對feed流感興趣的朋友們閱讀。


          在這個內容為王的時代,各個類型的產品都開始圍繞著自己所處的賽道營造豐富的信息流,傳統的信息流不再能承載當下豐富多樣的內容,信息流也不再單純屬于信息類以及文娛類產品,許多金融類產品甚至是工具類產品都開始有了社區,不同類型的內容開始進入用戶的視野。

          因此傳統的信息流無法承載日益豐富的產品內容,逐漸一種個性化的內容推薦方式-feed流逐漸孕育而生,其樣式豐富,其中包括大卡流、雙列流、沉浸流、動態流、文本流、動態流、櫥窗流…..筆者將在本文中分析feed流的組成部分,以及使用場景和設計要點。

          一、feed流的主要組成部分

          筆者調研了不同類型的feed流,發現feed流主要由以下幾個部分組成。如下圖:

          筆者為大家挑選了幾個比較常見的元素為大家進行分析。

          1. 圖片/視頻

          在大多出產品的feed流中,占最大面積的就是圖片或視頻。相較于文字,圖片更能夠激發用戶點擊的欲望,在帶有社區屬性的產品中,設計師還需要考慮如何適配橫屏以及豎屏封面。

          其次是如果該位置出現的是視頻。在常見的視頻產品中,當系統識別出該內容處于用戶界面的中間區域,則會自動進行預告播放。在1-2秒的時間內,用戶能夠快速瀏覽視頻中最精彩的部分。在展現方式上通常使用帶有圓角的距形進行展示,圓角一般設置為:8、10、12、14、16、20PX。

          2. 標題

          在feed的設計中,標題是最不可缺少的部分,在字體的設計上,大多數采用黑色字體。在排布方式上在一行至兩行,如出現標題字數過多,可以用「 … 」的方式進行呈現。其次需要限制產品的創作者以及運營在配置標題時,注意文案應該簡明扼要,不要過于累贅。

          3. 文案

          該區域可以叫做文案區域或二級標題區域,在該區域的設計中,字體顏色建議大多數采用灰色進行展示。在文案的編寫上可以加入更帶有引導性的詞匯用于引導用戶點擊。

          4. 標簽

          標簽的出現目的主要有兩個方面,第一個方面是幫助用戶能夠快速的區分內容的種類如:預告、獨播、直播、精選、推薦等。用戶可以在眾多feed流中通過快速查看標簽進行篩選,從而快速找到自己想看的內容。

          第二個方面主要是幫助產品進行更加精準的流量分發,產品會根據用戶的操作習慣進行分群,再根據用戶興趣給每個群體打上相對應標簽。而這些標簽則是對應了不同群體的用戶,因此也就有了淘寶商城中千人千面的推薦形式。

          5. 輔助信息

          輔助信息主要是為了滿足不同產品的信息呈現,如在視頻平臺中,輔助信息可以承載電影評分、電視劇的集數、播放量、綜藝的更新日期、點贊數、評論等,甚至會加入相關的快捷操作如靜音。輔助信息在設計中,不易做的過于突出,需要清晰單個feed的信息層級,挑選必要的信息進行展現。

          6. 操作

          操作區域的目的是為了產品的算法更加了解用戶的偏好,因為用戶的興趣是會發生變化的,如果用戶在某段時間突然特別不想看到某些內容,就可以通過點擊操作將內容進行「不喜歡」或「減少相關內容」的操作,這樣也能給予用戶對于feed流一定的自定義。

          在交互形式上,點擊操作區域后,建議采用較為輕量的交互方式,如點擊后出現底部彈窗或氣泡的形式。

          二、feed流的形式

          僅僅了解了feed的組成部分是不夠的。單個的feed流其實就像是英語學習中的單個單詞一樣,單獨的去死記硬背某個單詞其實意義是不大的,feed流的設計也同樣如此。

          我們還需要擁有能夠將前面提到的組成元素,拆開和重組的能力,因為不同的產品業務屬性不同,所需要給用戶提供的內容也就不同。接下來筆者就給大家介紹一下常見的feed流形式。

          1. 文字流

          介紹:文字流多在信息類產品如知乎、百度,或產品的用戶評論區當中。此類樣式可以運用在以文字為主的feed流設計中,并且還可以與動態流(下文會提到)之間搭配使用。

          由于適配度高,可容納更多的操作按鈕,因此可以服務與以UGC內容為主的產品,UGC產品需要強調用戶之間的互動,需要將互動類快捷操作外露。

          如下圖:

          使用場景:以文字為主的信息類產品,新聞資訊類產品、評論區、產品發現頁/社區

          設計要點:在文本流的設計中,需要注意的是區分信息的優先級,其中標題可以采用大字號加粗的方式進行區分,正文則可以采用黑色常規的字體。

          操作區域以及輔助信息可以布置在正文的下方,灰色處理,頭像以及標簽可以作為一個整體進行布局。在交互上,可以將分享/評論/點贊等按鈕外露,從而降低用戶的互動成本。

          2. 大卡流

          介紹:該樣式主要服務與以圖片/視頻信息為主要內容的feed流。以淘寶為例,在淘寶2020年提出“逛淘寶”的理念后,不再一味的追求交易的最短路徑,而是讓用戶在首頁點擊了某件商品之后,進入的是一系列同類商品的feed流,而不是商品的詳情頁。可以看出,大卡流非常適用于圖片/視頻信息的展示。如下圖:

          使用場景:以圖片為主的內容且需要搭配相關操作,如評論/進入詳情/分享/點贊等。劣勢是單排僅顯示一條feed,所需空間較大,在首頁不適合單獨使用,需要和其他feed樣式進行搭配。

          設計要點:在大卡流的設計中,由于空間較大,需要注意標題和操作區域的擺放位置,其次是需要把控創作者或合作媒體上傳的圖片質量。最重要的是需要考慮適配橫屏和豎屏的封面,由于圖片比例的不同,會涉及到相關操作交互一致性以及視覺一致性的統一。

          3. 雙列流

          介紹:筆者認為將雙列流帶到用戶視野的產品非小紅書莫屬,從小紅書發布之初到現在一直采用雙列流的形式。它的好處是能夠最大限度的將以圖片為主的feed內容呈現給用戶。

          樣式最初以長卡樣式為主,主要用于適配豎屏圖片,但隨著現階段UGC內容的發展,雙列流也開始適配橫屏封面。如優酷的首頁feed,則是采用了雙卡流中的短卡樣式,也不乏將長卡和短卡搭配使用的情況。

          使用場景:主要適用于需要以圖片為主的UGC產品,非常適合用于首頁,但不推薦與其他feed樣式結合使用,容易打破雙列流左右兩則的排布節奏。對于相關操作按鈕從數量上有局限性,不建議外露過多按鈕,可以探索長按吊起更多操作的交互方式。在具體的設計樣式上,建議參考小紅書,僅將創作者與點贊數的操作進行外露。

          設計要點:在設計雙列流的過程中需要考慮左右兩列之間以及上下兩行之間的間距,由于內容與內容之間圖片的高度不同,標題字數不同,因此需要制定良好的規范,從而保證用戶在瀏覽內容的過程中保證兩列內容之間的節奏感。其次是控制操作按鈕的個數,需要根據產品實際需求,僅將最總要的操作進行外露。

          4. 沉浸流

          對于沉浸流的使用最具有代表性的是抖音以及快手,隨著各個產品賽道都加入了短視頻以及直播間的模塊,該類樣式幾乎能夠在所有頭部產品中見到。如在淘寶的商品詳情頁以及首頁都加入了直播的模塊,點擊進入后可以沉浸的了解電子產品的測評或是服裝的實際上身效果,從信息傳達上會比單一的圖片更加多元更具有沉浸感。

          使用場景:該類樣式主要適用于短視頻、直播間

          設計要點:由于在不同產品中,短視頻起到作用不同。

          比如在淘寶,短視頻的目的是給予用戶更直接的效果展示,讓用戶能夠快速的了解到產品的優點,從而下單。

          因此短視頻在淘寶詳情頁中的作用就是激勵用戶購買,所以會在左下角加入購買的鏈接。再比如在視頻類產品中,如優酷則是提供相關的電影片段,那么目的就是為了給產品中的電影播放區導流,因此在設計過程中也會有相應的改變。

          在使用沉浸流的過程中,需要結合實際項目需求,不能將抖音快手的設計方式直接照搬到自己的產品中,這樣容易導致產品功能割裂的情況。

          其次是需要將功能進行分區展示,如可以將同類的相關操作聚合放置在固定的區域,由于沉浸流功能按鈕會非常多,因此對用戶容易造成干擾,容易找不到想要操作的按鈕。

          5. 動態流:

          介紹:微博和微信朋友圈是筆者認為將動態流使用的最為廣泛的產品,由于在這兩款產品中,內容過于豐富,不僅需要適配橫屏或豎屏的圖片/視頻,還需要考慮適配不同數量。

          并且需要將所有圖片展現給用戶,其中還不乏動圖。因此對于feed的兼容性提出了極高的要求。

          使用場景:動態流可以運用在主打UGC的社區類產品當中,以及單個產品中的社區模塊。

          設計要點:由于發布內容的主題是合作的媒體以及用戶用于記錄個人生活,因此動態流的優勢非常明顯,可以適配不同數量的圖片以及用戶的自定義標簽,因此動態流很難說是呈現以圖片/視頻為主的內容,還是以文字為主的內容,需要設計師與業務冊進行協商,找到feed對于產品的定位是什么。

          劣勢則是用戶難以抓住單條內容中的重點。因此設計師在設計的過程中,需要明確制定相關規范,靈活適配單數或雙數的圖片數量,從視覺上保證平衡。

          6. 櫥窗流

          介紹:櫥窗流在近兩年越來越多的出現在各大產品中,由于頭部產品都在往超級APP的方向進行發展。

          前面筆者給大家介紹的各種feed樣式之間都存在著各自的優勢和劣勢,但是依然無法滿足現在日益豐富的產品內容,因此櫥窗流誕生了。其樣式可以理解為將不同樣式的feed進行排列組合,給予用戶矩陣式的內容推薦。

          使用場景:多用于產品首頁金剛區的下方,作為產品中某項功能或服務的入口進行承載,如新品首發、現實搶購、正片回顧等。其次是運用在某類內容的聚合場景下。如將某一類視頻形成一個組合的片單,或者是將某一類書籍形成書單,但是由于內容過多,封面難定的問題,此時可以采用櫥窗流的方式進行承載。

          設計要點:雖然說櫥窗流能夠承載豐富的內容,容易烘托產品氛圍。但是設計師在設計過程中需要對視覺進行整體進行把控,由于單個區域中,可能會出現過多個內容,容易造成頁面混亂對情況。因此不宜把單個feed設計對過于出跳,這樣容易影響產品的流量分發。

          其次是需要區分單個feed之間對樣式差異,由于在櫥窗流中,單個feed屬于內容的集合,因此需要注意區分不同feed之間的樣式。

          三、總結

          在本文中,筆者粗略的分析了feed流的組成元素,以及常見的feed流樣式。其中不同的樣式各有利弊,并沒有某一種萬能的樣式,因此在設計過程中,需要結合業務目標以及用戶目標進行分析,分別分析對于標簽/圖片/文字/操作的需求,從而設計出最適合產品需求的feed。


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

          文章來源:人人都是產品經理   作者:黑羊

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

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

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

          為什么要用卡片設計?好在哪,怎么做?

          資深UI設計者

          很多人對APP中的卡片設計習以為常,但對于卡片設計流行的原因,優點,以及如何做好卡片設計卻可能不甚了解。關于這些問題,彩云之前也寫過一篇非常受歡迎的卡片設計經驗原創文章《想做好卡片設計,原來要注意這么多細節》,文章中講了非常多的卡片設計實用技巧。今天這篇國外大佬寫的文章,算是從為什么這樣做的角度來分析卡片設計,一起來學習吧。

           

          undefined

          從Instagram和Facebook這樣的社交媒體應用到亞馬遜這樣的電商平臺,卡片設計似乎是無處不在的,這些大廠廣泛應用使得卡片設計很快流行了起來。


          作為一個信息容器,卡片能承載包括文本、富媒體、按鈕等所有UI元素?;谶@些內容,卡片設計可以根據不同的設備和屏幕調整其大小,平衡界面視覺和用戶體驗。


          什么是卡片設計?


          卡片是一個UI組件,包含了某一個內容的信息和操作??ㄆ梢园鞣N元素,但它們都應該屬于同一個主題。

          undefined

          這樣做的目的是為了避免冗長的文字,并呈現更多的內容。即使從設計的角度來看,用戶可能不熟悉卡片的概念,但他們馬上就知道如何使用它們,因為它們與實體卡片是一樣的。(彩云注:這個就是用戶心理學中隱喻的運用)


          為什么它會如此流行?


          卡片之所以流行,是因為它們能更好的把控內容。卡片是模塊化的,所以不同的內容可以堆疊在一起,而不需要注意它們的差異。


          卡片通過強制內容適應卡片邊界和卡片布局上的限制來聚焦內容。設計師喜歡通過卡片混排大量內容,而無需擔心設計會變得雜亂無章。


          卡片可以將內容分解成易于理解的小塊,以便用戶與之互動。通過給內容一個容器,卡片向用戶表明內容是真實和感性的。


          卡片 UI 設計流行的原因還有很多:


          • 直觀:卡片在界面中看起來與現實世界中的卡片相同,它們對用戶來說似乎很常見。在卡片成為移動和網絡應用中的流行元素之前,它們在現實生活中無處不在:名片、棒球卡、便簽??ㄆ砹艘环N有益的視覺類比,它允許我們的大腦直觀地將卡片與其所代表的內容聯系起來,就像在現實生活中一樣。


          • 易于閱讀:卡片不占用太多空間,并敦促設計師優先考慮其內容。不同的是,每張卡片都變成了易于閱讀的內容??ㄆ層脩舾菀渍业剿麄兏信d趣的內容。


          • 有吸引力且對用戶更友好:基于卡片的設計通常非常依賴視覺效果(尤其是圖片);就信息架構而言,視覺層次會更加清晰。使用圖片有助于使基于卡片的設計比不在卡片中排列的相同內容對用戶更具吸引力。


          • 有利于響應式設計:卡片是矩形的,可以平滑地調整大小,以適應不同屏幕的水平和垂直正面,這意味著用戶可以在所有設備上獲得統一的體驗。


          • 便于分享:卡片可以鼓勵用戶在社交媒體上分享內容,因為它允許用戶只分享特定的內容,而不是整個頁面。



          什么時候應用卡片設計?


          這通常是當你有:

          • 基于搜索的界面:  卡片能通過模塊的內容快速顯示合適的內容,這使得用戶可以深入了解自己的興趣?;诳ㄆ脑O計是一種非常適合呈現這類內容的方式。


          • 信息瀏覽:當用戶瀏覽信息時,卡片的兼容性更好。


          • 任務管理:當可以將流程中的單個任務作為卡片進行說明時, 可以輕松組織卡片以獲取任務列表。任務管理應用在使用卡片式界面為用戶創建儀表板方面做得很好,其中每張卡片代表一個單獨的任務。


          • 類似項目:卡片最適合于異構項目的集合(當并非所有內容都是相同的基本類型時)。


          • 可視化分析:  儀表板通常在同一頁上同時顯示各種內容樣本。在這種情況下,卡片類比可以幫助在不同物品之間創造出更明顯的差異,其中每張卡片可以適應不同的角色。


          卡片解構


          卡片的布局可以不同,以支持它們包含的內容類別。下面的組件通??梢栽诙喾N卡片樣式中找到。

          undefined

          (1)富媒體: 卡片可以包含縮略圖,以顯示圖片,插圖,頭像,Logo,圖標或圖形。


          (2) 標題: 標題文本可以包含相冊或文章的名稱或標題。


          (3) 描述: 支持文本,如文章摘要或簡短的描述。


          (4) 行動按鈕: 卡片可以包含用于操作的按鈕。


          (5) 副標題: 副標題文本可以包含詳細介紹,如文章的署名或標記的位置。


          (6) 圖標: 卡片可以包含操作圖標。


          設計技巧


          有一些小的技巧可以快速提高卡片設計細節。


          1. 使用相關主題的圖片


          圖片是卡片設計的主角,你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像,卡片還可以包含插圖、帶有淺色背景框的圖標或任何其他類型的富媒體,但需要與內容主題相關。 

          undefined


          2. 增加視覺層次


          卡片內的層次結構有助于引導用戶對重要信息的閱讀。將主要內容放在卡片的頂部,并使用排版來強化主要內容。使用空白和對比來分隔需要更多視覺分隔的內容區域。(彩云注:視覺層級對于信息表達至關重要?。?nbsp;

          undefined


          3. 限制內容長度


          一張卡片應該只包含重要的信息,并提出一個相關的觀點,以獲取額外的細節,而不是完整的細節本身。當我們試圖在一張卡片中放入太多內容時,卡片可能會變得很冗長,并失去與卡片類比的實際聯系,因為它不再像一張卡片了。 

          undefined


          4. 避免嵌入鏈接


          不要包含內聯鏈接,卡片應該自己鏈接。嵌入文字鏈接會讓用戶誤操作。 

          undefined


          5. 區分操作主次


          包含不同操作的卡片應該在視覺上形成對比。在下面的例子中,我通過使用一種較輕的色調而不是主要的按鈕風格來降低后續操作的視覺強度。 

          undefined


          6. 去掉分割線


          對于新手設計師來說,用分割線來區分內容是一種常見的方式,以此定義不同的組。這些邊框會造成不必要的視覺干擾,從而影響內容。

          undefined


          如何做到視覺上更美觀?


          APP中的卡片并不是純粹的擬物概念,但通常情況下,使用一致的類比和物理原理能幫助用戶理解界面并分析內容中的視覺層次。在卡片的情況下,你可以做幾件事:


          1. 使用圓角


          在形態上與真實世界的卡片進行視覺對比。圓角更有效,因為它們讓我們的眼睛容易跟隨視覺動線,“因為它更適合頭部和眼睛的自然運動”。 

          undefined


          2. 增加一個輕微的外邊框或者投影


          增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創造了一個層次,這有助于我們區分UI元素。


          然而,在設計中添加陰影并不像聽起來那么簡單。有時候設計師會過分強化投影效果,讓原本看起來不錯的設計看起來很廉價。避免使用純黑色的陰影。

          undefined


          3.注意字體和留白


          重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白,讓用戶有時間處理并進行視覺重置,有精力看完一張卡再到下一張。


          選擇簡單和基本的字體,因為基本的排版最大限度地提高了可讀性,并有助于瀏覽。


          一些優秀卡片設計的例子


          讓我們看看一些真實項目中的卡片設計案例:


          信息流中的卡片設計


          保持信息流卡片簡單是很重要的。它們應該有一個一致的、重復的結構,但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素,以使讀卡片的人更容易理解它們。 

          undefined

          由Diseno Constructivo和Webpixels設計


          他們突出特色圖片和標題作為最突出的元素,這能幫助用戶決定文章或發布的內容是否適合他們。


          電商卡片設計


          產品卡片是一個很重要的東西,它可以幫助你將訪問者轉化為客戶。一張優秀的產品卡片應該能夠吸引人們的注意,激發人們獲得產品的欲望,激勵人們購買,并在搜索結果中得到高效推廣。 

          undefined

          由Webpixels設計


          產品的名稱應該放在最顯眼的地方,這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語,所以你需要一個高質量的產品配圖來設計完美的產品卡片。


          如果產品有特價,不僅要在價格欄中注明促銷價格,還要注明常規價格,以及客戶可以節省多少錢。


          個人中心卡片設計


          簡介卡已經成為一個應用或網站中的功能模板。隨著個人品牌變得比以往任何時候都重要,卡片設計在這里也能發揮重要作用。 

          由Neelesh Chaudhary設計


          就像每一張卡片一樣,配置文件卡片也是一個UI組件,它包含了對它所代表的內容至關重要的信息。為了達到你的目標,你要向其他人推銷你自己。


          確保只包括必要的信息(例如,照片,名字,職業),讓你的“關于”頁面有剩余的細節來完善你的個人資料。


          儀表盤卡片設計


          儀表板的設計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據儀表板的類型,每張卡片可能包括概要信息、通知、快速鏈接或導航設計元素、關鍵數據、圖表和數據表。確保你為每個元素使用了正確類型的卡片。 

          undefined

          由Simmmple設計


          儀表盤卡設計允許用戶決定他們想要關注哪些數據。易于理解的UI,允許用戶精確地控制哪些數據需要在儀表板的前端做好。


          只包括最相關的信息,為用戶使用方便。當你的數據集在一起看更容易理解時,找到在一張卡片上顯示它們的方法。但是要小心,不要讓用戶感到困惑。


          日常計劃卡片設計


          看板任務卡似乎是一件非常簡單的事情——拿一張便簽,寫下你需要做什么,然后把它貼在墻上。這些卡片必須包含需要行動的單位數量。它們還可能包含各種各樣的其他信息,清楚地傳達了必須做什么。 

          undefined

          由Neelesh Chaudhary設計


          卡片上包含的信息包括任務的名稱和重要的細節,如任務的類型和誰擁有它??窗蹇ǚ旁跔顟B類別下。最基本的狀態類別是“計劃要做”、“正在進行中”和“完成”,但是狀態可能因項目而異。


          卡片結構最適用于添加或刪除任務這樣的小改變,而不是改變像你的總體目標這樣的大想法。


          總結


          有幾種方法可以使卡片設計更加有效。通過最初定義和觀察卡片,我們可以更好地了解跨行業的這種設計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動??ㄆ谔峁┰S多不同種類內容摘要的環境中尤其有效,而不是簡單地作為內容列表的現代替代品。

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

          文章來源:站酷   作者:彩云sky

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

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

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

          適老化設計研究實踐

          資深UI設計者

          編輯導語:現今以至遙遠的將來,我們將面對一個殘酷的現實問題:人口老齡化。未來將有很多人群去關注這個群體,但是在市場上,對老年人的產品還是很少的,還存在很多問題。本文應對這個問題,展示不同適應老年人的產品設計細節,我們一起來看看。

          當前,我們正面臨老齡化問題的嚴峻挑戰。

          統計表明,中國的老齡化人口已達到2.64億,且這一數據仍在持續增長,而老年人在生活、情感上都面臨諸多問題。

          • 首先,老年人在視覺、聽覺、肢體、認知方面都出現了不同程度的退化,無法平等地獲取信息和服務;
          • 其次,年輕人涌向大城市尋找機會,老年人被迫成為空巢者,疫情的發生更使親人長期兩地分離,老人情感孤獨缺少陪伴;
          • 另外,疫情的爆發也促使線下服務轉為線上化,老年人不能很好適應這一轉變,遇到很多困難。

          但是研究發現,市場上目前沒有產品很好解決了上述問題。

          當下移動APP產品缺少對老年人體驗的深層次關注與設計,只通過單一加大字號與簡化功能等解決基礎體驗,缺乏通過新技術應用和更全面的適老化設計服務老年群體,老年人的需求依舊未得到關注和滿足。

          因此,百度基于自身雄厚的AI技術和精細、系統的適老化設計適時推出百度大字版,使老年人更平等地獲取信息和服務、獲得情感陪伴。

          百度大字版精細系統的適老化設計研究實踐

          百度大字版精細系統的適老化設計研究實踐

          一、精細系統的適老化設計:易閱讀、易收聽、易操作、易理解

          目前行業內缺失成體系的老年人研究報告,針對老年人的研究資料分散在建筑/平面/醫療/家居等各個行業,同時業內也缺少針對老年人系統的設計標準或設計指南。

          現有無障礙設計標準針對殘障人士,且部分標準只適用于PC端,不適用于老年人和移動產品。

          因此在進行百度大字版的適老化設計時,我們系統的研究了老年人面臨的問題、PC端無障礙設計標準及其他相關資料,產出了系統的移動端適老化設計標準體系,同時結合百度大字版實際場景產出了解決方案。

          適老化設計包含:易閱讀、易收聽、易操作、易理解四個方面,后續將詳細闡述。

          百度大字版精細系統的適老化設計研究實踐

          1. 易閱讀

          隨著年齡增長,老年人會出現視力下降、色彩感知弱、動態視覺減弱的問題。

          老花眼、眼睛進光量減少等問題會導致視力下降。

          眼睛晶體渾濁,晶體變黃的現象會導致色彩感知弱。視力減退,注意力降低,導致眼睛失去快速對焦的能力,動態視覺減弱。

          因此為了使老年人更易獲得視覺信息,我們對界面元素做了一系列的改造,使內容更易閱讀。

          1)增大字號

          增大字號是適老化設計最有效的手段。

          PC端WCAG無障礙設計標準建議字號可以放大到200%。

          按不同的閱讀媒介與人眼距離進行推導,移動端字號大小建議在60px-81px之間,標題、正文、輔助信息等不同信息層級采用不同的字號標準。

          此字號標準經過眼動實驗和用戶訪談進行了雙向論證,形成完整覆蓋各信息層級的字號大小標準,已經在百度大字版落地。

          百度大字版精細系統的適老化設計研究實踐

          字號與眼睛距離對照圖

          百度大字版精細系統的適老化設計研究實踐

          字號標準體系

          百度大字版精細系統的適老化設計研究實踐

          字號應用場景

          2)使用符合老年人生理、心理特征的顏色

          老年人眼睛晶體變渾濁、變黃,導致對色彩的感知減弱,且研究表明老年人更喜愛溫暖明亮的顏色,更希望感受到活力而不是蒼老。

          因此在顏色的設計上,我們通過增加色彩對比度到不小于3:1、大量使用暖色調、減少紫色和青色的使用3個手段,來進行界面色彩的設計。

          百度大字版精細系統的適老化設計研究實踐

          顏色的選取和使用

          3)提供有效的反饋提示

          老年人的動態視覺減弱,對動態內容的捕捉和感知速度明顯下降。

          因此,對界面中短暫出現的提示性信息,我們在現有提示時長的基礎上延長了一檔。

          例如現有提示的停留時間小于3秒時,百度大字版延長到3秒,現有提示的停留時間在3-5秒之間時,百度大字版延長到5秒。

          現有提示的停留時間在5-7秒時,百度大字版延長到7秒。超出以上時間則提供適當的關閉機制,避免打擾。

          百度大字版精細系統的適老化設計研究實踐

          提示時長適當延長

          2.易收聽

          隨著年齡增長,老年人也會逐步出現聽力下降的問題,聽力損失程度受地域、受教育程度、疾病等多重因素影響,且高頻和低頻聽力損失程度更深。

          因此我們通過增加音量、適當降低語速等方式幫助用戶更好的獲取聽覺信息。

          1)增大音量

          針對老年人聽力下降這一現象,我們適當增大了音/視頻的音量。

          研究表明,老年人聽覺平均感知音量在67.5~75.3分貝之間,因此在視頻開始播放時,我們對低于設定值的音量適當增加到約44%。

          百度大字版精細系統的適老化設計研究實踐

          iOS系統音量分布

          2)降低語速

          為了保證老年人有效的接收到聲音信息并進行理解,音/視頻的播放速度也需要適當下降。

          因此,我們減少了高檔位語速,并提供了高、中、低3檔語速,使老年人選擇適合自己的速度,更有效的獲取聲音信息。

          百度大字版精細系統的適老化設計研究實踐

          速度檔位選擇

          3.易操作

          移動應用需要通過手勢交互來完成任務,但老年人的肢體運動能力也會逐漸下降。

          動作精準度下降使老年人無法準確的完成手勢操作,對動作的精細控制程度降低。

          同時老年人相較年輕人運動更加遲緩,逐漸出現操作遲疑、猶豫或暫停,運動幅度或速度也會下降。

          因此為了保證老年人可以準確的完成操作,我們采用了增大觸控區、降低手指運動距離和精準度要求、提供有效的反饋提示、操作功能顯性化等方式。

          3)增大觸控區

          增大觸控區是使移動應用易操作的最簡單有效的方式,同時視覺設計上也需要讓老年人感知到觸控區增大。

          我們通過對iPhone XS Max三倍屏的分辨率和物理尺寸換算,結合人拇指和食指的點擊區域大小,推導出移動應用上,觸控區應大于等于112px×120px。

          百度大字版精細系統的適老化設計研究實踐

          觸控區域示意

          2)降低手指運動距離和操作精準度要求

          老年人的肢體運動能力下降,難以完成長距離、長時間、連續、高級的操作。

          因此我們集中界面的主要操作在屏幕下半部分,保證用戶在使用時手指移動的距離更短,同時減少使用具有明確方向性、精準度要求的高級手勢,如雙擊、旋轉圖片到正向等。

          百度大字版精細系統的適老化設計研究實踐

          降低手勢操作的精準度要求

          3)提供明確的操作反饋

          為了提醒老年人注意、告知其已完成操作、增強操控感,我們在特定場景增加了振動反饋,如臨界值、出錯、滑塊、警告場景。

          百度大字版精細系統的適老化設計研究實踐

          振動反饋

          4)隱性操作顯性化

          為了減輕用戶的學習難度,我們將所有隱性功能或需要手勢操作觸發的功能進行了顯性化設計,如點擊底bar刷新,功能隱性不易發現,百度大字版采用動態刷新圖標的形式,增強底bar可點擊刷新的感知。

          百度大字版精細系統的適老化設計研究實踐

          隱性操作顯性化

          5)輔助用戶輸入

          現實生活中,很多老年人不會使用輸入法,而且肢體運動能力的退化也為輸入帶來了不便,移動設備的輸入法操作區域小難以精準操作。

          因此我們依托百度的AI技術,提供了語音搜索和圖像搜索能力,使老年人可以方便的通過語音和圖像搜索主動探索獲取新知,答疑解惑,跟上時代進步。

          百度大字版精細系統的適老化設計研究實踐

          依托百度AI技術提供語音和圖像搜索能力

          4.易理解

          隨著年齡的增長,人的認知能力也會逐步下降,老年人會出現反應慢、學習力下降、判斷力下降的情況。

          他們很難一遍學會新內容,也難以判斷信息的真偽。因此我們通過簡單直白的文案話術、清晰明確的圖標設計、可信的來源設計來使內容易理解,安全可信。

          1)采用通俗易懂的文案

          由于老年人觸網時間短、受教育程度不同,難以理解專業的互聯網術語,為了幫助他們更好的使用產品,我們對專業術語都進行了簡化,采用了通俗易理解的文案。

          百度大字版精細系統的適老化設計研究實踐

          文案適配前后對比

          2)提供清晰明確的圖標設計

          為了幫助老年人更好的理解和使用產品,百度大字版的圖標設計都采用了簡單易理解的圖形,同時功能入口大部分采用圖形和文字結合的方式,通過雙重手段幫助老年人理解產品功能。

          百度大字版精細系統的適老化設計研究實踐

          圖形對比示意

          3)提升信任感

          在內容信息來源中或涉及經濟交易的環節,百度大字版通過增加官方標簽、提供官方平臺保障的方式來提升產品整體的可信度,增強老年人對產品的信任感。

          百度大字版精細系統的適老化設計研究實踐

          官方標識和保障示意

          4)提供即時的幫助

          為了隨時解決老年人遇到的問題,百度大字版提供了暖陽熱線,使老年人可以隨時打電話獲取專業人員的幫助和解答。

          二、AI賦能,情感陪伴

          由于很多年輕人去大城市尋找機會,導致產生很多空巢老人,他們情感孤獨,缺少陪伴。

          疫情的爆發,更使老年人在節假日也難以與家人團聚。

          因此百度大字版通過語音合成等AI能力,還原兒孫親友的真實聲音,用于全局內容播報朗讀,使老年人感受到至親至愛仿佛陪伴在他們身邊,緩解老年人的孤單和思念之情。

          全局語音朗讀也能解決老年人的閱讀障礙和長時間閱讀導致的視覺疲勞問題,同時可以解放雙手,使老年人隨時隨地聽朗讀。

          百度大字版精細系統的適老化設計研究實踐

          語音合成

          百度大字版精細系統的適老化設計研究實踐

          全局內容朗讀場景

          三、豐富內容,充盈生活

          百度大字版圍繞老年人的實際生活需求,依托百度的內容生態和個性化推薦技術,提供了符合老年人興趣的圖文和音視頻內容,一站式滿足了老年人的內容消費需求。

          • 在設計上,我們通過AI技術,對視頻增加智能字幕,方便老年人獲取視頻信息;
          • 在內容流的操作上,通過統一的容器和流式交互,為老年人提供便捷的操作體驗,使他們更方便、平等的獲取信息和內容。

          百度大字版精細系統的適老化設計研究實踐

          智能字幕

          四、生活助手,便捷服務

          百度大字版還提供了多種實用工具,滿足老年人疫情時代和日常的生活訴求。

          疫情導致線下服務線上化,因此為了幫助老年人適應這一生活方式的轉變,百度大字版提供了在線政務工具。

          很多老年人承擔了教育孫輩的責任,因此我們提供了一些輔助教學工具,幫助他們帶孩子。

          更有疫情地圖、垃圾分類等貼合日常生活場景的工具,使智能技術更貼近、融入老年人的生活。

          百度大字版精細系統的適老化設計研究實踐

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

          文章來源:人人都是產品經理   作者:百度MEUX

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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