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

          首頁

          從需求到上線:APP版本更新全流程管理實踐

          杰睿 移動端UI設計文章及欣賞

          不是每次發版都值得一次更新提示,但一次提示背后往往藏著多套客戶端邏輯。近期搭建某 App 時,重新梳理了版本更新策略,才意識到版本判斷、策略配置、彈窗聯動之間存在大量隱性耦合。多客戶端、多版本共存下,稍有不慎就可能出現更新不觸發、提示錯位等問題。

          從“看不懂”到“放心借”金融設計

          杰睿 移動端UI設計文章及欣賞

          從面對專業術語時的“每個字都認識,連起來卻看不懂”,到填寫資料時“總擔心信息泄露”的不安,再到繁瑣流程下“怎么還沒完”的煩躁…… 消費金融產品的用戶體驗痛點,正讓無數人在“想借”與“不敢借”間徘徊。如何打破這一困局,實現從“看不懂”到“放心借”的蛻變?本文將從認知、情感、效率三大維度切入,探索消費金融體驗設計。

          財務核銷解析:從基礎概念到系統設計

          杰睿 移動端UI設計文章及欣賞

          整理一段之前的工作經歷:很早之前經歷的業務系統較多,財務系統多為對接第三方。對于業務系統的核銷一般都是單據的應收應付與收款付款單的核銷,并沒有覺得很復雜,但在后續經歷了一個業務財務高度耦合的企業后發現了核銷也不簡單,查詢整理一些資料匯總成文。

          從概念到落地:看頭部 UI 設計公司如何用創意重構數字界面未來

          杰睿 移動端UI設計文章及欣賞

          通過用戶調研、訪談、觀察以及分析用戶行為數據等方式,深入了解目標用戶的需求、痛點、期望以及使用習慣。例如為職場辦公軟件設計界面時,會觀察不同崗位員工的工作流程,了解他們與軟件交互的痛點和特殊需求。

          APP 設計中的色彩心理學:如何用色彩提升用戶體驗

          ui設計分享達人 移動端UI設計文章及欣賞

          在數字化時代,APP 已成為人們日常生活中不可或缺的一部分。用戶在打開一個 APP 的瞬間,首先映入眼簾的便是其色彩搭配,而這些色彩并非只是視覺上的裝飾,它們蘊含著強大的心理暗示力量,能夠潛移默化地影響用戶的情緒、行為和對 APP 的整體感知。色彩心理學作為一門研究色彩如何影響人類心理和行為的學科,在 APP 設計領域發揮著關鍵作用,巧妙運用色彩心理學,能夠有效提升用戶體驗。
          79.png?
          色彩與情感的微妙關聯?
          不同的色彩會引發用戶不同的情感反應。紅色,作為一種極具沖擊力的色彩,往往與激情、活力和緊迫感聯系在一起。在電商類 APP 中,紅色常用于限時折扣、促銷活動的按鈕和標識,能夠迅速吸引用戶注意力,激發用戶的購買欲望。例如,淘寶、京東等購物 APP 在大促期間,頁面上大量使用紅色元素,渲?
          染出熱烈購物氛圍,刺激用戶下單。然而,紅色使用過度也可能帶來壓迫感和焦慮感,因此需要合理把控其使用范圍和比例。?
          藍色,常被視為冷靜、信任和專業的象征。許多社交類、辦公類 APP 偏愛藍色系,如微信、釘釘等。藍色能夠讓用戶在使用過程中感到安心和放松,有助于建立用戶對 APP 的信任感。同時,藍色在視覺上具有一定的收縮性,不會對用戶造成強烈的視覺沖擊,長時間使用不易產生視覺疲勞,非常適合需要用戶長時間停留和操作的 APP。?
          綠色代表著自然、和平與健康,在醫療健康類、環保類 APP 中應用廣泛。比如一些運動健身 APP,使用綠色為主色調,傳達出積極健康的生活理念,讓用戶在使用時感受到活力與生機,激勵用戶堅持運動。此外,綠色還能緩解眼睛疲勞,為用戶帶來舒適的視覺體驗。?
          黃色則給人溫暖、歡快、活潑的感覺,常用于兒童類、娛樂類 APP。像寶寶巴士系列 APP,大量運用明亮的黃色,營造出輕松愉快的氛圍,符合兒童的心理特點,能夠吸引兒童的注意力,激發他們的學習興趣和探索欲望。?
          色彩對用戶行為的影響?
          色彩不僅能影響用戶的情感,還能引導用戶的行為。在 APP 的界面設計中,合理運用色彩可以突出重要信息和功能按鈕,幫助用戶快速找到所需內容,提高操作效率。例如,將主要的操作按鈕,如 “立即購買”“提交”“確認” 等設置為醒目的顏色,與背景和其他元素形成鮮明對比,能夠引導用戶的視線,促使用戶完成相應操作。?
          色彩的一致性和連貫性也對用戶行為有著重要影響。當一個 APP 的色彩體系在各個頁面和功能模塊中保持一致時,用戶會更容易理解和適應 APP 的操作邏輯,減少學習成本,提升使用流暢度。相反,如果色彩搭配混亂,用戶可能會感到困惑,甚至產生抵觸情緒,降低對 APP 的好感度和使用頻率。
          83.png?
          此外,色彩還可以用于傳達反饋信息。當用戶操作成功時,通常會出現綠色的提示信息,傳達出積極、安全的信號;而當操作出現錯誤時,紅色警示信息則會引起用戶的注意,提醒用戶及時修正問題。這種通過色彩傳遞反饋的方式,能夠讓用戶更直觀地了解操作結果,增強用戶與 APP 之間的互動感。?
          APP 設計中色彩運用的策略?
          在 APP 設計中運用色彩心理學,需要綜合考慮多個因素。首先,要明確 APP 的定位和目標用戶群體。不同年齡段、性別、文化背景的用戶對色彩的偏好和感知存在差異。例如,年輕用戶群體可能更傾向于時尚、個性的色彩搭配,而中老年用戶則可能更喜歡簡潔、穩重的色調。因此,在設計前進行充分的用戶調研,了解目標用戶的色彩喜好和心理需求,是打造成功 APP 色彩方案的基礎。?
          其次,要結合品牌形象和產品特性來選擇色彩。色彩是品牌形象的重要組成部分,能夠幫助用戶快速識別和記憶品牌。例如,可口可樂的紅色、星巴克的綠色,都已成為品牌的標志性色彩,用戶看到這些顏色就能聯想到相應的品牌。對于 APP 來說,選擇與品牌形象相符的色彩,能夠強化品牌認知,提升品牌影響力。同時,色彩還應與 APP 的功能和使用場景相匹配,如夜間模式的 APP,通常會采用深色系,降低光線對用戶眼睛的刺激,提供舒適的使用環境。?
          最后,要注重色彩的搭配和調和。合理的色彩搭配能夠營造出和諧、美觀的界面效果,而不當的搭配則可能導致視覺沖突和審美疲勞。在進行色彩搭配時,可以運用色彩理論,如互補色、類似色、三原色等搭配原則,創造出富有層次感和吸引力的界面。同時,要注意控制色彩的數量和比例,避免使用過于繁雜的色彩,保持界面的簡潔和清晰。?
          色彩心理學在 APP 設計中具有不可忽視的作用。通過深入了解色彩與情感、行為之間的關系,合理運用色彩搭配策略,設計師能夠打造出既美觀又實用的 APP 界面,提升用戶的使用體驗,增強用戶對 APP 的粘性和忠誠度。在未來的 APP 設計中,隨著人們對用戶體驗的要求不斷提高,色彩心理學將發揮更加重要的作用,為用戶帶來更加優質、舒適的數字化體驗。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          UI 設計風格演變:從擬物到扁平,下一個潮流在哪?

          lanlanwork 移動端UI設計文章及欣賞

          在 UI 設計的發展歷程中,設計風格不斷演變,從最初的擬物風格到如今盛行的扁平化風格,每一次變革都深刻影響著用戶與數字產品的交互體驗。回顧這些風格的演變歷程,不僅能讓我們更好地理解設計發展的脈絡,還能幫助我們預測下一個可能引領潮流的設計方向。?
           
          擬物風格:模擬現實的直觀體驗?
           
          擬物風格興起于個人計算機和手機開始普及的時期。當時,圖形化操作界面逐漸走進普通人的生活,但大部分用戶對這種新型界面較為陌生。為了降低用戶的學習成本,讓他們快速熟悉和使用產品功能,擬物風格應運而生。擬物風格通過模擬現實物品的造型和質感,利用疊加、高光、紋理、材質、陰影等效果,對實物進行高度還原。比如在 iOS 6 中的相機圖標,對鏡頭部分的細節刻畫細致入微,用戶看到這個圖標,很容易聯想到真實相機的功能和操作方式;書架圖標同樣精彩,不僅還原了報刊架的結構和質感,還展示了書架內的雜志,豐富的細節讓用戶仿佛真的面對一個書架。這種設計風格讓用戶能夠憑借對現實世界的認知,以極低的學習成本理解圖形化操作界面,快速上手使用產品。?
          然而,隨著時間的推移,擬物風格的弊端也逐漸顯現。一方面,擬物風格要求設計師花費大量時間和精力研究技法,以呈現豐富的質感、層次和陰影,這不僅增加了設計成本,而且當需要改變風格時,設計工作量巨大。另一方面,過度追求寫實的細節,使得界面元素變得復雜冗余,對用戶獲取核心信息形成干擾。并且,由于人們的文化背景、生活環境不同,對現實事物的認知存在差異,這可能導致部分用戶對某些擬物化圖標和界面難以理解。此外,隨著 APP 的不斷創新,許多全新的產品功能在現實世界中找不到直接的參照物,擬物化設計在這種情況下顯得捉襟見肘,成為了創新的阻礙。?
           
          扁平化風格:簡潔高效的信息呈現?
           
          2013 年左右,智能手機在全球范圍內迅速普及,大部分用戶已經對圖形化操作界面非常熟悉,不再依賴擬物風格來理解界面功能。與此同時,智能設備中涌入了越來越多的信息和應用,擬物風格的冗余細節已無法滿足高效處理信息的需求。在這樣的背景下,扁平化風格登上了歷史舞臺。以 iOS 7 的發布為標志,扁平化設計風格開始流行。這種風格摒棄了擬物設計中的寫實光影、肌理、冗余細節,甚至放棄了體積的塑造,以及一切可能干擾用戶識別的元素,只保留最關鍵的信息,從而呈現出簡潔、干凈、整潔的視覺效果。扁平化設計極大地提高了信息的傳遞效率,讓用戶能夠快速聚焦于核心內容,同時也為設計師提供了更多的創新空間,不必再局限于對現實物體的模仿。?
          但扁平化設計也并非完美無缺。長期使用簡潔的扁平化界面,容易讓用戶感到單調和冷淡,缺乏情感共鳴。為了彌補這一不足,新擬物風格曾一度出現。新擬物融合了擬物和扁平兩種風格的特點,在光影和立體效果方面較為寫實,元素通常凸起或凹陷于界面之上,視覺上錯落有致;在色彩和造型方面則更偏向于扁平化風格,圖形往往經過簡化和抽象,并搭配少量簡潔的主觀顏色。然而,新擬物風格過于依賴投影和立體效果來區分界面元素,在呈現復雜信息層級時表現不佳,且微妙的對比度不利于無障礙識別,因此未能廣泛流行。?
          下一個潮流的可能方向?
          1. 增強現實(AR)與虛擬現實(VR)風格:隨著 AR 和 VR 技術的不斷發展與普及,與之相適配的 UI 設計風格有望成為新的潮流。這種風格將更加注重營造沉浸式的體驗,通過三維空間的設計、動態交互效果以及與現實環境的融合,為用戶帶來全新的感受。例如,在 AR 購物應用中,商品可以以逼真的三維模型形式呈現,用戶能夠 360 度查看商品細節,UI 元素也將圍繞這種沉浸式的購物體驗進行設計,如懸浮的操作按鈕、與商品自然融合的信息提示等,讓用戶仿佛置身于一個真實的購物場景中。?
          1. 情感化與個性化設計:在信息爆炸的時代,用戶渴望與產品建立更深層次的情感連接。未來的 UI 設計可能會更加注重情感化表達,通過色彩、圖形、動畫等元素傳遞溫暖、愉悅、關懷等情感。同時,個性化定制也將成為重要趨勢,用戶可以根據自己的喜好和使用習慣,自由調整界面的布局、顏色、字體等元素,打造獨一無二的專屬界面,使產品更貼合個人的情感需求和審美風格。?
          1. 極簡與功能主義的深化:雖然扁平化設計已經體現了極簡的理念,但未來可能會朝著更加極致的方向發展。在保持簡潔界面的基礎上,進一步優化功能的整合與呈現,讓用戶能夠以最少的操作完成更多的任務。這意味著設計師需要更加深入地理解用戶的行為模式和需求,將復雜的功能進行巧妙的簡化和隱藏,只在用戶需要時適時呈現,實現真正的 “少即是多”,為用戶提供高效、便捷且舒適的使用體驗。?
          1. 動態與交互性增強:靜態的 UI 界面逐漸難以滿足用戶對生動、有趣交互的追求。未來的 UI 設計將更多地融入動態元素,如微動畫、轉場效果、實時反饋等,使界面更加鮮活。當用戶進行操作時,界面能夠即時給予豐富且直觀的反饋,操作按鈕在點擊時會有獨特的動畫效果,頁面切換時伴有流暢的轉場動畫,增強用戶操作的趣味性和沉浸感,提升整個產品的交互體驗質量。

             

            蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計APP界面設計、圖標定制用戶體驗設計、交互設計、UI咨詢、高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

             

             

          圖片篇 | 掌握這些技巧,你的界面更加出彩!

          杰睿 移動端UI設計文章及欣賞

          編輯導讀:人是視覺動物,相比于文字,人們更容易被圖片吸引。而如何在界面設計中運用好圖片,給用戶更好的視覺體驗,本文作者有自己的想法,一起來看看吧。

          在UI設計中,配圖的好壞將直接影響著界面的品質及用戶的視覺體驗??v觀如今高質量的界面設計,具有設計感的配圖不僅是吸引用戶的重要元素,能比原本平淡無奇的文字界面更讓人產生點擊欲望,還能體現出設計師的品味、以及相關方面的專業性。

          在這個快節奏的時代,相比文字,圖像的傳達效率會更快、更高、更有助于用戶輕松理解及記憶。配圖用的好,往往能起到決定畫面基調、流程引導、視覺平衡等關鍵作用,所以,在同等樣式的布局下,因圖片的使用及處理方式的不同,界面的品質也會存在較大的差異。本篇文章將介紹一些在UI設計中配圖的基礎知識,幫助大家在圖片列表、背景處理、圖文混排、頭圖等相關界面設計無從下手時提供靈感,在選擇圖片、后續處理時如何做到有規律可循帶來一些思路。

          一、了解UI設計中的圖片

          1. 為什么要重視圖片

          在文字出現之前,人們都是靠看到的圖像來理解信息內容,即便后來文字能表達出很豐富的內容,圖示也不可少,試想一下,當別人拿著密密麻麻的數據給你看時,能看的頭皮發麻,你更希望有一張清晰的圖表,但并不能說明別人的數據不清晰。所以,圖像相比文字能更具說服力、更容易傳達信息,使讀者產生共鳴、震撼內心,讓人看了一目了然,能直觀的與人產生互動。

          當說到UI設計中的圖片非常重要時,并不是說文字就一定比圖片弱,好的文字也能帶給我們無限的遐想,只能說在更大的概率上圖片和文字哪個更吸引人,所以我更傾向于觀賞圖片,然后感受到帶來的美好。但是,如果非要問我選擇哪一個時,我只能說“只有小孩子才做選擇題,我(設計師)全都要”,圖片可以表達出豐富的內容,再用文字言簡意賅,是一個非常完美的組合。

          2. 常用的圖片格式

          圖片有多種格式,如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等,在UI設計中,最常用的無非JPG、GIF、PNG三種。

          JPG:目前為止使用最多的圖片格式,兼容各大操作系統瀏覽器及編輯軟件,非常方便被打開和處理,但不能顯示透明底,壓縮后會失去一部分原始信息。

          PNG:如需編輯,PNG應該算是所有圖片格式中的最佳選擇,支持無損壓縮及透明底,但針對需要高保真的復雜圖片,壓縮后的文件較大,且有少數的瀏覽器不支持。

          GIF:動效圖片,支持透明底及無損壓縮,通常由視頻格式的內容轉換而來,但對色彩有非常嚴格的要求,數量最多不超過256種,相比前面兩種,GIF格式的文件更大。

          二、圖片的使用及處理方法

          1. 圖片的使用比例

          在移動端UI設計中,我歸納了最常用的幾個圖片比例,分別是1:1、3:2、4:3、16:9四種,這些比例都是源于最早的膠片攝影及現代相機的傳感器演變而來。當我們不知如何選擇比例時,首先需清楚的了解界面圖片的應用場景、來源用戶以及圖片比例背后的緣由,否則將很難把控,下面將針對這幾個比例作具體分析。

          1)1:1 比例

          因為相機結構的原因,早期最傳統的120膠片畫幅就是正方形(6*6cm),即1:1的比例,此比例更容易的將構圖規整,使其最大程度的突出照片主體。

          在如今的電商APP中,商品圖片絕大多數都遵循了1:1的比例,不管橫向還是縱向都能將信息進行完整化的展示,且方便多場景、頁面的適配。另外,用戶頭像也都使用了這一比例。

          2)3:2比例

          起初135膠卷的比例就是3:2,主要是因相機取景框的大小而決定。在移動端,這一比例使用也比較廣泛,例如新聞、旅游類型產品,在拍照之后無需裁剪等處理,直接上傳使用,非常方便。

          3)4:3比例

          隨著攝影的發展,小/微型相機出現而誕生4:3比例,且移動設備發展迅速,在非專業攝影的情況下,手機能很大程度上代替單反并成為主流拍照設備,目前市場上主流手機的拍攝尺寸基本都為4:3比例。相比3:2的圖片,4:3圖片占比更大,能最大化顯示圖片以突出重點信息。

          4)16:9比例

          根據人體工程學的研究,人眼視野范圍的比例約為16:9的長方形,所以電視、顯示器及投影范圍的設計都是基于這個黃金比例。

          線上產品不用多說,影視類型的產品均采用16:9的尺寸,例如愛奇藝、優酷、騰訊視頻等,到目前為止,這個比例在設定上還沒出現過問題。

          在上述4個尺寸中,最容易混淆的是3:2和4:3,如果不清楚如何選擇,請根據產品目標定位,看看到底是以內容為主導還是圖片為主導。例如:資訊類型產品很注重標題文案,即會使用上文下圖、左文右圖的版式,選擇3:2作為封面,以降低圖片的視覺重量;旅游、租房類產品,則可使用4:3的圖片,以傳達更多信息。這種選擇方式雖然不是絕對,但當我們陷入兩難的困境時,可作為參考依據幫助快速決策。

          2. 圖片的使用場景

          1)單圖布局

          全屏:具有很強的視覺沖擊力,非常適合用于傳播行業屬性及品牌調性。單圖全屏布局處理靈活,可整體突出、局部特寫或加純色不透明度紋理/遮罩,對圖片細節、構圖等有較高的質量要求,一般用于登錄、啟動引導、產品介紹背景等頁面。

          卡片:以單張圖片作為視覺引導,寬高不固定,但占據界面大部分區域及重要位置,主要突出產品調性和成為吸引用戶的流量入口,促使用戶與其產生交互行為。常用于產品詳情頁頭圖、推薦頁、專題入口等。

          2)圖文列表

          在圖文列表界面,很多時候,我們都在想一個問題,到底是選擇左圖右文、左文右圖還是上圖下文?所以我們首先要明白F式(從上到下、從左到右)瀏覽布局,這也跟人眼的瀏覽習慣相吻合,然后確定圖、文信息內容的權重,根據優先級將重要的信息放在關鍵位置。

          單列組合

          左文右圖:以文字為主、圖片為輔,主要強調文字信息,且圖片與標題的關聯性不是很大,能減少減少圖片對文字的干擾,對圖片的質量要求不高,很多新聞、資訊類產品都是選用這種方式布局。

          左圖右文:在圖片內容優先于文本內容的情況下,采用左圖右文的方式,更強調以圖片直觀的傳達內容、吸引用戶的視線,對圖片的質量要求高于左文右圖,一般是電商、旅游類產品的最佳之選。

          上圖下文:一行只顯示一張圖片,大多采用橫圖,同屏一般不超過兩個內容,用戶需要從圖片中獲取大量信息,對圖片的質量要求很高,大多有專門的人員審核,以完成對圖片的品質的把控。這種方式很占用界面的縱向空間,部分租房類、藝術類產品會選用此種方式。

          雙列組合

          并排:相同高度的比例控制,是較為經典圖文布局,相比單列,同屏可展示更多的圖片內容且空間利用率更高,能同時向用戶傳達更多信息。

          錯位:圖片高度自適應(瀑布流),在限制寬度的條件下,高度自由發揮,讓圖片得到更多的舒展,利用率更高。雙列錯位的排版方式增加了版式的趣味性,可緩解用戶在長時間瀏覽下的視覺疲勞,需要注意的是寬高比例不要太大、成跳躍式的變化,否則可能導致視覺混亂,且低高度的圖片信息很容易被忽略。

          3)多圖組合

          規則:3張或以上的規則的圖片組合很常見,主要用圖片列表來引導用戶查看更多,通常利用單排左右滑動或九宮格的方式呈現。例如旅游、租房、影視類產品,包括手機相冊、社交圈子等。

          不規則:多圖不規則比例并不常見,因移動端設備可視寬度有限,容易導致混亂的錯覺。藝術、拼圖類產品看到的居多,另外,部分社交類產品為了展示不同遠近距離的層級關系也會用到這種排版方式。

          3. 圖片操作的交互手勢

          圖片常見的手勢操為:滑動、點擊、雙指縮放,除此之外,還有很多針對所有元素都可以操作的交互手勢,這里就不多說了,下面單獨對圖片手勢作出介紹。

          1)滑動

          上下滑動:通常在圖文列表或單張圖片內容超過一屏的情況下,通過上下滑動查看更多信息。

          左右滑動:為了拓展更多內容,多用于相同等級的圖片列表或大圖切換,在頁面列表中會將無法同時展示的圖片呈現一部分或以數量作為提示,引導用戶探索以發現更多。

          2)點擊/長按

          單擊:單擊可查看圖片,從縮略圖到詳情或大圖的切換操作;

          雙擊:針對圖片本身進行某些操作,比如喜歡、點贊等,另外,部分圖片通過雙擊進行一定比例的放大縮小。

          長按:調出圖片的部分屬性信息、下載圖片等進行下一步操作。

          3)雙指縮放

          當我們需要查看圖片的某些局部信息或細節時,就會使用雙指(開合)縮放的交互手勢。

          三、圖片樣式效果

          1. 圖片遮罩

          因圖片的色彩變化不規則,為了保證圖片上層文字的可讀性,通常會在文字區域加一個純色遮罩,也可設置不透明度的漸變效果,使遮罩跟圖片的過渡更加協調,提升視覺美觀度。

          2. 毛玻璃(背景模糊)

          毛玻璃效果通常出現在應用的2、3級頁面,對應用性能會有一定的消耗,一般使用封面圖片進行大幅度的高斯模糊作為背景使用,可在上層加上一定透明度的蒙層配合使用,透明度數值根據不同的圖片色彩及使用場景適當的調整。毛玻璃效果既能滿足文字內容的清晰呈現,又能提供場景氛圍并提升界面的品質感與神秘感,我們最熟悉的當屬音樂播放頁面的背景模糊效果了。

          3. 摳圖+純色背景組合

          對于自營平臺,內容較為固定的商品頁面,可將商品摳圖后自定義背景,讓界面的整體設計風格可控,延展性更高。不適配平臺類型應用,因為會讓商家產生較高的運營成本。

          4. 圓角設定

          圖片圓角值設定,能體現出不同的產品屬性及氣質。例如:直角比較硬朗,給人高冷、力量的感覺,小圓角傳達出安全、專業的屬性,而大圓角顯得活潑、可愛,更有親和力。

          5. 圖片出界

          圖片出界常用于運營設計,例如圖片輪播、膠囊banner、專題頁等,另外,經摳圖處理過的圖片也可用在商品詳情頁頂部圖示。這種效果能有效避免呆板,營造出畫面氛圍,制造出更強烈的視覺沖擊力。

          四、圖片處理小技巧

          1. 符合產品氣質

          UI設計中,任何一個設計思路、想法及效果樣式都是為產品而服務,圖片也不例外,需要根據不同的場景進行合理搭配,好的配圖更能與用戶產生共鳴。

          2. 切合主體,表達產品核心內容

          配圖必須要明確主體,一眼就能看出核心內容,且不可以炫技或好看為主,否則會被多余的元素、效果影響主體視覺導致沒有重點。但確定好一張圖片的風格及色系后,后續也要保持統一。

          3. 風格統一

          圖片以實用性為準,如果一味的追求漂亮、好看,最終可能形色各異造成視覺的不統一,嚴重影響用戶體驗。設計師在選圖時需要對風格精準把控或后續稍加處理,以形成統一的視覺。

          常見的控制方向有圖片類型(位圖/插畫/形狀)、視角(平視/仰視/俯視)、商品背景(簡約/復雜/純色)、呈現區域(堆積/局部/特寫)、構圖(中心/水平線/對稱/對角線…)等。另外,還有很多抽象的方式但并不是絕對的,我們都可以嘗試從不同的角度去調整,力求讓所有圖片達到最佳視覺效果。

          4. 顏色豐富

          因人的天性即向往美好、品質(非物質化)生活,固品質感的配圖更容易吸引用戶的注意力,讓人想要擁有的感覺,如果色彩不夠飽滿,不管風格是多么統一,也達不到良好的用戶體驗。在選好圖片后,可對色相、飽和度、亮度稍加調整,以確保色彩飽滿、豐富。

          5. 設計稿需呈現上線的實際效果

          有時候做設計為了方便,整個界面的圖片直接復用同一張,即便設計的再好,也可能隱藏著不易察覺的瑕疵。需要說明的是,一個成熟且專業的設計師,首先要對自己負責,然后才是設計,即便是初稿,在即將呈現給大家或匯報前,一定要給出上線后最真實的效果,這樣方便他人貼合實際給出一些方向性的建議,幫助自己更好的決策。經處理過的實際配圖能體現整體效果,方便找出圖片以外的設計缺陷,例如版式、字體大小、層級關系等問題。

          6. 文件大小處理

          靜態圖片常用的無非PNG、JPG這兩種格式,文件較大的圖片會影響打開頁面或刷新時的速度,本地圖片更會增加應用包的大小。從設計稿中導出圖片時需要控制文件大小,如無特別(超大圖)情況,切勿主動降低圖片質量后再導出,否則會影響界面整體的視覺美觀度。

          這里推薦一個線上無損智能壓縮神器:https://tinypng.com,僅限PNG、JPG、WEBP格式的圖片。

          △上圖可以看出,圖片在壓縮了76%后,由1.4MB變成了332KB,肉眼很難看出(查看大圖)質量上的損失。

          7. 倍率切圖

          切圖不像以前那么麻煩,同一張圖片需要手動導出多套規范,現在只需在軟件(或安裝插件)標記好切圖,上傳到類似藍湖、摹客等第三方線上應用,分享給團隊成員即可各自下載web、Android、iOS對應的多套規范制圖。

          設計師在設計過程中,一定要按照規范的最大極限保留原圖,以iOS系統@1x規范設計稿為例,如果圖片的寬度是100px,那么導入軟件中的圖片寬度至少要在300以上,然后再進行縮?。≒S中需轉為智能對象),如果低于300px,開發在導出@3x的圖片就會失真,可能會因損失像素而出現模糊的情況。

          五、總結

          文章中所介紹的圖片使用方法及處理技巧,并非最好、唯一的答案,但在你沒有更好的方法之前,多多少少能從中得到啟發。UI中圖片設計的本質在于自身的專業能力,然后用自己的視覺產出和設計手段去吸引、打動用戶,從而為產品帶來利益,也能體現出設計價值。

          不得不承認,人們很多時候都是通過視覺表象決定是否需要深入了解、擁有某一件事/物,設計師就是在做視覺表象的表達,如果圖片用的好,不僅能讓你的設計更加出彩,還有一定幾率轉化用戶,形成商業價值。

          #專欄作家#

          大漠飛鷹;公眾號:能量眼球,人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

          本文原創發布于人人都是產品經理,未經許可,禁止轉載

          題圖來自Unsplash,基于 CC0 協議

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          彈窗篇 | 如何彈、什么時候彈?你需要知道的彈窗設計原則!

          杰睿 移動端UI設計文章及欣賞

          編輯導讀:我們經常會收到各種彈窗,它們的目的主要是為回應用戶或讓用戶回應,是用戶與產品間對話的一種方式。但是,彈窗也不是多多益善。如何彈、什么時候彈?這些都是有章法的。本文作者總結梳理了一套彈窗設計原則,一起來看看吧。

          產品經理:我覺得這里要加個彈窗,你去設計吧。

          設計師:emmm…

          彈窗到底該不該加?怎么加?用什么形態展示?真正的作用是什么?這些真的是產品經理說了算嗎?

          好的產品通常會在恰當的時間、合適的位置給出合理的反饋,彈窗也是必不可少的反饋方式,不反饋、反饋不及時或反饋不合理都會帶來不好的使用體驗,甚至誤導用戶,從而導致用戶流失。

          很多時候,產品經理會從商業角度、公司業務、資源限制等方面考慮問題,但這些未必是用戶所需要的,設計師不應該完全按照產品需求做設計,否則就成了只會照搬產品原型的“美工”。需要做的是從用戶角度出發,把產品需求轉化成設計目標,只有經過反復的推敲、認真分析,最終才能打磨出服務于用戶的彈窗設計,所以彈窗該不該加、如何加就成了設計師不可推卸的責任和使命。

          本篇文章將圍繞著彈窗類型、使用場景、轉化率及常見問題為側重點,將自己對彈窗的理解、設計經驗分享給大家,幫助大家對彈窗組件有更清晰的認識,為后續避坑設計出更好的彈窗做準備。

          一、彈窗的基本介紹

          1. 彈窗的定義

          當我們與應用產生主動或被動交互時,頁面上層會彈出容器,將可承載的文本、按鈕、選項、標簽或表單等任一內容與之組合,就可以用來傳遞信息、狀態反饋、引導用戶等操作,這就是彈窗。

          彈窗的目的主要是為回應用戶或讓用戶回應,是用戶與產品間對話的一種方式,在線上各種場景中都有可能碰到,相當于產品的線上小助理。不同類型的彈窗其作用不同,但最終都是為了滿足跟用戶之間的友好交流。

          2. 彈窗組件的構成

          彈窗組件的樣式很多,如浮層、對話框、下拉菜單、toast等,且iOS、Android官方平臺也都根據自身的規范對組件進行命名,不管如何稱呼,其常見的彈窗組件絕大多數都是由以下元素組成:

          • 容器:作為承載彈窗的文本、圖片等內容,容器必不可少,有的彈窗直接以蒙層作為容器,如toast;
          • 蒙層:為了和底層內容分離,避免信息混淆,通常會在界面上層(容器下層)設置一個不透明度為20%~60%的純黑色蒙層。部分小型彈窗不設蒙層,但會為容器設置投影,例如篩選器的展開、下拉菜單等;
          • 文本:文本是彈窗傳達信息主體的必要條件,如標題、按鈕等,即便把文本融入圖片,也能一目了然;
          • 圖片:用于運營彈窗傳達更多信息內容的方式之一,為了對用戶產生更強的吸引力,還可設計成動態效果;
          • 表單:為成功進入下一步做準備,如輸入密碼(iOS設備下載應用前的必要步驟)。也可以是當前頁面流程的分支,例如輸入優惠券等;
          • 選項:條件較少的選項可使用彈窗完成,單選、復選在選項不超過6個的情況下都可使用;
          • 圖標:在弱化次要操作的情況下,通常會將關閉彈窗按鈕設計成圖標放在右上角或彈窗下方,目的是突出主操作,鼓勵用戶從彈窗中進入下一步,另外還有單選、復選、提示等按鈕;
          • 按鈕:是進入下一步或回到上一步(去掉彈窗)的操作入口,部分應用也可以點擊彈窗以外的空白區域讓彈窗消失,但同樣會提供按鈕以方便用戶更容易操作。toast等短時間自動消失的彈窗無需設置按鈕。

          二、彈窗體系分類

          1. 模態彈窗

          用戶在完成任務的過程中,界面會出現彈窗打斷用戶的操作行為,用戶必須通過主動點擊才可以進行下一步操作,這即是模態彈窗。

          模態彈窗通常能較好的獲取用戶的視覺焦點,并通過承載的內容、按鈕主次層級來引導用戶完成他們的需求,這也會根據用戶、產品側重點的不同,彈出樣式也有所不同,常見的模態彈窗有對話框、動作欄、浮層…等。

          1.1 對話框Dialog/Alert

          對話框是很常見的彈窗,主要在打斷用戶后并提供選項操作,對用戶的干擾較大,通常會配備1~3個操作按鈕,而且會把用戶最期待的或產品最期待用戶操作的按鈕突出顯示。

          對話框類型的彈窗主要分為主動、被動兩種觸發類型,主動彈窗:信息的二次確認、輸入內容、前置條件選擇、風險警示等;被動彈窗:版本更新、運營宣傳、消息通知、系統功能授權等。

          1.2 動作欄Actionbar

          動作欄是通過用戶主動操作后彈出的內容信息,基本都是從底部彈出,屏幕占用比例根據內容量的多少比較隨意,從小區域、半屏、再到全屏隨處可見。

          動作欄相比對話框則能承載更多、更豐富的功能信息,在用戶清晰感知當前操作及反饋的情況下,比跳轉到新的頁面更有安全感。

          1.3 浮層Popover/Popup

          浮層是指用戶操作某個功能/內容后,會在附近出現一個帶有視覺引導性質的彈窗,最常見的浮層就是下拉菜單/彈窗等,浮動于頂層窗口并指向觸發操作的位置。

          例如很多社交娛樂類型的應用右上角有一個“+”入口,里面會放置部分常用功能。部分浮層底部沒有設置不透明度的蒙層,為了與頁面信息更好的區分,會給浮層容器加上投影,避免與底部信息混淆。

          2. 非模態彈窗

          相比模態彈窗,非模態彈窗屬較為輕量,觸發后以一種非阻礙的的方式呈現,不會打斷用戶的當前操作,主要是給予用戶即時反饋,讓用戶清楚應用當前的交互后狀態。非模態彈窗不強制用戶操作,根據反饋信息的重要程度及意愿,可在一定的時間內自動消失,也可等待用戶操作后消失,常見的有以下幾種:

          2.1 提示框Toast/Hud

          用于反饋用戶操作成功、警告、錯誤等當前狀態信息,可能出現在任何位置(底部/中間/頂部),在呈現樣式上,相同等級的模塊統一位置、風格即可,無需用戶有任何操作,出現2s左右自動消失。

          Toast只有純文字提示,例如格式錯誤、刷新成功、刪除成功等;Hud會使用文字+圖標樣式,例如添加到購物車、關注成功等。

          2.2 提示對話框Snackbar

          Snackbar早期只是Android系統的一種彈窗控件,后在iOS、Web前端都會使用到,可以看作是toast的加強版。一般只出現在屏幕底部,存在的時間比toast長,提供0~1個操作入口,可自動消失,也可與用戶產生交互后消失或者跳轉至其他頁面。

          Snackbar反饋的重要程度強于toast,例如,某個應用今天有重要提醒,同時又不想影響用戶的其他操作,會在用戶首次進入時彈出提醒,并提供關閉操作入口,等待用戶通過手動關閉(部分自動關閉),加強用戶記憶。

          2.3 通知Notice

          最有代表性的就是消息通知、系統推送,在設備未鎖屏的情況下,通常從頂部彈出,停留幾秒后自動消失,鎖屏后,不同設備彈出的位置也有所不同。Notice的前提是需要在應用設置中打開消息通知開關,具備應用外推送功能的,需在設備系統設置中開啟通知權限。

          2.4 透明指示層HUD

          HUD是一種在透明元素上通過填充、反饋用戶當前交互操作的指示層,實時生效,例如視頻類產品中的調整音量、亮度、控制進度條等。

          三、彈窗的使用場景

          當我們對彈窗體系有了一定了解后,就需要清楚什么場景需要設計彈窗?用什么類型的彈窗?

          產品最終都是服務于用戶,如果僅憑自己的主觀意見亂加一通,整的花里胡哨,彈窗就成了干擾元素,很大程度上會影響用戶體驗。什么樣的場景適合什么類型的彈窗,我們可以從以下幾點來說明。

          1. 打斷用戶的操作

          風險警示:當用戶的某種操作可能存在風險,為避免操作失誤,會彈出對話框打斷用戶,并給予一定的風險提示引起用戶的注意,讓其有足夠的時間確認是否真的需要進行下一步操作,如:刪除、放棄福利機會、退出登錄等,會彈出對話框提示操作后可能引起的后果。

          前置條件:部分任務在流程中設有一定的前置條件,需要滿足條件才能進入下一步操作,通常這種情況會根據內容量的多少、重要程度以對話框或動作欄的樣式彈出,例如下單時選擇優惠券、支付方式。

          任務關鍵節點:用戶在滿足任務的基本條件后,需要操作一個關鍵步驟才能成功,則會彈出對話框讓用戶完成最后一步操作,例如提交訂單、表單、輸入支付密碼等。

          2. 定制化彈窗

          這類彈窗主要從產品角度出發,不會過于在乎用戶是否需要、會不會反感,都會引導或強制用戶操作。

          例如產品發布新版本,會強制用戶更新,否則將無法使用。還有各大電商APP,在進入首頁時會彈出一堆紅包、優惠券,刻意將取消/關閉入口弱化,給用戶返回造成一定的難度,利用突出的視覺、動態效果突出主題增加吸引力,以達到轉化用戶的目的。

          3. 二次確認

          二次確認也是一種打斷用戶的操作行為,但跟上面純粹的打斷用戶相比其作用更大,主要是在用戶已做好選擇的情況下再次彈出確認,以免操作結果造成用戶認知上的偏差。雖然從用戶體驗角度出發,用最少的操作、最簡單的流程滿足用戶所需是產品追求的目標之一,但通過權和利弊之后,二次確認的出現實屬迫不得已的折中方案,它能夠起到給用戶多一次思考避免誤操作、同樣的含義換種方式表達、重要的內容加深二次記憶等作用。

          二次確認使用得當,可以避免用戶、產品的潛在風險,但若是從主觀角度一味的濫用,就成了對用戶的惡意干擾、影響使用體驗,導致出現因多步驟操作增加任務完成難度、降低轉化率、損害產品形象等問題,所以需要從業務(用戶側、產品側)實際角度出發,兩相其害(加-影響使用體驗;不加-造成一定損失)取其輕的考慮是否需要增加二次確認彈窗。

          當用戶的某個操作可能帶來不可逆轉、錯誤嚴重程度較高時,例如:放棄僅有一次機會的較好福利、手機系統還原、應用賬號注銷等,系統都會給予二次確認,降低用戶認知偏差后,以確保用戶是經過多次思考才做出的決定,即便后續給用戶造成損失也不會過于降罪產品,產品也算是“問心無愧”了。

          4. 簡單提示

          常見于用戶操作之后的狀態反饋,即便用戶沒有注意到,也不會造成較大的損失、或結果已經注定,相對來說成本較低,大部分出現在任務過程中的提示(可重復)和結果反饋,以確保用戶知曉當前所處狀態。

          非模態彈窗toas樣式居多,例如加載中、操作成功、刷新結果、清除緩存等,可出現在其他類型的彈窗之后或同時存在。

          四、如何設計有效的彈窗

          1. 前提條件

          優秀的彈窗需要從視覺、交互兩方面思考,視覺上簡潔、易懂,交互上可操作且可控。

          視覺層面:首先需要做到的是易懂,這時候就非常注重文案清晰程度及按鈕層級關系了,彈出的信息需能直擊要害,用戶看了能一目了然才是關鍵;其次,彈窗屬于一種干擾信息的存在,設計必須簡潔,在彈出時需要考慮是否會過度影響(影響是一定會有的、且看如何降低)用戶的其他操作。假想我們正在玩游戲、突然來了電話全屏幕覆蓋(傳統來電),自己會以最快的速度掛掉電話,回到游戲中后發現自己已領“盒飯”,即便來電是多么的理所當然,但心里必定是非常不痛快的,那么,如果來電以彈窗的形式且占據屏幕很小區域(如今的來電方式)是不是就給了用戶足夠反應時間及緩沖時間呢?

          交互層面:彈出的內容及操作入口需清晰可操作,雖然有時基于業務需求,產品更希望用戶能進行下一步操作而并非回到上一步,即便如此,我們也只能通過弱化次要操作以突出主要操作,用戶有來去自由的權利,如果弱化至用戶看不清、甚至找不到的程度,即便提供了次要操作入口,也會存在反面作用;另外需注意用戶對產品的可控性,不管產品如何期望用戶進入下一步轉化,但不能強制,一定要給用戶提供回去的路(強制版本更新除外),否則,任性的用戶可能會直接結束應用,甚至因產品過于霸道直接卸載。

          2. 設計目的

          首先,設計師應該理解產品需求,分別從用戶側(能給用戶帶來什么?滿足什么樣的需求?避免什么損失?…)、產品側(能給產品帶來什么?產品如何期望?是否合理?能得到什么樣的結果?…)分析為什么要加彈窗,然后將分析的結果轉化為設計目標,以確保彈窗根據不同的需求,在恰當的時間、適合的樣式合理的呈現給用戶。

          其次,在得到設計目標后,同樣需要從設計側、技術側思考彈窗組件的一致性。從設計角度,團隊所有成員需要對該組件有清晰且統一的認知,了解組件的使用場景,以確保不會錯用、濫用,如果增加或更換新人設計師,很容易學習和上手,提升效率;站在技術角度,一致性的常用彈窗組件,便于開發做組件封裝后續復用,減少不必要的重復工作,大大提高開發效率。

          3. 設計思路

          在UI設計中,組件的設計思路基本相通,旨在滿足產品的實用性、視覺的統一性,主要圍繞著以下幾點進行:

          • 基礎定義:利用清晰易懂且簡短的文案描述彈窗組件的內容及目的。
          • 類型及構成:明確彈窗的類型,如模態/非模態,將其拆分并注明每個小元素的具體信息。
          • 規則用法:彈窗出現的位置、包含的具體內容及信息的展示規則,比如哪些場景可復用。
          • 交互狀態:交互流程邏輯清晰,擬請產品交互前、交互中、交互后如何反饋以及用戶隨時可能碰到的問題。

          五、需關注的問題點

          1. 信息的層級關系

          設計彈窗時需要注意信息的主次層級關系,優先傳達用戶想要的或產品想要讓用戶知道的,以確保重要的信息在第一時間傳達給用戶。

          2. 展現形式

          彈窗需要根據實際的場景合理使用,不能為了簡潔而過分刪減內容、更不能畫蛇添足。例如一些偏向于操作狀態、系統報告類的提示可以使用簡單的反饋,而可能造成用戶損失的提醒就需要刻意打斷用戶,給予更明確的提示甚至二次確認。

          △ 例如刪除內容就需要使用模態彈窗明確提醒用戶,如果用非模態很可能被用戶忽略從而帶來不可逆的損失。

          3. 文案表述

          因彈窗本身承載內容有一定的局限性,固文案一定要簡潔且精確,能用一句話說清楚的就不要過于啰嗦,不僅容器的空間有限且用戶的耐性也有限,需要在有限的空間、有效的時間內清晰的表達出核心內容。

          4. 彈出的時機及頻率

          針對運營彈窗,如果彈出的時間不對或過于頻繁,可能會造成用戶反感,所以需要把握好彈出時機及頻率。

          例如用戶有一張未使用的優惠券,如果用戶每次進入應用都看到彈出提醒,確實又沒有購買商品的意愿,總是被彈窗打斷真的就很煩,那么可以將提醒彈窗設置為每日首次進入應用時提示、每累計進入應用5次后提示、即將到期提示或者用戶有購買意愿且優惠券支持改品類時提示等,總之,需要控制在大部分用戶的可接受范圍內。

          六、總結

          本篇文章主要系統的分析了彈窗組件分類及使用場景,總結的雖然不是很全面,但能讓很多新手設計師清楚認知彈出組件的定義及用法。另外,彈窗不管如何設計,都需要有一個不斷優化的過程,要根據產品的實際情況不斷思考與打磨,通過腦暴或已知問題作出更好的改善。

          能清楚認知、理解、使用彈窗組件是一個成熟UI設計師必備的條件,當然,并不能以此定義設計師是否優秀,在此基礎上,還需通過持續的學習探索,挖掘出更多技巧,不斷提高自身的專業能力。

          #專欄作家#

          大漠飛鷹;人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

          本文原創發布于人人都是產品經理,未經許可,禁止轉載

          題圖來自Unsplash,基于 CC0 協議

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          小程序分銷與轉介紹攻略

          藍藍設計的小編 移動端UI設計文章及欣賞

          一、小程序分銷詳解?
          (一)分銷模式設置?
          1. 分銷商等級體系構建?
          • 為了激勵分銷商積極推廣,可設置多級分銷商等級,比如初級、中級、高級分銷商。初級分銷商成功推廣一定數量商品或達到一定銷售額后可晉升為中級分銷商,中級再晉升為高級。不同等級分銷商享受不同的傭金比例,等級越高,傭金比例越高。例如,初級分銷商每成功推廣一單可獲得商品價格 5% 的傭金,中級為 8%,高級為 10%。?
          • 除了傭金比例差異,還可以賦予不同等級分銷商其他權益。高級分銷商可能享有優先參與新品推廣、專屬客服服務等特權,中級分銷商可獲得額外的推廣素材資源,初級分銷商則可通過完成特定任務快速提升等級。?
          1. 傭金計算規則制定?
          • 傭金計算基礎通常以商品實際成交價格為準,即扣除優惠券、積分抵扣等優惠后的金額。比如一件商品原價 100 元,用戶使用了 10 元優惠券,實際支付 90 元,那么分銷商的傭金就基于這 90 元計算。?
          • 可以設置多種傭金計算方式。除了按固定比例計算,還可以采用階梯式傭金計算。例如,分銷商在一個月內推廣銷售額達到 5000 元,傭金比例提升至 12%;達到 10000 元,傭金比例提升至 15%,以此鼓勵分銷商努力提升業績。?
          1. 分銷關系綁定邏輯?
          • 常見的分銷關系綁定方式是基于用戶首次點擊的分享鏈接或掃描的分銷二維碼。當用戶點擊分銷商分享的鏈接進入小程序后,系統自動記錄該用戶與分享鏈接的分銷商之間的關聯關系,后續該用戶在小程序內的所有購買行為,只要符合分銷規則,相應的分銷商都能獲得傭金。?
          • 為了防止分銷關系被惡意篡改,需要有嚴格的技術保障。同時,要設置合理的分銷關系有效期,比如用戶點擊分享鏈接后的 30 天內產生的購買行為都與該分銷商關聯,若超過 30 天未購買,再次購買時需重新點擊分享鏈接確定分銷關系。?
          (二)分銷推廣工具與渠道?
          1. 商品分享鏈接與海報制作?
          • 為分銷商提供便捷的商品分享鏈接生成工具,鏈接要簡潔且包含分銷商的唯一標識信息,方便系統識別和追蹤。同時,設計精美的商品分享海報,海報上突出商品的核心賣點、優惠信息以及分銷商專屬二維碼。例如,對于一款護膚品,海報上展示產品的主要功效(如美白、保濕)、限時折扣(如 8 折優惠)以及分銷商二維碼,吸引用戶掃碼購買。?
          • 海報的設計風格要與小程序整體品牌形象一致,并且要適應不同的社交平臺尺寸要求。在微信朋友圈分享時,海報尺寸應符合朋友圈最佳展示效果,確保清晰美觀,提高用戶的點擊率和購買轉化率。?

          1. 社交媒體渠道推廣?
          • 鼓勵分銷商在微信、微博、抖音等社交媒體平臺進行推廣。在微信上,分銷商可以將商品分享鏈接或海報發送到朋友圈、微信群,針對不同的圈子選擇不同的推廣話術。比如在寶媽群推廣母嬰類小程序商品時,話術可以側重于產品對寶寶健康成長的幫助以及自身使用的真實體驗。?
          • 在微博上,利用熱門話題標簽,結合商品特點發布有趣、有價值的內容,吸引更多潛在用戶關注。例如推廣一款健身器材小程序商品時,發布與健身相關的話題內容,如 “如何在家高效健身”,并在文中巧妙植入商品分享鏈接。在抖音上,可以制作生動的短視頻展示商品使用過程和效果,引導用戶點擊視頻中的小程序鏈接購買。?
          1. 小程序內分銷中心建設?
          • 在小程序內搭建專門的分銷中心頁面。頁面設計要簡潔明了,易于操作。在分銷中心,分銷商可以清晰地看到自己的推廣數據,如推廣訂單數量、銷售額、待結算傭金、已結算傭金等。同時,提供推廣商品的詳細列表,包括商品圖片、名稱、價格、傭金比例等信息,方便分銷商選擇推廣商品。?
          • 分銷中心還應設置分銷商申請入口(如果有申請成為分銷商的門檻)、分銷規則說明、推廣技巧分享等板塊。推廣技巧分享板塊可以定期更新一些實用的推廣方法和案例,幫助分銷商提升推廣效果。例如分享如何撰寫吸引人的朋友圈文案、如何利用抖音短視頻進行商品推廣等案例。?
          (三)分銷數據管理與分析?
          1. 關鍵數據指標監測?
          • 商家需要重點監測分銷商數量、分銷商活躍度、推廣訂單量、銷售額、傭金支出等關鍵數據指標。通過對分銷商數量的監測,可以了解分銷團隊的規模增長情況;分銷商活躍度反映了分銷商參與推廣的積極性,比如查看分銷商登錄分銷中心的頻率、分享商品的次數等。?
          • 推廣訂單量和銷售額直接體現了分銷效果,通過分析不同時間段、不同商品的訂單量和銷售額,能夠發現暢銷商品和銷售低谷期,以便調整推廣策略。傭金支出數據則幫助商家控制成本,確保分銷模式的盈利性。?
          1. 數據報表生成與分析?
          • 定期生成數據報表,如日報表、周報表、月報表等。報表內容應包括各項關鍵數據指標的詳細數據以及變化趨勢圖表。例如,月報表中展示本月分銷商數量的增長曲線、各類商品的銷售額占比餅圖、不同等級分銷商的傭金支出柱狀圖等。?
          • 通過對數據報表的深入分析,挖掘數據背后的原因。如果發現某個時間段內銷售額下降,可能是因為某類商品的市場需求變化,或者是競爭對手推出了類似的優惠活動。根據分析結果,及時調整商品推廣策略,如加大熱門商品的推廣力度、優化商品價格體系等。?
          1. 基于數據的優化決策?
          • 根據數據分析結果,對分銷模式進行優化。如果發現某個等級的分銷商數量過多,但業績貢獻不高,可以適當調整該等級的傭金比例或晉升門檻,激勵分銷商努力提升業績。?
          • 對于推廣效果不佳的商品,可以考慮優化商品詳情頁內容、調整商品價格或推出針對性的促銷活動。同時,根據數據反饋,為分銷商提供更有針對性的推廣建議和資源支持,提高整體分銷效率。?
          二、小程序轉介紹策略?
          (一)轉介紹獎勵機制設計?
          1. 多樣化獎勵形式?
          • 積分獎勵:用戶成功轉介紹新用戶注冊或購買商品后,可獲得一定數量的積分。積分可以在小程序內兌換商品、優惠券或參與抽獎活動。例如,每成功轉介紹一位新用戶注冊獲得 50 積分,成功轉介紹一位新用戶購買商品獲得 200 積分,1000 積分可兌換一張價值 50 元的小程序通用優惠券。?
          • 優惠券獎勵:提供不同類型的優惠券作為轉介紹獎勵,如滿減優惠券、折扣優惠券、無門檻優惠券等。新用戶通過轉介紹鏈接注冊后,雙方都能獲得優惠券。比如新用戶獲得一張滿 100 元減 30 元的優惠券,轉介紹用戶獲得一張 8 折優惠券。?
          • 現金紅包獎勵:對于成功轉介紹的用戶直接發放現金紅包,紅包金額可以根據新用戶的消費金額或行為進行設置。例如,新用戶完成首次購買且消費金額達到 100 元,轉介紹用戶可獲得 10 元現金紅包;消費金額達到 200 元,轉介紹用戶可獲得 20 元現金紅包。?
          1. 獎勵門檻與條件設定?
          • 設定合理的獎勵門檻,既要保證用戶有動力參與轉介紹,又要確保轉介紹來的新用戶具有一定的價值。例如,要求新用戶注冊后 7 天內完成首次購買,轉介紹用戶才能獲得獎勵;或者新用戶在小程序內的累計消費金額達到一定數額(如 500 元),轉介紹用戶可獲得額外的高額獎勵。?
          • 明確獎勵的領取條件和方式。在小程序內設置清晰的轉介紹獎勵規則說明頁面,告知用戶如何參與轉介紹活動、滿足什么條件可以獲得獎勵以及如何領取獎勵。獎勵領取方式要便捷,如積分自動到賬、優惠券直接發放到用戶賬戶、現金紅包通過微信轉賬或小程序內余額提現等。?
          1. 獎勵活動的時效性與周期性?
          • 為了營造緊迫感,提高用戶參與轉介紹的積極性,獎勵活動可以設置時效性。例如,限時一周內成功轉介紹可獲得雙倍積分或更高金額的優惠券。同時,定期開展周期性的轉介紹獎勵活動,如每月推出一次 “轉介紹狂歡月” 活動,在活動期間加大獎勵力度,吸引更多用戶參與。?
          • 在活動結束后,對活動效果進行總結和分析,根據數據反饋調整下一次活動的獎勵策略和活動形式,不斷優化轉介紹獎勵機制。?
          (二)轉介紹流程優化?
          1. 簡化分享操作步驟?
          • 在小程序內設計簡潔直觀的轉介紹分享入口,確保用戶能夠輕松找到。例如,在商品詳情頁、個人中心等頁面設置明顯的 “分享給好友” 按鈕,點擊按鈕后,用戶可以直接選擇分享到微信好友、微信群或朋友圈。?
          • 分享操作過程要簡單快捷,減少用戶的操作成本。分享鏈接或海報要自動生成,無需用戶手動復制或編輯。同時,支持用戶自定義分享文案,提供一些預設的優質分享文案供用戶選擇,方便用戶根據不同的分享場景進行調整。?
          1. 清晰的引導與反饋機制?
          • 在用戶進行轉介紹操作過程中,提供清晰的引導提示。例如,當用戶點擊 “分享給好友” 按鈕后,彈出提示框告知用戶分享成功后可獲得的獎勵以及如何查看轉介紹結果。在新用戶通過分享鏈接進入小程序后,也有相應的提示告知新用戶這是來自好友的推薦以及注冊或購買可享受的優惠。?
          • 建立及時的反饋機制,讓用戶能夠實時了解轉介紹的進展情況。當新用戶注冊成功后,轉介紹用戶能收到通知;新用戶完成首次購買后,轉介紹用戶也能第一時間得知并獲取相應獎勵,增強用戶對轉介紹活動的參與感和滿意度。?
          1. 個性化轉介紹頁面設計?
          • 為轉介紹用戶生成個性化的轉介紹頁面,頁面上展示轉介紹用戶的專屬信息,如昵稱、頭像以及推薦語。推薦語可以由轉介紹用戶自行編輯,也可以根據用戶在小程序內的購買行為和偏好自動生成。例如,“我在 [小程序名稱] 購買了很多優質商品,強烈推薦給你,快來看看吧!——[轉介紹用戶昵稱]”。?
          • 個性化轉介紹頁面的設計風格要與小程序整體風格一致,同時突出轉介紹的主題和獎勵信息,吸引新用戶的關注和參與。通過個性化設計,增加轉介紹頁面的可信度和吸引力,提高新用戶的轉化率。?
          (三)利用用戶口碑促進轉介紹?
          1. 優質產品與服務保障?
          • 提供優質的產品或服務是建立用戶口碑的基礎。確保小程序內銷售的商品質量可靠、功能滿足用戶需求,服務周到細致。例如,對于電商小程序,商品要嚴格把控質量關,從選品到采購、質檢都要有嚴格的流程;對于服務類小程序,如在線教育小程序,要保證教學質量,教師專業水平高、教學方法得當。?
          • 建立完善的售后服務體系,及時響應和解決用戶的問題和投訴??焖偬幚碛脩舻耐藫Q貨請求、解答用戶的咨詢疑問,讓用戶感受到良好的服務體驗,從而提高用戶對小程序的滿意度和忠誠度,為轉介紹打下良好基礎。?
          1. 用戶評價與案例展示?
          • 在小程序內設置用戶評價和曬單功能,鼓勵用戶分享自己的使用體驗和購買心得。展示真實的用戶評價和曬單圖片,讓潛在用戶能夠直觀地了解商品或服務的實際效果。例如,在商品詳情頁下方設置 “用戶評價” 板塊,展示用戶的文字評價、評分以及曬單圖片,好評率高的商品更容易吸引新用戶購買。?
          • 整理和展示成功的用戶案例,尤其是一些具有代表性的用戶通過使用小程序獲得顯著收益或改善生活的案例。例如,對于一款健身小程序,可以展示用戶通過使用小程序制定的健身計劃,成功減肥或增肌的前后對比照片和用戶的經驗分享,激發其他潛在用戶的興趣和參與欲望,促使他們通過轉介紹鏈接加入小程序。?
          1. 激勵用戶主動傳播口碑?
          • 除了轉介紹獎勵機制,還可以通過其他方式激勵用戶主動傳播口碑。例如,設立 “口碑之星” 評選活動,每月從積極分享使用體驗和轉介紹新用戶的用戶中評選出 “口碑之星”,給予豐厚的獎勵,如免費的商品、高額優惠券或定制禮品等。?
          • 對用戶的好評和分享進行及時回復和感謝,增強用戶的參與感和認同感。可以在用戶評價下方回復個性化的感謝語,對用戶提出的建議表示重視和改進,讓用戶感受到自己的意見被尊重,從而更愿意主動為小程序進行口碑傳播。?
          三、小程序分銷與轉介紹相關界面設計示例?
          (一)分銷中心界面設計?
          1. 整體布局?
          • 分銷中心首頁采用簡潔明了的布局,頂部設置醒目的分銷商等級標識和當前可提現傭金金額。例如,以金色徽章顯示高級分銷商等級,可提現傭金金額以較大字體突出顯示在徽章下方,讓分銷商一眼就能看到自己的關鍵信息。?
          • 頁面中間部分劃分為幾個主要板塊,分別是推廣數據概覽、推廣商品列表、我的團隊(如果有多級分銷)、分銷規則說明。各板塊之間有明顯的分隔線,便于區分和查看。?
          1. 推廣數據概覽板塊設計?
          • 以圖表形式展示推廣訂單數量、銷售額、新增下級分銷商數量等關鍵數據。例如,使用柱狀圖展示近一周每天的推廣訂單數量變化趨勢,讓分銷商直觀地了解自己的推廣業績波動情況;用餅圖展示不同商品的銷售額占比,幫助分銷商明確重點推廣商品。?
          • 在圖表下方,列出具體的數據數值,并標注與上一周期(如上周)相比的增長或下降百分比,讓分銷商清晰地了解自己的業績變化情況。?
          1. 推廣商品列表板塊設計?
          • 商品列表按照商品圖片、商品名稱、商品價格、傭金比例、操作按鈕的順序排列。商品圖片展示要清晰,能夠吸引用戶注意力;商品名稱簡潔明了,突出商品核心特點;商品價格和傭金比例以較大字體顯示,方便分銷商查看和比較。?
          • 操作按鈕包括 “分享推廣” 和 “查看詳情”。點擊 “分享推廣” 按鈕,可直接彈出分享渠道選擇界面(如微信好友、微信群、朋友圈等),方便分銷商進行商品推廣;點擊 “查看詳情” 按鈕,可進入商品詳細信息頁面,包括商品描述、用戶評價、推廣素材下載等內容。?
          1. 我的團隊板塊設計(多級分銷適用)?
          • 以樹形結構展示分銷商的團隊成員關系,每個成員頭像旁邊顯示其昵稱、等級和業績數據(如推廣訂單量、銷售額)。通過點擊成員頭像,可以查看該成員的詳細推廣數據和下級成員列表。?
          • 在團隊板塊下方,設置團隊業績統計數據,如團隊總推廣訂單量、總銷售額、團隊成員傭金支出等,讓分銷商對自己團隊的整體業績有清晰的了解。?
          1. 分銷規則說明板塊設計?
          • 以簡潔易懂的文字詳細說明分銷規則,包括分銷商等級晉升條件、傭金計算方式、結算周期、提現規則等內容。對于重要的規則條款,使用加粗或不同顏色字體突出顯示,方便分銷商快速查看關鍵信息。?
          • 在規則說明下方,設置常見問題解答(FAQ)板塊,針對分銷商可能遇到的問題進行解答,如 “如何成為分銷商”“為什么我的傭金還未到賬” 等,減少分銷商的咨詢成本。?
          (二)轉介紹頁面設計?
          1. 分享入口界面設計?
          • 在小程序內多個頁面設置明顯的轉介紹分享入口,如個人中心頁面右上角設置一個帶有 “分享有禮” 字樣的圖標,商品詳情頁下方設置 “分享給好友,一起享優惠” 按鈕。按鈕或圖標的設計風格要與小程序整體風格一致,同時具有較高的辨識度,吸引用戶點擊。?
          • 當用戶點擊分享入口時,彈出一個半透明的分享選擇框,顯示分享到微信好友、微信群、朋友圈以及復制鏈接等選項。每個選項旁邊配有相應的簡潔圖標,如微信好友圖標、微信群圖標、朋友圈圖標等,方便用戶快速選擇分享渠道。?
          1. 個性化分享頁面設計?
          • 當用戶選擇分享到微信等平臺后,生成個性化的分享頁面。頁面頂部展示轉介紹用戶的昵稱和頭像,頭像下方顯示一句個性化推薦語,如 “我一直在用 [小程序名稱],真的很棒,推薦給你!——[轉介紹用戶昵稱]”。?
          • 頁面中間部分展示小程序的核心價值和特色,如電商小程序可以展示熱門商品圖片和優惠信息,服務類小程序可以展示服務優勢和用戶好評截圖。同時,突出轉介紹獎勵信息,如 “分享成功,你和好友都可獲得 50 積分和一張滿 100 減 20 優惠券”,以吸引新用戶參與。?
          • 頁面底部設置一個醒目的 “立即加入” 按鈕,按鈕顏色與頁面整體色調形成對比,突出顯示。點擊按鈕,可直接跳轉到小程序注冊或商品購買頁面。?
          1. 轉介紹結果反饋界面設計?
          • 當新用戶通過分享鏈接注冊或購買商品后,轉介紹用戶會收到轉介紹結果反饋通知。通知可以是小程序內的彈窗提示,也可以是消息中心的一條消息。?
          • 彈窗提示或消息內容顯示新用戶的注冊信息(如昵稱)或購買商品信息,以及轉介紹用戶獲得的獎勵詳情,如 “恭喜您,您成功轉介紹 [新用戶昵稱] 注冊,已獲得 50 積分,獎勵已發放至您的賬戶”。同時,提供一個 “查看我的獎勵” 按鈕,方便用戶查看自己的積分、優惠券等獎勵情況。?

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          APP中的折疊菜單應該如何設計?先看這份設計解析

          杰睿 移動端UI設計文章及欣賞

          編劇導語:折疊菜單是在頁面中垂直堆疊的菜單列表,通過展開/折疊來顯示或隱藏更多菜單內容。APP中的折疊菜單該如何設計呢?本文作者分享了折疊菜單的設計解析及設計應用,一起來看看吧!

          大家好,這里是設計夾,今天為大家分享的是「折疊菜單」。

          折疊菜單(Accordion),又稱手風琴菜單,是在頁面中垂直堆疊的菜單列表,通過展開/折疊來顯示或隱藏更多菜單內容。

          接下里通過講解折疊菜單的構成、樣式和設計解析來更進一步了解折疊菜單的運用~

          一、折疊菜單的構成

          1. 狀態

          折疊菜單的狀態包括收起、展開、懸停、選中、禁用狀態等。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          2. 展開圖標的位置

          在折疊菜單中,通常用“V形”圖標表示菜單展開/收起的狀態。“V形”圖標可以在左側,也可以放在右側,用來表示狀態。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          除了使用最常見的“V形”圖標,還可以用以下圖標來代替:上/下填充圖標;加號/減號;向上/向下箭頭。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          3. 附加圖標

          當我們把展開圖標放在右側的情況下,我們可以面板左側設計一些圖標,來增強菜單的含義,并讓頁面看起來更精致。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          在某些場景下,還可以通過使用不同的顏色,更加直觀地分隔每個菜單。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          二、折疊菜單的樣式

          1. 封閉式折疊菜單

          在頁面設計中,大多數情況下都是使用封閉式折疊面板。

          通過一條淺色的的分隔線將不同的菜單分隔開,這種樣式的優點是可以節省一些豎向的屏幕空間,尤其是在移動端屏幕尺寸較小的情況下。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          2. 分離式折疊菜單

          分離式折疊面板常用在桌面端中,每個菜單的展示更清晰,設計樣式更簡潔。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          3. 突出顯示展開菜單

          突出顯示菜單展開的狀態,這樣在多個折疊菜單打開的情況下,用戶也能清晰找到需要的信息。

          常用的突出顯示的方式有:增加陰影、背景填充、輪廓描邊等。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          例如在頁面背景是白色的情況下,我們可以使用透明度很低的灰色作為下拉菜單的背景,更清晰地展示展開的菜單。另外,還可以為下來菜單填充和品牌色一致的顏色描邊,起到強調品牌的效果。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          三、折疊菜單設計解析

          1. 展示預覽

          通過在主菜單的下面添加已選擇的內容,這樣在不需要展開面板的情況下,用戶就能知道選擇了哪些內容,進一步提高操作效率。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          2. 數字徽標

          當已選內容太多時,我們不可能將這些內容全部在主菜單羅列出來,在這樣的情況下,可以使用數字徽標的形式來展示已選擇的菜單數。這樣的設計有點像購物車中不斷變化的數字徽標,告訴用戶加購的數量。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          3. 提示文案

          通過在折疊面板中添加提示文案,起到輔助作用,展示更多和菜單相關的信息。這種設計形式更適合用在移動端中,在有限的屏幕尺寸上盡可能多的展示內容。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          4. 移動端應用樣式

          等寬使用:在移動端中使用等寬的折疊菜單,方方便用戶點擊操作。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          側邊欄:將折疊菜單放在側邊的導航抽屜中,點擊左上角的圖標來展開菜單項。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          菜單篩選:將側邊欄與折疊面板配合使用,實現菜單篩選的功能。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          5. 桌面端應用樣式

          側邊導航:和移動端類似,桌面端最常用的方法是把折疊菜單放到頁面左側,作為網頁的側邊導航使用。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          過濾器:根據桌面端的頁面布局結構,折疊菜單可以放在頁面左側或右側,實現精確查找、內容過濾等功能。

          APP中的折疊菜單應該如何設計?先看這份設計解析

          四、最后

          以上就是折疊菜單的設計解析及設計應用,希望通過這些知識能幫你進一步了解折疊菜單的用法。

          「組件系列」的其他文章,近期也會不斷更新,歡迎大家關注~

          #專欄作家#

          作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

          本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

          題圖來自 Pixabay,基于CC0協議。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          日歷

          鏈接

          個人資料

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

          存檔

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