首頁

從概念到落地:看頭部 UI 設(shè)計公司如何用創(chuàng)意重構(gòu)數(shù)字界面未來

大橙子 移動端UI設(shè)計文章及欣賞

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

APP 設(shè)計中的色彩心理學(xué):如何用色彩提升用戶體驗

ui設(shè)計分享達(dá)人 移動端UI設(shè)計文章及欣賞

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

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

UI 設(shè)計風(fēng)格演變:從擬物到扁平,下一個潮流在哪?

lanlanwork 移動端UI設(shè)計文章及欣賞

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

     

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

     

     

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

大橙子 移動端UI設(shè)計文章及欣賞

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

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

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

一、了解UI設(shè)計中的圖片

1. 為什么要重視圖片

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

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

2. 常用的圖片格式

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

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

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

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

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

1. 圖片的使用比例

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

1)1:1 比例

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

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

2)3:2比例

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

3)4:3比例

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

4)16:9比例

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

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

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

2. 圖片的使用場景

1)單圖布局

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

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

2)圖文列表

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

單列組合

左文右圖:以文字為主、圖片為輔,主要強調(diào)文字信息,且圖片與標(biāo)題的關(guān)聯(lián)性不是很大,能減少減少圖片對文字的干擾,對圖片的質(zhì)量要求不高,很多新聞、資訊類產(chǎn)品都是選用這種方式布局。

左圖右文:在圖片內(nèi)容優(yōu)先于文本內(nèi)容的情況下,采用左圖右文的方式,更強調(diào)以圖片直觀的傳達(dá)內(nèi)容、吸引用戶的視線,對圖片的質(zhì)量要求高于左文右圖,一般是電商、旅游類產(chǎn)品的最佳之選。

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

雙列組合

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

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

3)多圖組合

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

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

3. 圖片操作的交互手勢

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

1)滑動

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

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

2)點擊/長按

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

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

長按:調(diào)出圖片的部分屬性信息、下載圖片等進(jìn)行下一步操作。

3)雙指縮放

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

三、圖片樣式效果

1. 圖片遮罩

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

2. 毛玻璃(背景模糊)

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

3. 摳圖+純色背景組合

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

4. 圓角設(shè)定

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

5. 圖片出界

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

四、圖片處理小技巧

1. 符合產(chǎn)品氣質(zhì)

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

2. 切合主體,表達(dá)產(chǎn)品核心內(nèi)容

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

3. 風(fēng)格統(tǒng)一

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

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

4. 顏色豐富

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

5. 設(shè)計稿需呈現(xiàn)上線的實際效果

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

6. 文件大小處理

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

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

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

7. 倍率切圖

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

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

五、總結(jié)

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

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

#專欄作家#

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

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于 CC0 協(xié)議

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

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

大橙子 移動端UI設(shè)計文章及欣賞

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

產(chǎn)品經(jīng)理:我覺得這里要加個彈窗,你去設(shè)計吧。

設(shè)計師:emmm…

彈窗到底該不該加?怎么加?用什么形態(tài)展示?真正的作用是什么?這些真的是產(chǎn)品經(jīng)理說了算嗎?

好的產(chǎn)品通常會在恰當(dāng)?shù)臅r間、合適的位置給出合理的反饋,彈窗也是必不可少的反饋方式,不反饋、反饋不及時或反饋不合理都會帶來不好的使用體驗,甚至誤導(dǎo)用戶,從而導(dǎo)致用戶流失。

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

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

一、彈窗的基本介紹

1. 彈窗的定義

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

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

2. 彈窗組件的構(gòu)成

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

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

二、彈窗體系分類

1. 模態(tài)彈窗

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

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

1.1 對話框Dialog/Alert

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

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

1.2 動作欄Actionbar

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

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

1.3 浮層Popover/Popup

浮層是指用戶操作某個功能/內(nèi)容后,會在附近出現(xiàn)一個帶有視覺引導(dǎo)性質(zhì)的彈窗,最常見的浮層就是下拉菜單/彈窗等,浮動于頂層窗口并指向觸發(fā)操作的位置。

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

2. 非模態(tài)彈窗

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

2.1 提示框Toast/Hud

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

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

2.2 提示對話框Snackbar

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

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

2.3 通知Notice

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

2.4 透明指示層HUD

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

三、彈窗的使用場景

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

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

1. 打斷用戶的操作

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

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

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

2. 定制化彈窗

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

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

3. 二次確認(rèn)

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

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

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

4. 簡單提示

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

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

四、如何設(shè)計有效的彈窗

1. 前提條件

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

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

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

2. 設(shè)計目的

首先,設(shè)計師應(yīng)該理解產(chǎn)品需求,分別從用戶側(cè)(能給用戶帶來什么?滿足什么樣的需求?避免什么損失?…)、產(chǎn)品側(cè)(能給產(chǎn)品帶來什么?產(chǎn)品如何期望?是否合理?能得到什么樣的結(jié)果?…)分析為什么要加彈窗,然后將分析的結(jié)果轉(zhuǎn)化為設(shè)計目標(biāo),以確保彈窗根據(jù)不同的需求,在恰當(dāng)?shù)臅r間、適合的樣式合理的呈現(xiàn)給用戶。

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

3. 設(shè)計思路

在UI設(shè)計中,組件的設(shè)計思路基本相通,旨在滿足產(chǎn)品的實用性、視覺的統(tǒng)一性,主要圍繞著以下幾點進(jìn)行:

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

五、需關(guān)注的問題點

1. 信息的層級關(guān)系

設(shè)計彈窗時需要注意信息的主次層級關(guān)系,優(yōu)先傳達(dá)用戶想要的或產(chǎn)品想要讓用戶知道的,以確保重要的信息在第一時間傳達(dá)給用戶。

2. 展現(xiàn)形式

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

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

3. 文案表述

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

4. 彈出的時機及頻率

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

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

六、總結(jié)

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

能清楚認(rèn)知、理解、使用彈窗組件是一個成熟UI設(shè)計師必備的條件,當(dāng)然,并不能以此定義設(shè)計師是否優(yōu)秀,在此基礎(chǔ)上,還需通過持續(xù)的學(xué)習(xí)探索,挖掘出更多技巧,不斷提高自身的專業(yè)能力。

#專欄作家#

大漠飛鷹;人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動、產(chǎn)品體驗的挖掘,利用設(shè)計的手段為受眾用戶帶來更好的體驗,即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于 CC0 協(xié)議

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

小程序分銷與轉(zhuǎn)介紹攻略

藍(lán)藍(lán)設(shè)計的小編 移動端UI設(shè)計文章及欣賞

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

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

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

大橙子 移動端UI設(shè)計文章及欣賞

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

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

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

接下里通過講解折疊菜單的構(gòu)成、樣式和設(shè)計解析來更進(jìn)一步了解折疊菜單的運用~

一、折疊菜單的構(gòu)成

1. 狀態(tài)

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

2. 展開圖標(biāo)的位置

在折疊菜單中,通常用“V形”圖標(biāo)表示菜單展開/收起的狀態(tài)。“V形”圖標(biāo)可以在左側(cè),也可以放在右側(cè),用來表示狀態(tài)。

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

3. 附加圖標(biāo)

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

二、折疊菜單的樣式

1. 封閉式折疊菜單

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

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

2. 分離式折疊菜單

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

3. 突出顯示展開菜單

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

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

三、折疊菜單設(shè)計解析

1. 展示預(yù)覽

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

2. 數(shù)字徽標(biāo)

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

3. 提示文案

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

4. 移動端應(yīng)用樣式

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

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

側(cè)邊欄:將折疊菜單放在側(cè)邊的導(dǎo)航抽屜中,點擊左上角的圖標(biāo)來展開菜單項。

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

菜單篩選:將側(cè)邊欄與折疊面板配合使用,實現(xiàn)菜單篩選的功能。

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

5. 桌面端應(yīng)用樣式

側(cè)邊導(dǎo)航:和移動端類似,桌面端最常用的方法是把折疊菜單放到頁面左側(cè),作為網(wǎng)頁的側(cè)邊導(dǎo)航使用。

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

過濾器:根據(jù)桌面端的頁面布局結(jié)構(gòu),折疊菜單可以放在頁面左側(cè)或右側(cè),實現(xiàn)精確查找、內(nèi)容過濾等功能。

APP中的折疊菜單應(yīng)該如何設(shè)計?先看這份設(shè)計解析

四、最后

以上就是折疊菜單的設(shè)計解析及設(shè)計應(yīng)用,希望通過這些知識能幫你進(jìn)一步了解折疊菜單的用法。

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

#專欄作家#

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

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Pixabay,基于CC0協(xié)議。

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

卡片式設(shè)計 | 掌握這些技法,快速提升界面效果!

大橙子 移動端UI設(shè)計文章及欣賞

卡片式設(shè)計是產(chǎn)品常用的頁面設(shè)計手段之一,它自帶的分割屬性讓頁面布局更加清晰,也是頁面布局的利器。但是,分割也可能會影響用戶沉浸式的瀏覽體驗等問題。如何用好卡片式設(shè)計?本文作者對此進(jìn)行了分析,與你分享。

近幾年,卡片式設(shè)計可以說是移動端產(chǎn)品中極為常見的設(shè)計形式了,甚至有很多互聯(lián)網(wǎng)大廠將卡片式設(shè)計納入設(shè)計語言,在各大APP中得到廣泛運用。

卡片式設(shè)計自帶分割屬性、讓界面更有層次感,能給人一種視覺上的享受,也因此讓其成為了頁面布局的利器,但它并非萬能,因分割的原因可能會影響用戶沉浸式的瀏覽體驗、造成橫向/縱向空間浪費等問題,需要根據(jù)實際場景和內(nèi)容形式來確定,不要專門為了“卡片式”而設(shè)計。

很多設(shè)計師對卡片設(shè)計習(xí)以為常,但對于使用卡片的原因、視覺表現(xiàn)方式、優(yōu)/缺點等并不是很了解。那么卡片到底該如何設(shè)計?需要注意哪些細(xì)節(jié)?筆者根據(jù)經(jīng)驗并結(jié)合平時的一些思考,跟大家一起聊聊在設(shè)計中極易忽略的細(xì)則,希望能幫助大家提升卡片設(shè)計的精致感。

一、卡片式設(shè)計的定義

1. 什么是卡片?

早在互聯(lián)網(wǎng)時代之前,卡片就出現(xiàn)在了我們生活中的方方面面,如名片、不干膠標(biāo)簽、便利貼、會員卡…等,不管是何種類型的卡片,它都將代表著我們現(xiàn)實生活中的某個特定信息。

卡片指的是含有圖片或文本信息的容器,它將我們需要的信息歸納在一起、并形成獨立的個體,以至于后續(xù)被引用到線上界面中,同樣具有非常不錯的信息歸納效果。

2. 互聯(lián)網(wǎng)中的卡片式設(shè)計

卡片本身就是一個完整的信息區(qū)塊、并同時承載豐富的互動方式。在UI設(shè)計中,個性化和美感兼?zhèn)涞目ㄆ皆O(shè)計具有很強的易用性,它是一個UI設(shè)計組件,將標(biāo)題、文本內(nèi)容、圖形/圖片進(jìn)行整合并模塊化,讓信息的表達(dá)更加直觀、操作也更便捷。

卡片式設(shè)計之所以能成為當(dāng)今比較流行的趨勢,是因為它能讓界面信息更有層次感,從設(shè)計、交互、視覺以及用戶體驗等各方面來看,都有不錯的優(yōu)點。站在用戶角度,即便不太理解卡片的概念(也不需要理解),但能快速知道如何使用它,相對來說,學(xué)習(xí)成本也是極低的。

二、卡片式設(shè)計價值

1. 結(jié)構(gòu)清晰

卡片在占用屏幕空間較少的情況下能夠?qū)⒉煌笮?、不同類型的信息?nèi)容按邏輯進(jìn)行分組呈現(xiàn),使界面結(jié)構(gòu)更加清晰。相比純粹的留白或分割線,卡片不僅對信息作出了分割,其本身還是一個獨立的容器,讓歸納組合后的信息能快速突出重點,將復(fù)雜內(nèi)容簡單化處理。

卡片式布局整齊簡練,清晰的信息結(jié)構(gòu)有助于用戶瀏覽,方便快速找到自己感興趣的內(nèi)容,避免用戶產(chǎn)生一種費時或感覺內(nèi)容超長的恐懼感,還能節(jié)省更多的時間成本。最常見的就是信息列表、圖文混排等,不僅做到了視覺上的美觀,也達(dá)到了平衡文字及圖片強弱的效果。

2. 場景拓展

卡片式設(shè)計有利于場景拓展,他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體,在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節(jié)假日增加二層樓…等。

3. 空間擴展

卡片式設(shè)計一度打破了移動端多為縱向操作、原有傳統(tǒng)的列表式布局,在空間有限的移動端設(shè)備中,還能很好的利用橫向空間。將橫向滑動區(qū)域的最后一個卡片漏出一小部分(若隱若現(xiàn)才是誘惑),不僅能給予用戶更多選擇與期待,其空間利用率也得到了很好的擴展,在展示更多內(nèi)容的情況下依然能保持模塊的整體性。

4. 突出重點

卡片式設(shè)計能很好的通過邊界襯托出內(nèi)容的整體性,特別是在電商類產(chǎn)品中的首頁頭部、瓷片區(qū)、營銷引流區(qū)將其應(yīng)用到了極致,即便在卡片數(shù)量較多的情況下,用戶依然能清晰的感知到內(nèi)容的歸屬層級以及重要信息。

5. 兼容多端

卡片作為一個容器,它可以自由無限的等比縮放,非常適合響應(yīng)式設(shè)計。在手機、iPad、電腦等屏幕尺寸復(fù)雜的情況下,通過放大縮小或增減縱向排列數(shù)量的方式配合響應(yīng)式的斷點設(shè)計,讓同一界面在不同設(shè)備之間輕易的創(chuàng)造出一致性的視覺體驗。

6. 易于操作

卡片給人最直觀的感覺就是可以操作,它不用箭頭、按鈕或超鏈接等引導(dǎo)性的視覺元素提醒,節(jié)省了一定的頁面空間,還有著更大的操作熱區(qū),無需做到精準(zhǔn)點擊??ㄆ皆O(shè)計很容易融入各種交出手勢,如單擊、雙擊、長按、拖動、滑動等,為用戶提供更多便捷的操作。

7. 跳轉(zhuǎn)流暢

卡片可通過縮放的形式充分利用動畫進(jìn)行頁面跳轉(zhuǎn),例如App Store“Today”頻道,點擊卡片后直接等比放大至全屏,給用戶一種還停留在當(dāng)前頁面的錯覺,避免了傳統(tǒng)的跳轉(zhuǎn)頁面而造成的信息割裂感,流暢絲滑的過渡,給用戶更自然的交互體驗。

三、常見的卡片式設(shè)計樣式

1. 四周留白

這種類型的卡片在UI設(shè)計中最為常見,柔和的圓角、邊緣陰影以及四周很自然的留白,讓內(nèi)容模塊的存在感更加強烈,整個頁面信息的層級也更加清晰。

2. 懸浮內(nèi)容之上

懸浮型卡片并非模態(tài)彈窗,與其相比,懸浮卡片不需要主動操作觸發(fā),可作為臨時控件或長期固定顯示,并且比模態(tài)彈窗能承載更多信息內(nèi)容,可通過伸縮來定義卡片中的信息數(shù)量,或多、或少、或展示、或隱藏,在頁面中非常靈活。

例如高德地圖首頁,搜索框及右側(cè)的功能入口長期懸浮在地圖之上,而下方卡片中的內(nèi)容會隨著高度的伸縮自動調(diào)節(jié)可展示的數(shù)量,非常實用。

3. 通欄類型

通欄類型的卡片具有更強的視覺阻斷,對區(qū)分不同的功能模塊有不錯的效果,不過這種類型只通過頁面背景色保留上下邊間、且不會過多,不然頁面會顯得零散、雜亂。

四、卡片適用場景介紹

1. 瀑布流

瀑布流主要正針對圖片較多、或以圖片為主的內(nèi)容設(shè)計,它最大的優(yōu)點是無需過于在意圖片的高度,最大限度的還原原始圖片效果。

卡片式設(shè)計的瀑布流對信息的組合、包容性更強,不僅能在單屏區(qū)域內(nèi)顯示更多內(nèi)容,同時又將每組信息組合作出了明確的劃分,在不破壞頁面整體性的基礎(chǔ)上也做到了相對獨立,如花瓣、Pinterest就是最好的例子。

2. 信息流

信息流的展現(xiàn)方式主要以文字、圖片或視頻內(nèi)容為主,是一種較長內(nèi)容的媒介,不管哪種展現(xiàn)方式,其都需要用戶耗費較長時間的滑動、瀏覽來篩查對自己有用的信息。

卡片式設(shè)計將信息進(jìn)行分塊處理,通過阻隔的方式快速告知用戶每個卡片的核心內(nèi)容,便于用戶在長時間的滑動過程中也能快速識別重要信息。

3. 左/右滑動

卡片式左右滑動組合在音樂、視頻類產(chǎn)品中用最為廣泛,因內(nèi)容本身就圖片居多,也更適合卡片式設(shè)計,相比平鋪具有更強的層次感,對用戶的吸引力較強,尤其最右側(cè)漏出的一小部分內(nèi)容營造出神秘的感覺,用戶會不由自主的想去滑動以求獲取更多信息。

4. 優(yōu)惠卡/券

卡/券設(shè)計實際是把生活中的實物映射到了UI設(shè)計中,通過模擬實物造型設(shè)計成卡片樣式,有效降低用戶的理解成本,并對其有了更直觀的感知,真實感尤為強烈。

5. 突發(fā)事件/臨時提醒

對于用戶主動觸發(fā)或系統(tǒng)臨時發(fā)起的非固定性內(nèi)容,利用卡片式設(shè)計會讓信息布局更靈活、視覺更突出,在不影響用戶使用的前提下,可出現(xiàn)在任何位置。

6. 部分頁面頭圖

卡片式設(shè)計可以將個人中心、個人主頁、會員等頁面中的關(guān)鍵信息進(jìn)行概括,并在頭部位置進(jìn)行重點突出,不僅讓原本單個的內(nèi)容形成整體,還能營造出沉浸式的氛圍。

五、卡片式設(shè)計原則及小技巧

1. 一致性原則

為了保持界面設(shè)計的一致性,需要將卡片樣式納入設(shè)計規(guī)范,例如卡片是否通欄、是否需要設(shè)定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數(shù)值的確定等,大部分情況下都需要遵循設(shè)計規(guī)范。

2. 功能定位決定卡片形式

在同一產(chǎn)品中,雖然要遵循設(shè)計規(guī)范以確保一致性的視覺效果,但并非所有頁面都適合卡片式設(shè)計。

那么,到底是否需要采用卡片形式、使用哪種卡片類型?這還得根據(jù)頁面內(nèi)容屬性及目標(biāo)定位來決定。例如社交產(chǎn)品中的臨時會話列表、動態(tài)圈子使用卡片形式,很浪費縱向空間、甚至?xí)@得很“雞肋”,用分隔線或間距留白來區(qū)分信息組顯然更合適;但對于電商類型的產(chǎn)品,利用卡片將不同的商品分隔后又進(jìn)行歸納,會更容易識別,信息的可讀性也會更強。

3. 避免過多卡片嵌套

卡片式設(shè)計本身就包含了容器與背景的層級表現(xiàn),為了保持內(nèi)容的正常展示與用戶瀏覽體驗,避免在卡片中嵌套多層卡片,以免信息層級雜/亂而增加用戶的視覺負(fù)擔(dān)。

如果再同一卡片中需要再次區(qū)分多個信息組,可利用間距留白、分割線或淺色背景等元素屬性來區(qū)分,依然能達(dá)到想要的效果。

4. 合理利用橫向空間

因為卡片內(nèi)、外的雙向間距留白,在空間有限的移動端設(shè)備中,橫向空間利用率較低,因此除了合理的減小左右間距外,還可以適當(dāng)利用左右滑動來擴充橫向隱性空間。

例如淘票票首頁,在1.5屏的范圍內(nèi),幾乎每個模塊都能橫向滑動查看更多內(nèi)容,從用戶體驗角度出發(fā),這是縱向空間無法比擬的。

5. 降低縱向空間的浪費

卡片式設(shè)計不是目的,其主要是用來更好的區(qū)分信息層級、提升用戶瀏覽體驗,因為卡片要作為獨立空間的存在,必定會增加上下間距而導(dǎo)致頁面拉長,因此,如無必要,不必盲目采用卡片式設(shè)計。

例如美團(tuán)APP的「首頁、電商、購物車、我的」4大主功能頁面都使用了卡片形式,而「消息」頁則采用分割線進(jìn)行信息分組,試想一下,如果為了統(tǒng)一規(guī)范而使用卡片,不僅造成很強的割裂感、還會極大的浪費縱向空間。

6. 長文表達(dá)不適合卡片

這點不用多說,新聞資訊類產(chǎn)品的內(nèi)容詳情頁就是最好的證明,不管其他頁面是否采用卡片形式,但詳情頁并不會跟隨形式,一方面可以讓同屏展示更多內(nèi)容、增加空間利用率,另一方面可減少無關(guān)元素對用戶產(chǎn)生的干擾、給予沉浸式的瀏覽體驗。

7. 突出一個核心內(nèi)容

很多時候,我們總會聽到PM說這個很重要、那個也很重要,都需要突出一點,殊不知當(dāng)什么都突出了也說明什么都沒有突出。在單個卡片中,組始終牢記這個準(zhǔn)則:一次只突出一個核心信息,以便于用戶快速、精準(zhǔn)捕捉,切記不可貪多。

六、結(jié)語

卡片式設(shè)計之所有能快速流行起來且經(jīng)久不衰, 其主要得益于自身的靈活性,尤其是在跨設(shè)備、跨屏幕上有著純天然的優(yōu)勢,能忽略設(shè)備的差異給用戶提供更好的服務(wù)??ㄆ⒉皇呛唵蔚臉邮皆O(shè)計,它是一種自由布局的設(shè)計語言,通過多種方式的信息組合、結(jié)合豐富的交互操作,給用戶創(chuàng)造出極致的使用體驗。

信息的呈現(xiàn)方式雖有不同,但最終的目的都是為了服務(wù)于內(nèi)容,卡片式設(shè)計只是其中的一種形式而已,在設(shè)計過程中,我們需要根據(jù)內(nèi)容結(jié)合實際情況作出合理的判斷,切勿拘泥于形式而忽略內(nèi)容本身的重要性。

任何設(shè)計風(fēng)格及展現(xiàn)形式都有可能成為歷史,卡片式設(shè)計也不會例外,但絕對不是這么快就結(jié)束,它依然值得我們?nèi)ド罹?,力求打造更好的信息布局、更舒適的用戶體驗。

專欄作家

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

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Unsplash,基于 CC0 協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

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

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

大橙子 移動端UI設(shè)計文章及欣賞

底部標(biāo)簽欄的圖標(biāo)風(fēng)格在一定程度上決定了界面的風(fēng)格??雌饋硐鄬唵?,但仍然有很多問題值得注意。作者通過標(biāo)簽欄樣式分析、6個導(dǎo)航欄注意事項來總結(jié)底部標(biāo)簽欄的設(shè)計,希望通過這些內(nèi)容能幫助你對底部標(biāo)簽欄有進(jìn)一步的理解。

底部標(biāo)簽欄(也稱導(dǎo)航欄)是移動端設(shè)計中必備的導(dǎo)航類型之一。底部標(biāo)簽欄上通常會安排最重要且頻繁操作的功能,方便用戶隨時都能快速訪問。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

雖然底部導(dǎo)航欄看起來相對簡單,但要做到精準(zhǔn)設(shè)計,仍然有很多問題值得注意。

本次通過標(biāo)簽欄樣式分析、六個導(dǎo)航欄注意事項來總結(jié)底部標(biāo)簽欄的設(shè)計~

01 標(biāo)簽欄樣式分析

底部標(biāo)簽欄可以是純圖標(biāo)樣式,或者圖標(biāo)與文本標(biāo)簽搭配的樣式。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

選中的標(biāo)簽需要有不同的視覺風(fēng)格,可以使用按鈕、文字、圓點等樣式來表示選中效果,幫助用戶一目了然地定位當(dāng)前導(dǎo)航。

在Apple iOS底部標(biāo)簽欄中,標(biāo)簽欄的寬為390px,高為49px。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

常規(guī)標(biāo)簽欄的圖標(biāo)大小為25x25px,緊湊型的標(biāo)簽欄圖標(biāo)為18x18px。

在iOS的底部標(biāo)簽欄中,文字使用的字體為10px,中等粗細(xì)。

02 標(biāo)簽欄設(shè)計6個注意事項

1)導(dǎo)航數(shù)量不超過5個

底部標(biāo)簽欄最適合放置3-5個導(dǎo)航選項。移動端屏幕相對較小,使用五個以上的選項會讓導(dǎo)航擠在一起,并影響可用性。

另外導(dǎo)航選項太多,手指的觸摸面積(紅色圓圈)會比觸摸目標(biāo)(導(dǎo)航選項)的面積大很多,用戶有可能會意外觸發(fā)錯誤的選項。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

設(shè)計解析:

如果選項很少,只有兩或三個時,可以考慮使用分段控件的設(shè)計樣式,將分段控件放在頁面上方作為導(dǎo)航。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

 如果選項很多,超過五個時,我們需要評估這些導(dǎo)航的優(yōu)先級,篩選出最重要的導(dǎo)航。如果必須要保留五個以上的導(dǎo)航選項,可以考慮使用類似漢堡菜單這樣的控件。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

2)不要使用不熟悉的圖標(biāo)

底部標(biāo)簽欄是用戶使用頻率非常高的導(dǎo)航之一,這就需要確保目標(biāo)受眾應(yīng)該對標(biāo)簽欄中的圖標(biāo)非常清晰,避免讓用戶產(chǎn)生疑惑。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

如果在設(shè)計的時候,覺得某個圖標(biāo)的含義或者樣式對用戶來說不是特別明確,那么就需要將圖標(biāo)與文字標(biāo)簽一起使用,方便用戶快速準(zhǔn)確地理解。

3)圖標(biāo)/文字的顏色不能太淺

圖標(biāo)的顏色對比度差、導(dǎo)航標(biāo)簽的字體小是在底部標(biāo)簽欄設(shè)計中兩個最常見問題。

在底部欄設(shè)計過程中,我們不僅要區(qū)分已選標(biāo)簽和未選標(biāo)簽的狀態(tài),保證已選標(biāo)簽更突出,還要注意觀察圖標(biāo)與文字之間、圖標(biāo)與背景之間的顏色對比度,確保未選狀態(tài)的圖標(biāo)和文字也能夠清晰易讀。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

4)不要設(shè)計可滑動的標(biāo)簽欄

可滑動的標(biāo)簽欄會對導(dǎo)航可見性產(chǎn)生影響,由于并非所有的導(dǎo)航選項都是一次可見,用戶可能很容易錯過后面的選項。

另外,當(dāng)用戶左右滑動標(biāo)簽欄時,前面已選的標(biāo)簽可能會消失,影響使用體驗。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

5)不要截斷標(biāo)簽

底部標(biāo)簽欄的空間本身就很小,因此在導(dǎo)航中使用文字時,每個字符都顯得很重要。

不要截斷標(biāo)簽,這樣會造成用戶不清楚標(biāo)簽的含義,可以嘗試使用更簡練的文字來清楚地傳達(dá)選項含義。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

6)不要使用太復(fù)雜的切換動畫

花哨復(fù)雜的切換動畫對于初次使用的用戶來說可能看起來很酷,但是一旦用戶熟悉了產(chǎn)品并頻繁使用導(dǎo)航時,這些復(fù)雜的切換動畫就會變得很煩人。

這些切換動畫雖然看起來很復(fù)雜,但卻沒有為產(chǎn)品或用戶帶來任何有用的價值或信息,因此這些動畫就會變成一種負(fù)擔(dān),讓用戶感到沮喪。

APP底部標(biāo)簽欄設(shè)計需要注意哪些問題?我總結(jié)了這6點

底部標(biāo)簽欄的切換動畫應(yīng)該干脆利落,可以使用簡單的微動效作為輔助,切莫太復(fù)雜。

03 最后

以上是APP底部標(biāo)簽欄需要注意的6個設(shè)計點,希望通過這些內(nèi)容能幫助你對Bottom Tab Bar有進(jìn)一步的理解。

慢慢來比較快,希望對你有幫助!

參考:babch.biz/bottom-tab-bar-design

專欄作家
作者:Clippp,微信公眾號:Clip設(shè)計夾。每周精選設(shè)計文章,專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自 Pixabay,基于CC0協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

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

UI設(shè)計四大原則,高級感界面背后原來藏著這些秘密

大橙子 移動端UI設(shè)計文章及欣賞

編輯導(dǎo)語:設(shè)計師如何創(chuàng)建一個大放異彩的UI?好的UI設(shè)計不僅是讓軟件變得有個性有品位,還要讓軟件的操作變得舒適簡單、自由,充分體現(xiàn)軟件的定位和特點。本文詳細(xì)地給大家整理了UI設(shè)計的四大原則。一起來看看吧。

是什么讓一個好的 UI 設(shè)計易于閱讀?是什么讓用戶輕松瀏覽?設(shè)計師如何創(chuàng)建一個大放異彩的UI?用戶界面是任何軟件產(chǎn)品的關(guān)鍵部分。

好的UI設(shè)計,用戶甚至?xí)雎运?/p>

如果做得不好,會成為用戶使用產(chǎn)品路上的絆腳石。

為了更高效地設(shè)計能滿足用戶使用的UI,大多數(shù)設(shè)計師都遵循界面設(shè)計原則。

本期我們就帶你了解UI設(shè)計四大原則!

一、美學(xué)性

為了創(chuàng)建視覺美學(xué)UI通常有以下這些小規(guī)則:

1. 規(guī)則 1:光來自天空

陰影是告訴我們正在查看哪些用戶界面元素的寶貴線索。

當(dāng)光從天而降時,它照亮事物的頂部并在其下方投下陰影。

事物的頂部較輕,底部較暗。UI 也是如此。

就像我們所有面部特征的所有底面都有小陰影一樣,幾乎每個 UI 元素的底面都有陰影。

我們的屏幕是平面的,但細(xì)節(jié)設(shè)計會讓屏幕上幾乎所有東西看起來都是立體的。

2. 規(guī)則 2:黑白優(yōu)先

在添加顏色之前進(jìn)行灰度設(shè)計可以簡化視覺設(shè)計中最復(fù)雜的元素,這樣設(shè)計師可以專注于間距和布局元素。

首先設(shè)計黑白。從更難的問題開始,讓應(yīng)用程序在各個方面都美觀且可用,但不需要顏色的幫助,最后再添加顏色。

這是讓應(yīng)用程序看起來“干凈”和“簡單”的可靠的簡單方法。在太多地方有太多顏色是往往容易搞砸設(shè)計。

而在此之后,向灰度站點添加一種顏色可以簡單有效地吸引眼球。

通過修改單一色調(diào)的飽和度和亮度,可以生成多種顏色——深色、淺色、背景、強調(diào)色、引人注目的顏色,但這樣不會讓人眼花繚亂。

使用一種或兩種基本色調(diào)中的多種顏色是突出或中和元素且不會使設(shè)計混亂的可靠方法。

3. 規(guī)則 3:將空白加倍

為了使 UI 看起來很有設(shè)計感,需要增加很多喘息的空間。

空白是構(gòu)成出色視覺布局的最容易被忽視和未充分利用的元素之一。

很多時候,空白被視為空白空間,因此浪費了屏幕空間。

空格對于制作更好和簡化的布局是必要的,因為它最終使用戶專注于本來打算看到的內(nèi)容。大量的空白可以使一些雜亂的界面看起來簡單又容易吸引人。

4. 規(guī)則4:為每個屏幕創(chuàng)建一個焦點

強調(diào)是一種策略,是想要將觀眾的注意力吸引到特定的設(shè)計元素上。這可能是內(nèi)容區(qū)域、圖像、鏈接或按鈕等。

我們看到大多數(shù)設(shè)計領(lǐng)域都會注重焦點的創(chuàng)建,包括建筑、景觀設(shè)計和時裝設(shè)計。

二、清晰

為了通過視覺元素傳遞給用戶信息并導(dǎo)航準(zhǔn)確,不讓用戶迷失方向,通常有以下幾點規(guī)則:

1. 規(guī)則1:避免不必要的復(fù)雜性

始終以盡可能少的步驟和屏幕為目標(biāo)。

使用諸如底部工作表和模式窗口之類的覆蓋來壓縮數(shù)據(jù)并減少應(yīng)用程序的占用空間。同時,確保自主和獨立的方式組織信息??梢詫⑷蝿?wù)和子任務(wù)組合在一起。

重要的是,不要將子任務(wù)隱藏在用戶想不到的頁面上。根據(jù)清晰且合乎邏輯的分類組織屏幕及其內(nèi)容。

同樣,始終將完成任務(wù)所需的步驟數(shù)量減少到最小值。

當(dāng)只需要一兩個操作時,不要讓用戶經(jīng)歷繁瑣的點擊障礙。三擊規(guī)則是最實用的 UI 設(shè)計原則之一,它指出用戶應(yīng)該能夠通過在應(yīng)用程序內(nèi)的任何位置單擊不超過 3 次來實現(xiàn)任何操作或訪問他們需要的任何信息。

最重要的是,永遠(yuǎn)不要要求用戶重新輸入他們已經(jīng)提供的信息。這可能讓用戶扔掉他們的設(shè)備,直接放棄使用。

2. 規(guī)則2:提供清晰的標(biāo)示

這條原則涉及直觀的布局和清晰的信息標(biāo)簽。瀏覽應(yīng)用程序不應(yīng)以任何方式令人困惑,即使初次使用的用戶也是如此。

相反,對界面的探索應(yīng)該是有趣的,并在不知不覺中舒適地學(xué)會。

確保頁面架構(gòu)簡單、合乎邏輯且有清晰的標(biāo)示。

用戶永遠(yuǎn)不應(yīng)該懷疑他們在軟件中的位置,也不應(yīng)該不斷思考才能確定如何到達(dá)他們想去的位置。

3. 規(guī)則3:促進(jìn)視覺清晰度

良好的視覺組織提高了可用性和易讀性,使用戶能夠快速找到他們正在尋找的信息并更有效地使用界面。

設(shè)計布局時,避免一次在屏幕上顯示太多信息。構(gòu)建網(wǎng)格系統(tǒng)設(shè)計以避免視覺混亂。

應(yīng)用內(nèi)容組織的一般原則,例如將相似的項目組合在一起、對項目進(jìn)行編號以及使用標(biāo)題和提示文本。

三、隱喻

簡化視覺認(rèn)知,讓用戶能盡快“認(rèn)識”界面,圖形元素符合用戶對真實世界的聯(lián)想,更符合用戶對于界面的慣性認(rèn)知。

在 UI 設(shè)計中使用隱喻可以讓用戶在現(xiàn)實世界和數(shù)字體驗之間建立聯(lián)系。

好的隱喻會與用戶腦海中真實世界的過去體驗產(chǎn)生強烈的聯(lián)系。隱喻常用于使不熟悉的事物變得熟悉。

以桌面上的回收站為例,它包含已刪除的文件——但它不是真正的垃圾箱,它以一種可以幫助用戶更輕松地理解概念的方式進(jìn)行可視化表示。

在為 UI 選擇隱喻時,選擇能夠讓用戶掌握概念模型最精細(xì)細(xì)節(jié)的隱喻。

例如,在詢問用于支付處理的信用卡詳細(xì)信息時,可以參考現(xiàn)實世界的實體卡作為示例。

四、用戶控制

視覺設(shè)計要讓用戶感受到是用戶在控制界面,而不是被界面所控制。

1. 規(guī)則1:讓行動可逆

用戶應(yīng)該始終能夠快速回溯他們正在做的任何事情。這允許用戶探索產(chǎn)品而不必?fù)?dān)心失敗,當(dāng)用戶知道錯誤可以很容易地撤消時,這鼓勵了對不熟悉的選項的探索。

相反,如果用戶必須對他們采取的每一個動作都非常小心,這會導(dǎo)致探索速度變慢且令人不安。

當(dāng)用戶錯誤地選擇系統(tǒng)功能時,“撤消”會非常有用。在這種情況下,撤消功能用作“緊急出口”,允許用戶離開不需要的狀態(tài)。

例如,當(dāng)用戶意外刪除電子郵件時,Gmail 的通知消息帶有撤消選項。

2. 規(guī)則2:適應(yīng)不同水平的用戶

不同技能水平的用戶應(yīng)該能夠與不同水平的產(chǎn)品進(jìn)行交互。不要為了新手或臨時用戶的易于使用的界面而犧牲專家用戶。

相反,要嘗試針對不同用戶的需求進(jìn)行設(shè)計,因此,用戶是專家還是新手并不重要。

添加教程和解釋等功能對新手用戶非常有幫助。

一旦用戶熟悉了產(chǎn)品,用戶就會尋找快捷方式來加快常用操作的速度。

設(shè)計師應(yīng)該讓有經(jīng)驗的用戶使用快捷方式,從而為他們提供快速路徑。

 

作者:格格學(xué)姐

本文由 @空兩格 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來自 Pexels,基于CC0協(xié)議。

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

日歷

鏈接

個人資料

存檔