五十路熟妇高熟无码视频,无码簧片,亚洲大尺度无码无码专线,亚洲欧美日韩国产自偷,jizz无码在线观看视频,av色综合,99精品国产成人一区二区,亚洲粉嫩av一区二区黑人

首頁(yè)

好設(shè)計(jì)歷久彌新!蘭亭妙微UI設(shè)計(jì)公司聊聊那些百年未變的經(jīng)典產(chǎn)品設(shè)計(jì)

清陽(yáng) 用戶(hù)研究

一、全文速覽圖

image.png

“Good design is durable.” 迪特 · 拉姆斯的設(shè)計(jì)十誡提到,好的設(shè)計(jì)應(yīng)該是歷久彌新、不會(huì)輕易過(guò)時(shí)的。

在 20 世紀(jì),大多數(shù)日常用品都經(jīng)歷過(guò)顛覆式的變革、簡(jiǎn)化或技術(shù)迭代,比如電話(huà)、筆、黑膠唱片機(jī)等。然而有少數(shù)物品,它們已問(wèn)世超過(guò)百年,形態(tài)與結(jié)構(gòu)卻跟設(shè)計(jì)之初別無(wú)二致,且還能較好地滿(mǎn)足當(dāng)下的需要。這些產(chǎn)品是如何誕生的?為什么他們能在時(shí)間的長(zhǎng)河中維持恒定不變?蘭亭妙微UI設(shè)計(jì)公司與您一起來(lái)學(xué)習(xí)。

 

二、這些百年產(chǎn)品的誕生

1. QWERTY鍵盤(pán)布局  1874年

1941 年,世界上第一臺(tái)電子計(jì)算機(jī)誕生;1968 年,第一只鼠標(biāo)原型問(wèn)世。然而,與它們共同構(gòu)成人機(jī)交互基礎(chǔ)的 QWERTY 鍵盤(pán),其布局早在 1874 年就已獲得大規(guī)模應(yīng)用。

如今我們已有語(yǔ)音、觸摸屏、甚至是腦機(jī)接口等多種輸入方式,卻還是高度依賴(lài)著與 150 年前首批打字機(jī)外觀相似的鍵盤(pán)。

QWERTY鍵盤(pán)的發(fā)明

1868 年,肖爾斯(Christopher Latham Sholes)和他的同事們將他們的第一臺(tái)打字機(jī)運(yùn)往芝加哥,首位客戶(hù)是芝加哥波特電報(bào)學(xué)院的校長(zhǎng)愛(ài)德華(Edward Payson Porter)。這臺(tái)打字機(jī)有 28 個(gè)琴鍵式按鍵,外形似鋼琴,與波特學(xué)院使用的休斯·菲爾普斯印字電報(bào)機(jī)相似。其鍵盤(pán)按字母表順序排列:A 至 N 從左向右排布,O 至 Z 則從右向左延伸。

image.png

 

在會(huì)見(jiàn)了多名客戶(hù)后,根據(jù)反饋,肖爾斯與其同事對(duì)鍵盤(pán)的構(gòu)造與布局進(jìn)行了多次改進(jìn)。最終在 1872 年,《科學(xué)美國(guó)人》在頭版以大幅版畫(huà)形式報(bào)道了這臺(tái)打字機(jī),畫(huà)面中清晰展示了其鍵帽結(jié)構(gòu),此時(shí)的打字機(jī)已配備 42 個(gè)按鍵,包含大寫(xiě)字母、數(shù)字 2 至 9,以及連字符、逗號(hào)、句號(hào)、問(wèn)號(hào)等常用標(biāo)點(diǎn)符號(hào)。

image.png

 

1874 年,肖爾斯發(fā)明的打字機(jī)由槍械制造商雷明頓公司(E. Remington and Sons)推向市場(chǎng),并逐漸演變成為鍵盤(pán)的行業(yè)標(biāo)準(zhǔn)。其按鍵布局已與今天我們普遍使用的 QWERTY 鍵盤(pán)幾乎完全相同,是當(dāng)今世界上應(yīng)用最廣泛的鍵盤(pán)布局。盡管不同國(guó)家會(huì)因語(yǔ)言習(xí)慣在鍵位安排上做些微調(diào),但整體結(jié)構(gòu)仍遵循著這一經(jīng)典設(shè)計(jì)。

image.png

 

撲朔迷離的鍵盤(pán)布局起源

這其中耐人尋味的是,肖爾斯是如何想出這種鍵盤(pán)排列方式的。

因其印刷行業(yè)的背景及報(bào)紙出版商的經(jīng)歷,肖爾斯應(yīng)當(dāng)熟悉排字工根據(jù)使用頻率排列字盤(pán)的做法。有一種廣為流傳的理論認(rèn)為 QWERTY 鍵盤(pán)的布局是為了限制打字者的速度:其核心原則是將高頻使用的字母分隔開(kāi)(盡管像 E 和 R 仍被放在一起),以此減少打字時(shí)連動(dòng)桿的相互碰撞而導(dǎo)致的故障。換而言之,這是一種以暫時(shí)性的輸入效率,換取機(jī)械運(yùn)行的長(zhǎng)期可靠性的妥協(xié)。

然而,京都大學(xué)的研究人員³提出,QWERTY 鍵盤(pán)布局的誕生可能與早期核心用戶(hù)——電報(bào)員的工作習(xí)慣密切相關(guān)。研究中以 E、S 、Z 這三個(gè)字母在鍵盤(pán)上的布局為例來(lái)闡明這個(gè)觀點(diǎn)。

當(dāng)時(shí),美國(guó)電報(bào)員需要把聽(tīng)到的摩爾斯電碼實(shí)時(shí)轉(zhuǎn)譯成字母。在美國(guó)使用的電碼中,字母 Z 與常用組合 SE 的編碼恰好相同,均為“···  ·”(滴滴滴  滴)。當(dāng)聽(tīng)到這樣的電碼序列,尤其是在缺乏上下文的單詞的開(kāi)頭時(shí),接收者無(wú)法立即判斷是 Z 還是 SE,只能根據(jù)后續(xù)聽(tīng)到的電碼來(lái)綜合判斷。這種不確定性會(huì)嚴(yán)重影響輸入效率:在傳統(tǒng)的 A-Z 順序鍵盤(pán)上,若電報(bào)員開(kāi)始輸入 Z,之后發(fā)現(xiàn)應(yīng)為 SE,手指就不得不在相距較遠(yuǎn)的鍵位之間移動(dòng)并修改。

而 QWERTY 鍵盤(pán)布局的調(diào)整是,把 Z、SE 這兩組容易引起混淆的字母安排在了彼此相鄰的位置。這樣一來(lái),即使電報(bào)員在聽(tīng)到“滴滴滴  滴”時(shí)無(wú)法立刻判斷,手指也能在緊鄰的區(qū)域中快速選擇或更正,而不必在全鍵盤(pán)上尋找。或許正是這類(lèi)針對(duì)電報(bào)場(chǎng)景的優(yōu)化,最終塑造了我們今天所熟知的 QWERTY 鍵盤(pán)格局。

image.png

 

雖然原因至今尚無(wú)定論,且無(wú)論是為了避免機(jī)械故障還是適配摩爾斯電碼的輸入習(xí)慣,都跟當(dāng)下的使用場(chǎng)景有所不同,但至今為止也沒(méi)有任何一種其他布局方式來(lái)取代它。

2. 回形針 1901年

19 世紀(jì),木漿制漿技術(shù)與工業(yè)造紙廠的出現(xiàn)讓廉價(jià)紙張得以廣泛流通。面對(duì)隨之產(chǎn)生的大量零散紙張,人們開(kāi)始使用手邊常見(jiàn)的別針來(lái)加以固定——這被視為回形針的前身。盡管別針價(jià)格低廉、使用方便且用后即棄,但其缺點(diǎn)也十分明顯:不僅容易生銹,還會(huì)刺穿紙張,留下難看的銹跡與孔洞。

image.png

 

最早的回形針專(zhuān)利記錄來(lái)自挪威人約翰·瓦勒(Johan Vaaler),他在 1901 年提交了申請(qǐng)。專(zhuān)利摘要中寫(xiě)道,這是一種“由彈簧材料彎曲成矩形、三角形或其他形狀的環(huán),金屬絲兩端形成并排且方向相反的部件或舌片”。相比別針,回形針不需要通過(guò)刺穿紙面來(lái)固定紙張,并排的金屬絲結(jié)構(gòu)也提供了更多的固定方式。

image.png

 

1899 年,威廉·米德?tīng)柌剪斂耍╓illiam D. Middlebrook)獲得了回形針制造機(jī)械的設(shè)計(jì)專(zhuān)利,隨后他將專(zhuān)利賣(mài)給了一家辦公用品制造商,該公司將其注冊(cè)為“寶石回形針”(Gem clip)。其有著標(biāo)志性的雙橢圓形環(huán)圈設(shè)計(jì),通常采用鍍鎳或彩色塑料包裹的材質(zhì),不僅有效防銹,也兼顧外觀的美感。

相比約翰·瓦勒的設(shè)計(jì),寶石回形針將紙張與回形針接觸的位置處理得更圓潤(rùn),減少了刺破紙張的風(fēng)險(xiǎn)。螺旋狀的鋼絲具有一定的柔韌性,可輕松張開(kāi)以便放入紙張,同時(shí)又有足夠的彈性來(lái)夾緊文件。

image.png

幾年后,喬治·W·麥吉爾(George W McGill)對(duì)寶石回形針做出了改良,進(jìn)一步增大了內(nèi)環(huán)的弧度,使其更明顯地上翹。相比初代寶石回形針平緩的環(huán)圈末端,這種上揚(yáng)的開(kāi)口形成了更清晰的“示能”——直觀地提示用戶(hù)“此處可拉開(kāi)并插入紙張”。在結(jié)構(gòu)上,它也實(shí)現(xiàn)了更省力的開(kāi)合體驗(yàn)。正是這一改良版本,逐漸演變成了今天最常見(jiàn)、最廣泛使用的回形針。

image.png

 

回形針作為“固定文件”的工具這一認(rèn)知,也自然而然地從現(xiàn)實(shí)世界延伸到了數(shù)字世界。在圖形用戶(hù)界面中,當(dāng)我們想要將文件添加至郵件或文檔時(shí),常常能看到那枚熟悉的回形針圖標(biāo)。

image.png

 

3. 螺旋蚊香 1902年

中國(guó)最早的蚊香可追溯至宋代,一本記錄民間生產(chǎn)技術(shù)的古籍《格物粗談》中記載:“端午時(shí),收貯浮萍,陰干,加雄黃,作紙纏香,燒之,能祛蚊蟲(chóng)”。這段記載中所述的制品可視為早期形態(tài)的“蚊香”,其外形類(lèi)似于帶芯的線香。換而言之,最初的蚊香是直的。

蚊香的螺旋形演變可以追溯到 19 世紀(jì)末的日本。當(dāng)時(shí),人們將除蟲(chóng)菊粉與鋸末混合燃燒用于驅(qū)蚊。日本企業(yè)家上山英一郎(うえやま えいいちろう)生產(chǎn)了一種混合了淀粉和除蟲(chóng)菊的香,雖然驅(qū)蚊效果良好,但存在明顯缺陷:不僅燃燒時(shí)間短,不到四十分鐘便燃盡,而且與普通線香一樣質(zhì)地較脆,遇風(fēng)易折。

image.png

 

1895 年,上山英一郎正致力于尋找延長(zhǎng)蚊香燃燒時(shí)間的方法。期間,他的妻子在倉(cāng)庫(kù)中偶然看見(jiàn)一條盤(pán)踞的蛇,由此獲得靈感,建議他將蚊香制成螺旋形狀。這一設(shè)計(jì)在工程上極為巧妙:螺旋結(jié)構(gòu)以最小的面積延展了蚊香長(zhǎng)度(相比線狀蚊香延長(zhǎng)約 4 倍),也設(shè)置了一個(gè)單點(diǎn)、穩(wěn)定、緩慢的燃燒路徑,讓蚊香既不會(huì)熄滅也不會(huì)因?yàn)橄銞l過(guò)寬而燃燒太快。1902 年,可持續(xù)燃燒約七小時(shí)的螺旋狀蚊香問(wèn)世,并被命名為“金鳥(niǎo)蚊香”,其有著標(biāo)志性的深綠色外觀與印有紅色公雞頭的包裝設(shè)計(jì)

如今我們使用的螺旋盤(pán)香,基本都是采用了這個(gè)結(jié)構(gòu),在保證單盤(pán)燃燒時(shí)間 7-8 小時(shí)的前提下,既能節(jié)省包裝空間,又能在運(yùn)輸中互相支撐,防止斷裂。

image.png

 

4. 拉鏈  1911年

在拉鏈發(fā)明之前,人們用以拉緊衣物的工具繁多,包括系帶、紐扣、別針、搭扣、腰帶與松緊帶等。紐扣是其中歷史最久、使用最廣的一種,但其使用效率較低,解開(kāi)與扣上均需時(shí)間,且在耐用性上存在不足,時(shí)有脫落之虞。

image.png

 

19 世紀(jì)末,在追求“效率”的工業(yè)時(shí)代背景下,拉鏈應(yīng)運(yùn)而生。發(fā)明家惠特科姆(Whitcomb Judson)想解決傳統(tǒng)的系帶式高幫靴穿脫過(guò)于繁瑣這個(gè)問(wèn)題,在芝加哥世界博覽會(huì)上展示了名為鉤鎖(clasp locker)的裝置,它的核心目標(biāo)很明確:用一次滑動(dòng),替代逐個(gè)系扣的繁瑣過(guò)程,節(jié)省時(shí)間。但當(dāng)時(shí)這種拉鏈依賴(lài)手工制作,成本較高,且質(zhì)量不夠穩(wěn)定,最終因?yàn)榻Y(jié)構(gòu)缺陷及成本問(wèn)題退出了市場(chǎng)。

image.png

 

1912 年,森貝克(Gideon Sundback)取得了突破性進(jìn)展,他將惠特科姆發(fā)明的易崩開(kāi)的鉤環(huán)結(jié)構(gòu)改成了穩(wěn)定咬合的齒牙結(jié)構(gòu),實(shí)現(xiàn)凹凸完全咬合,使拉鏈閉合更牢固,開(kāi)合也更加順滑流暢。一百多年過(guò)去,如今金屬拉鏈仍然在沿用這種工藝制造。

image.png

 

1923 年,百路馳(B.F. Goodrich)公司將森貝克設(shè)計(jì)的拉鏈用于一款女式橡膠靴,因其開(kāi)合時(shí)會(huì)發(fā)出“滋滋”的摩擦聲,公司便形象地將其命名為 “ZIPPER”。這個(gè)朗朗上口的名字隨后逐漸被大眾廣泛采用,“拉鏈”也因此得名并沿用至今。

拉鏈與紐扣的爭(zhēng)端

在時(shí)尚界,關(guān)于在服裝上用拉鏈或是紐扣還引起過(guò)一場(chǎng)關(guān)乎功能、形式甚至是倫理上的論戰(zhàn)。

從效率上而言,拉鏈無(wú)疑更勝一籌,其便利性也更符合我們現(xiàn)代快節(jié)奏生活的需要。紐扣的使用需要一定的技巧,而且會(huì)增加衣物的厚度,對(duì)于如今流行的緊身牛仔褲來(lái)說(shuō),紐扣可能使面料更容易鼓起或撕裂;而拉鏈則能通過(guò)“收緊并向上拉”的方式來(lái)解決這個(gè)問(wèn)題。

但是,拉鏈更容易損壞和卡住,更難修理。它們也存在一定的安全隱患:在戰(zhàn)場(chǎng)上,軍服就曾發(fā)生過(guò)因拉鏈卡死耽誤急救而導(dǎo)致傷亡的事件;反之,紐扣在意外拉扯下更易整體脫落而非卡死。

紐扣的另一個(gè)好處在于美觀:隨著時(shí)間的推移,紐扣與衣服的摩擦?xí)纬瑟?dú)特的色落與磨損痕跡,對(duì)于牛仔愛(ài)好者來(lái)說(shuō)是一個(gè)理想的特性。

還有一部分來(lái)自復(fù)古派的道德質(zhì)疑,批評(píng)者稱(chēng)拉鏈簡(jiǎn)化衣物穿脫的特性會(huì)助長(zhǎng)輕率行為,敗壞社會(huì)風(fēng)氣。因此,盡管拉鏈技術(shù)早已成熟,直到 1947 年李維斯才將其應(yīng)用于牛仔褲上。

最終在 1937 年,拉鏈在這場(chǎng)論戰(zhàn)中擊敗紐扣,鞏固了其在服裝設(shè)計(jì)中的地位。如今,這個(gè)一百多年前的發(fā)明無(wú)處不在,被廣泛應(yīng)用于服裝、行李箱和無(wú)數(shù)其他物品中,YKK(全球市場(chǎng)份額第一的拉鏈制造商)每年生產(chǎn)的拉鏈足以繞地球 50 圈。

三、何以百年不變

面對(duì)技術(shù)的百年巨變,為何這些產(chǎn)品能不被淘汰,甚至其基本形態(tài)都與百年前最初發(fā)明時(shí)大體相同?值得肯定的是,他們的設(shè)計(jì)的確超越了同期其他產(chǎn)品,呈現(xiàn)出一些寶貴的特質(zhì)。

簡(jiǎn)單精妙的結(jié)構(gòu)

例如經(jīng)典的寶石回形針,其雙橢圓形結(jié)構(gòu)在同期的其他設(shè)計(jì)中脫穎而出,以簡(jiǎn)潔優(yōu)雅的形態(tài)高效實(shí)現(xiàn)了“不傷紙”這一核心需求;而螺旋形的蚊香設(shè)計(jì),既延長(zhǎng)了燃燒時(shí)間,又通過(guò)嚴(yán)絲合縫的嵌套,兼顧了節(jié)省包裝空間和運(yùn)輸穩(wěn)固性。

image.png

 

易用性

拉鏈和回形針是典型的無(wú)意識(shí)設(shè)計(jì),它們形態(tài)與功能高度統(tǒng)一、無(wú)需學(xué)習(xí)曲線。即使是年幼的孩童,也能憑直覺(jué)學(xué)會(huì)使用拉鏈:20 世紀(jì) 30 年代拉鏈推廣初期,拉鏈款童裝就常常以“幫助幼兒學(xué)會(huì)自己穿衣,培養(yǎng)自理能力”作為賣(mài)點(diǎn)。

易工業(yè)化、標(biāo)準(zhǔn)化

回形針只需彎曲三次并剪斷即可制成,易于自動(dòng)化生產(chǎn);螺旋形蚊香可通過(guò)鋼制模具一次沖壓成型,一臺(tái)機(jī)器每分鐘可生產(chǎn)數(shù)百盤(pán)蚊香,整個(gè)過(guò)程可高度標(biāo)準(zhǔn)化。規(guī)模化生產(chǎn)有效降低了成本,使其在市場(chǎng)上更容易取得價(jià)格優(yōu)勢(shì),進(jìn)而推動(dòng)廣泛普及。

然而,歷經(jīng)百年技術(shù)發(fā)展與社會(huì)變遷,新生需求與問(wèn)題層出不窮。這些經(jīng)典產(chǎn)品,是否真的一如誕生之初那般,顯得全然不過(guò)時(shí)?或許,讓它們保持不變的還有更深層的原因。

四、已是最優(yōu)解,還是懶于改變?

去年 11 月的香港大埔火災(zāi)事故造成了重大人員傷亡,令人痛心。在對(duì)這場(chǎng)事故的追責(zé)中,首當(dāng)其沖地便是香港建筑行業(yè)的竹棚工程。許多人指出,竹材燃點(diǎn)僅為 265°C,遠(yuǎn)低于鋼材,可能加劇火勢(shì)蔓延。此外,竹棚的結(jié)構(gòu)強(qiáng)度也相對(duì)不足——過(guò)去香港曾多次發(fā)生棚架坍塌事故。以香港的經(jīng)濟(jì)發(fā)展水平,完全有能力推動(dòng)行業(yè)向鋼材升級(jí)。但網(wǎng)絡(luò)上仍有許多支持者聲稱(chēng):竹棚搭建技藝自清朝便出現(xiàn)在香港,已有上百年歷史,具有文化傳承價(jià)值‌,也是長(zhǎng)久以來(lái)的行業(yè)慣例。

image.png

 

同樣的,歷史上也有其他證據(jù)表明 QWERTY 鍵盤(pán)并非最佳的鍵盤(pán)布局,比如美國(guó)心理學(xué)家發(fā)明的德沃拉克鍵盤(pán)布局(Dvorak keyboard layout):這一布局基于字母使用頻率和手的生理結(jié)構(gòu)設(shè)計(jì),擁有打字更快、更易學(xué)習(xí)和降低疲勞的特點(diǎn)。二戰(zhàn)時(shí)一項(xiàng)研究表明,德沃拉克布局的打字員速度要比 QWERTY 布局打字員快 74%。即使是 QWERTY 鍵盤(pán)的發(fā)明人——肖爾斯本人也沒(méi)那么篤定:盡管他很早就將設(shè)計(jì)賣(mài)給了雷明頓公司,但他終其一生都在不斷改進(jìn)布局,并創(chuàng)造出各種替代方案,在他去世的前一年,他還為自己的 XPMCH 鍵盤(pán)申請(qǐng)了專(zhuān)利。

image.png

 

螺旋蚊香的使用體驗(yàn)也沒(méi)那么理想:其嵌套結(jié)構(gòu)導(dǎo)致在拆分時(shí)比較困難,一不小心可能直接掰斷,且必須依賴(lài)專(zhuān)用底座才能使用。這本質(zhì)上是一種便利工業(yè)化生產(chǎn)而非優(yōu)化用戶(hù)體驗(yàn)的設(shè)計(jì)。然而,即使有了電蚊香這種更方便、健康、安全的替代品,螺旋蚊香仍憑借低廉的成本、成熟的產(chǎn)業(yè)鏈以及簡(jiǎn)易的倉(cāng)儲(chǔ)運(yùn)輸要求,在市場(chǎng)中占據(jù)著一席之地。

在歷史較短的互聯(lián)網(wǎng)領(lǐng)域也有類(lèi)似的案例——比如搜索引擎結(jié)果頁(yè)的布局與交互模式。自 2000 年代初谷歌確立“頂部搜索框 + 藍(lán)色鏈接標(biāo)題 + 簡(jiǎn)短摘要”的模式以來(lái),其核心框架在近二十年間保持高度一致,并成為行業(yè)標(biāo)準(zhǔn),不管是在網(wǎng)頁(yè)端還是移動(dòng)端。然而在移動(dòng)端上,固定于屏幕頂部的輸入框常位于手指的自然操作范圍之外,用戶(hù)需特意伸展才能觸及,體驗(yàn)不夠便捷。而“標(biāo)題用藍(lán)色表示超鏈接” 這個(gè)設(shè)計(jì)也稍顯過(guò)時(shí),在用戶(hù)已基本認(rèn)知“搜索結(jié)果標(biāo)題可點(diǎn)擊”的今天,整屏的藍(lán)色可能帶來(lái)不必要的視覺(jué)干擾,增加閱讀負(fù)擔(dān)。

回望這些產(chǎn)品或設(shè)計(jì),其“不變”與其說(shuō)是源于解決問(wèn)題的完美,不如說(shuō)是因?yàn)樗鼈冊(cè)缭绱_立了“行業(yè)標(biāo)準(zhǔn)”,獲得了先發(fā)優(yōu)勢(shì),培養(yǎng)了牢固的用戶(hù)習(xí)慣,進(jìn)而形成了強(qiáng)大的路徑依賴(lài)。一旦從用戶(hù)到產(chǎn)業(yè)鏈的“慣性”形成,任何改變都將面臨難以估量的轉(zhuǎn)換成本。正因如此,即便它們存在一定的缺陷,市場(chǎng)往往也會(huì)接受,畢竟這是性?xún)r(jià)比相對(duì)較高的策略。

總結(jié)

一些產(chǎn)品能歷經(jīng)百年而保持不變,固然有其設(shè)計(jì)上的優(yōu)越性,但更值得深思的是不變的背后隱藏著的路徑依賴(lài)與行業(yè)慣性的強(qiáng)大力量。百年的不變或許只是暫時(shí)的,可能是顛覆性的技術(shù)尚未誕生,或是缺少一個(gè)推動(dòng)行業(yè)變革的契機(jī)。

歸根結(jié)底,設(shè)計(jì)無(wú)法時(shí)刻去尋求那個(gè)完美的終極方案,而是在多重約束條件下尋找平衡——既要權(quán)衡用戶(hù)習(xí)慣與使用體驗(yàn),又要兼顧商業(yè)成本、行業(yè)發(fā)展情況與規(guī)模化需求,甚至還要回應(yīng)文化傳承與社會(huì)倫理的爭(zhēng)議。同時(shí),作為設(shè)計(jì)師也需要保持對(duì)行業(yè)規(guī)范與慣例的審視與批判意識(shí),警惕將“長(zhǎng)期不變”等同于“無(wú)可優(yōu)化”,在考慮用戶(hù)習(xí)慣轉(zhuǎn)換成本的前提下,積極探索更適配當(dāng)下需求的創(chuàng)新方案。

轉(zhuǎn)載:優(yōu)設(shè)

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.wtxcl.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶(hù)體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢(xún)高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。

 

image.png

蘭亭妙微UI設(shè)計(jì)公司:超全面的B端設(shè)計(jì)指南:樹(shù)形選擇

清陽(yáng) 設(shè)計(jì)思維

在 B 端系統(tǒng)的選擇錄入場(chǎng)景里,樹(shù)形選擇是承載層級(jí)化數(shù)據(jù)的核心組件,常用于組織架構(gòu)、權(quán)限分配、分類(lèi)篩選等場(chǎng)景。這篇指南從基礎(chǔ)概念、結(jié)構(gòu)組成、類(lèi)型差異、設(shè)計(jì)要點(diǎn)到常見(jiàn)誤區(qū),完整梳理樹(shù)形選擇的設(shè)計(jì)邏輯,蘭亭妙微ui設(shè)計(jì)公司幫你高效落地合規(guī)、易用的樹(shù)形組件。
 

一、先搞懂:樹(shù)狀結(jié)構(gòu)的核心概念

 
樹(shù)狀結(jié)構(gòu)是倒置的層級(jí)化數(shù)據(jù)表達(dá)形式,頂端為根、向下延伸分支與葉子,清晰呈現(xiàn)數(shù)據(jù)的從屬、并列關(guān)系,是 B 端結(jié)構(gòu)化信息展示的最優(yōu)解之一。

image.png

1. 核心節(jié)點(diǎn)定義

 
  • 根節(jié)點(diǎn):樹(shù)的唯一起點(diǎn),樹(shù)形選擇中常隱藏,以標(biāo)題 / 選項(xiàng)文本替代,避免視覺(jué)冗余。
  • 子節(jié)點(diǎn):根節(jié)點(diǎn)以下的所有節(jié)點(diǎn),無(wú)數(shù)量限制,是樹(shù)形選擇的核心展示內(nèi)容。
  • 葉節(jié)點(diǎn):無(wú)下級(jí)子節(jié)點(diǎn)的末端節(jié)點(diǎn),是傳統(tǒng)單選樹(shù)的唯一可選對(duì)象。
  • 分支:節(jié)點(diǎn)間的連接關(guān)系,可通過(guò)線條顯隱強(qiáng)化層級(jí)感知。
 

2. 關(guān)鍵屬性

image.png

  • 節(jié)點(diǎn)層級(jí):根節(jié)點(diǎn)為 1 級(jí),向下依次遞增,直觀區(qū)分?jǐn)?shù)據(jù)隸屬關(guān)系。
  • 節(jié)點(diǎn)高度:當(dāng)前節(jié)點(diǎn)到最底層葉節(jié)點(diǎn)的層級(jí)數(shù)量。
  • 節(jié)點(diǎn)深度:當(dāng)前節(jié)點(diǎn)到根節(jié)點(diǎn)的路徑長(zhǎng)度,與層級(jí)概念相近。
 
日常場(chǎng)景中,字典檢索、省市縣地址、公司組織架構(gòu)、課程分類(lèi),都是典型的樹(shù)狀結(jié)構(gòu)應(yīng)用,核心價(jià)值是快速定位、結(jié)構(gòu)化管理、高效增刪改查
 

二、樹(shù)形選擇的基礎(chǔ)組成

 
樹(shù)形選擇的結(jié)構(gòu)設(shè)計(jì)直接影響操作效率,核心由 4 部分構(gòu)成,每部分都有明確的設(shè)計(jì)規(guī)范:
 

1. 層級(jí)縮進(jìn)

 
統(tǒng)一用8px作為下級(jí)節(jié)點(diǎn)的縮進(jìn)基準(zhǔn),清晰區(qū)分層級(jí);
 
數(shù)據(jù)量大、層級(jí)復(fù)雜時(shí),搭配分支線條強(qiáng)化結(jié)構(gòu),避免視覺(jué)混亂。
 

2. 折疊圖標(biāo)

 
分為兩種樣式,適配不同層級(jí)場(chǎng)景:
 
  • 三角折疊:適合層級(jí)≤3 級(jí)的簡(jiǎn)單場(chǎng)景,輕量化、易理解。
  • 方形折疊:搭配分支線條使用,適合 4 級(jí)及以上的多層級(jí)場(chǎng)景,層級(jí)辨識(shí)度更高。

image.png

3. 選擇控件

 
分單選、多選兩類(lèi),遵循「簡(jiǎn)化操作、明確狀態(tài)」原則:
 
  • 單選:默認(rèn)隱藏控件,以整個(gè)選項(xiàng)文本為熱區(qū),點(diǎn)擊即選中。
  • 多選:必顯復(fù)選框,置于折疊圖標(biāo)左側(cè),預(yù)留后續(xù)功能拓展空間(新增、刪除、拖拽等),同時(shí)降低前端開(kāi)發(fā)成本、減少 BUG。
 

4. 選項(xiàng)文本

 
控制字符長(zhǎng)度,超長(zhǎng)文本用省略號(hào)截?cái)?/strong>,hover 時(shí)展示完整內(nèi)容,保證界面整潔。
 

三、樹(shù)形選擇的三大類(lèi)型(核心差異)

 
樹(shù)形選擇按交互邏輯分為三類(lèi),單選節(jié)點(diǎn)樹(shù)、多選節(jié)點(diǎn)樹(shù)為主流,傳統(tǒng)單選樹(shù)已極少使用
 

1. 單選樹(shù)(淘汰型)

 
僅支持選擇葉節(jié)點(diǎn),需逐層展開(kāi)才能操作,選擇熱區(qū)小、理解成本高、效率低,僅適用于極特殊的定制場(chǎng)景,不推薦通用設(shè)計(jì)使用。
 

2. 單選節(jié)點(diǎn)樹(shù)(主流)

 
支持選擇任意子節(jié)點(diǎn),選中即代表該節(jié)點(diǎn)及下級(jí)所有數(shù)據(jù),大幅提升效率;
 
交互拆分為兩個(gè)獨(dú)立熱區(qū):

image.png

  • 左側(cè):折疊圖標(biāo),僅控制展開(kāi) / 收起。
  • 右側(cè):整個(gè)選項(xiàng)區(qū)域,點(diǎn)擊即選中當(dāng)前節(jié)點(diǎn)。
     
    ?? 必須添加 hover 狀態(tài),通過(guò)光標(biāo)變化提示可點(diǎn)擊,降低操作認(rèn)知成本。
 

3. 多選節(jié)點(diǎn)樹(shù)(最常用)

 
在單選節(jié)點(diǎn)樹(shù)基礎(chǔ)上增加復(fù)選框,支持批量選擇多個(gè)節(jié)點(diǎn) / 分支;
 
理論上的「多選樹(shù)」(僅選葉節(jié)點(diǎn))無(wú)實(shí)際業(yè)務(wù)價(jià)值,完全可被多選節(jié)點(diǎn)樹(shù)替代;
 
?? 動(dòng)態(tài)數(shù)據(jù)場(chǎng)景慎用:如「部門(mén)權(quán)限自動(dòng)同步新員工」這類(lèi)動(dòng)態(tài)關(guān)聯(lián)需求,樹(shù)形選擇無(wú)法清晰傳遞邏輯,需單獨(dú)做關(guān)聯(lián)配置,避免用戶(hù)誤解。
 

四、樹(shù)形選擇的核心優(yōu)勢(shì)

 
  1. 易理解:樹(shù)狀結(jié)構(gòu)認(rèn)知成本低,用戶(hù)無(wú)需學(xué)習(xí)即可快速上手。
  2. 快瀏覽:大數(shù)據(jù)量下,可按層級(jí)快速篩選,比普通下拉選擇效率更高。
  3. 顯結(jié)構(gòu):清晰呈現(xiàn)數(shù)據(jù)層級(jí)關(guān)系,幫助用戶(hù)快速理解業(yè)務(wù)框架。
 

五、設(shè)計(jì)必避:3 大常見(jiàn)誤區(qū)

 

1. 忽視數(shù)據(jù)量承載

 
數(shù)據(jù)量過(guò)大時(shí),必須做異步加載、分頁(yè)、搜索篩選,避免一次性渲染導(dǎo)致卡頓,同時(shí)優(yōu)化滾動(dòng)體驗(yàn)。
 

2. 全選功能設(shè)計(jì)草率

 
大數(shù)據(jù)量場(chǎng)景下,全選需增加 **「半選」?fàn)顟B(tài) **(僅選中部分子節(jié)點(diǎn)),并明確提示選中數(shù)量,避免用戶(hù)誤操作。
 

3. 缺失鍵盤(pán)交互映射

 
B 端高效操作需支持鍵盤(pán)快捷鍵,規(guī)范如下:
 
  • ↑:切換上一同級(jí)節(jié)點(diǎn),從子節(jié)點(diǎn)返回父節(jié)點(diǎn)。
  • ↓:切換下一同級(jí)節(jié)點(diǎn),進(jìn)入已展開(kāi)的首個(gè)子節(jié)點(diǎn)。
  • ←:關(guān)閉當(dāng)前節(jié)點(diǎn),返回父節(jié)點(diǎn)。
  • →:展開(kāi)子節(jié)點(diǎn),進(jìn)入首個(gè)子節(jié)點(diǎn)。
  • 回車(chē):確認(rèn)選中當(dāng)前聚焦節(jié)點(diǎn)。
 

六、總結(jié)

 
樹(shù)形選擇是 B 端層級(jí)數(shù)據(jù)選擇的最優(yōu)組件,設(shè)計(jì)核心是簡(jiǎn)化層級(jí)認(rèn)知、拆分操作熱區(qū)、適配業(yè)務(wù)場(chǎng)景:優(yōu)先用單選 / 多選節(jié)點(diǎn)樹(shù),放棄傳統(tǒng)單選樹(shù);多層級(jí)加分支線條,大數(shù)據(jù)量加異步加載,同時(shí)補(bǔ)齊鍵盤(pán)交互,最終實(shí)現(xiàn)「易看、易點(diǎn)、易懂、高效」的使用體驗(yàn)。
 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.wtxcl.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶(hù)體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢(xún)高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。

 

image.png

蘭亭妙微逐圖解析移動(dòng)端APP多場(chǎng)景 UI/UX 設(shè)計(jì)案例

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

這組圖片覆蓋了區(qū)塊鏈工具、心理健康、B 端營(yíng)銷(xiāo)、項(xiàng)目管理、銷(xiāo)售數(shù)據(jù)、健康飲食六大不同賽道的產(chǎn)品界面,我們逐一拆解設(shè)計(jì)亮點(diǎn)與核心邏輯:

圖 1:區(qū)塊鏈域名注冊(cè)流程界面

這是 Web3 領(lǐng)域的域名注冊(cè)操作流界面,核心亮點(diǎn)是流程可視化 + 風(fēng)險(xiǎn)提示清晰:
  • 用步驟條(Commit → 等待 60 秒 → 二次交易)完整展示注冊(cè)全流程,每一步都標(biāo)注操作說(shuō)明,讓用戶(hù)清晰掌握進(jìn)度;
  • 用綠色對(duì)勾、進(jìn)度條實(shí)時(shí)反饋操作狀態(tài),同時(shí)明確展示 Gas 費(fèi)、注冊(cè)費(fèi)用等關(guān)鍵數(shù)據(jù),避免用戶(hù)踩坑;
  • 倒計(jì)時(shí)設(shè)計(jì)既符合區(qū)塊鏈防搶注的技術(shù)邏輯,又通過(guò)可視化倒計(jì)時(shí)讓用戶(hù)直觀感知等待時(shí)長(zhǎng),降低操作焦慮。

圖 2:Mindro 心理健康 App 界面

這是面向 C 端用戶(hù)的心理健康管理工具,設(shè)計(jì)核心是情緒可視化 + 陪伴感營(yíng)造:
  • 以柔和的淡紫漸變?yōu)榈咨钆?3D 大腦視覺(jué)元素,弱化工具的冰冷感,傳遞溫暖、舒緩的情緒氛圍;
  • 核心數(shù)據(jù)(目標(biāo)進(jìn)度 65%、壓力水平 70%)以卡片形式突出展示,用直觀的數(shù)字讓用戶(hù)快速掌握自身狀態(tài);
  • 問(wèn)候語(yǔ) Hello, Sara How are you feeling today? 強(qiáng)化陪伴感,貼合心理健康產(chǎn)品 情緒關(guān)懷 的核心定位。

圖 3:AdvisorWorld 金融營(yíng)銷(xiāo) B 端平臺(tái)界面

這是面向金融顧問(wèn)的獲客營(yíng)銷(xiāo)平臺(tái),設(shè)計(jì)核心是轉(zhuǎn)化導(dǎo)向 + 信息高效傳遞:
  • 用高飽和藍(lán)、綠為主色調(diào),強(qiáng)化專(zhuān)業(yè)感與信任感,同時(shí)用大尺寸 CTA 按鈕(Start Getting Leads、Book a Call)引導(dǎo)轉(zhuǎn)化;
  • 模塊化布局清晰劃分客戶(hù)證言、核心價(jià)值、數(shù)據(jù)指標(biāo)、資源入口等模塊,讓金融顧問(wèn)快速獲取核心信息;
  • 用數(shù)據(jù)(轉(zhuǎn)化率 + 35%、客單價(jià) + 25%)強(qiáng)化產(chǎn)品價(jià)值,搭配真實(shí)客戶(hù)案例,提升 B 端用戶(hù)的信任度,促進(jìn)轉(zhuǎn)化。

圖 4:RelationHub 項(xiàng)目管理 App 界面

這是面向團(tuán)隊(duì)的項(xiàng)目協(xié)作工具,設(shè)計(jì)核心是數(shù)據(jù)聚合 + 高效管理:
  • 首頁(yè)聚合活躍項(xiàng)目數(shù)、待處理項(xiàng)目、團(tuán)隊(duì)成員、客戶(hù)線索等核心數(shù)據(jù),讓管理者一眼掌握項(xiàng)目全局;
  • 用標(biāo)簽篩選(Branding、Website、UI/UX)快速分類(lèi)線索,搭配客戶(hù)信息、金額、時(shí)間等明細(xì),提升管理效率;
  • 用正負(fù)百分比展示項(xiàng)目環(huán)比變化,直觀呈現(xiàn)業(yè)務(wù)增長(zhǎng) 下滑趨勢(shì),幫助團(tuán)隊(duì)快速?zèng)Q策。

圖 5:銷(xiāo)售數(shù)據(jù)管理 App 界面

這是面向銷(xiāo)售團(tuán)隊(duì)的業(yè)績(jī)管理工具,設(shè)計(jì)核心是數(shù)據(jù)可視化 + 多端協(xié)同:
  • 用深色模式 + 高對(duì)比度圖表,清晰展示銷(xiāo)售額、收入、訂單等核心數(shù)據(jù),折線圖、柱狀圖直觀呈現(xiàn)業(yè)績(jī)趨勢(shì);
  • 分屏展示個(gè)人業(yè)績(jī)與團(tuán)隊(duì)業(yè)績(jī),滿(mǎn)足銷(xiāo)售個(gè)人復(fù)盤(pán)與團(tuán)隊(duì)管理的雙重需求;
  • 底部導(dǎo)航欄(Home、Orders、Analytics、Profile)簡(jiǎn)化操作路徑,讓銷(xiāo)售隨時(shí)查看業(yè)績(jī),適配移動(dòng)辦公場(chǎng)景。

圖 6:FitBite 健康飲食 App 界面

這是面向 C 端用戶(hù)的飲食健康管理工具,設(shè)計(jì)核心是場(chǎng)景化引導(dǎo) + 數(shù)據(jù)激勵(lì):
  • 啟動(dòng)頁(yè)用新鮮食材視覺(jué)元素,搭配 Your Daily Guide to Smarter Eating 的 slogan,傳遞健康飲食的產(chǎn)品定位;
  • 首頁(yè)聚合周進(jìn)度、步數(shù)、飲水量、三餐熱量等核心數(shù)據(jù),用環(huán)形進(jìn)度條直觀展示完成情況,強(qiáng)化正向激勵(lì);
  • 底部導(dǎo)航欄(Home、Progress、Rewards、Menu)清晰劃分功能,用綠色主色調(diào)傳遞健康、活力的氛圍,貼合產(chǎn)品屬性。

補(bǔ)充:蘭亭妙微實(shí)踐延伸

蘭亭妙微深耕全賽道 UI/UX 設(shè)計(jì),無(wú)論是區(qū)塊鏈、心理健康等 C 端產(chǎn)品,還是金融營(yíng)銷(xiāo)、項(xiàng)目管理等 B 端工具,都能基于用戶(hù)場(chǎng)景打造專(zhuān)業(yè)、易用的界面設(shè)計(jì)。如果您有各類(lèi)產(chǎn)品的 UI/UX 設(shè)計(jì)、改版需求,歡迎與蘭亭妙微對(duì)接。

設(shè)計(jì)如何為用戶(hù)「節(jié)省時(shí)間」?蘭亭妙微UI設(shè)計(jì)公司總結(jié)了這 5 個(gè)高效方法

清陽(yáng) 設(shè)計(jì)思維

在交互設(shè)計(jì)里,幫用戶(hù)省時(shí)間是提升體驗(yàn)與留存的核心邏輯。好的設(shè)計(jì)不是讓用戶(hù)多操作,而是用最少步驟、最低成本完成目標(biāo)。結(jié)合主流產(chǎn)品實(shí)戰(zhàn)案例,蘭亭妙微ui設(shè)計(jì)公司,整理出 5 個(gè)最實(shí)用的省時(shí)設(shè)計(jì)方法,直接可落地。

一、高效信息抓取:讓系統(tǒng)替用戶(hù) “讀” 與 “填”

 

主動(dòng)抓取關(guān)鍵信息,減少用戶(hù)手動(dòng)查找、輸入、核對(duì)的成本。
 
  • 釘釘代辦:自動(dòng)識(shí)別文本中的時(shí)間,一鍵完成日程設(shè)置

    image.png

  • 微信圖片文字識(shí)別:指尖滑動(dòng)即可選中、復(fù)制、轉(zhuǎn)發(fā),告別手動(dòng)打字

    image.png

  • 閑魚(yú) × 淘寶:訂單數(shù)據(jù)互通,一鍵同步已購(gòu)商品,自動(dòng)給出估價(jià)

    image.png

  • 支付寶綁卡:拍照識(shí)別卡號(hào)與開(kāi)戶(hù)行,免去逐位輸入

    image.png

 
核心思路:把信息提取權(quán)交給系統(tǒng),用戶(hù)只做確認(rèn)
 

 

二、避免重復(fù)閱讀與操作:跳過(guò)無(wú)效流程

 
用戶(hù)最煩重復(fù)看、重復(fù)點(diǎn),設(shè)計(jì)要記住用戶(hù)狀態(tài),直接定位到 “未完成”。
 
  • 愛(ài)奇藝劇集:一鍵跳過(guò)片頭,支持整劇默認(rèn)跳過(guò)

    image.png

  • 微信朋友圈:重返時(shí)一鍵 “跳到未看位置”,不重復(fù)瀏覽

    image.png

  • 微信群未讀:標(biāo)記未讀條數(shù),點(diǎn)擊直達(dá)最新消息位置

    image.png

 
核心思路:記住用戶(hù)進(jìn)度,砍掉重復(fù)路徑
 

 

三、降低出錯(cuò)概率:提前預(yù)判,減少返工

 
錯(cuò)誤會(huì)大幅浪費(fèi)時(shí)間,設(shè)計(jì)要前置規(guī)避,而不是事后補(bǔ)救。
 
  • 美團(tuán)配送:惡劣天氣先派單給騎手,再通知商家,避免無(wú)人配送

    image.png

  • 高德地圖:提前預(yù)警擁堵路段,給用戶(hù)決策時(shí)間

    image.png

  • 微信紅包 / 轉(zhuǎn)賬:超時(shí)提醒,一鍵定位對(duì)應(yīng)聊天,防止遺漏

    image.png

  • 美團(tuán)單車(chē):App 內(nèi)關(guān)鎖,杜絕忘鎖、折返鎖車(chē)

    image.png

     

 
核心思路:把問(wèn)題消滅在發(fā)生前,降低用戶(hù)試錯(cuò)成本
 

 

四、用選擇代替輸入:少打字、多點(diǎn)選

 
輸入成本遠(yuǎn)高于選擇,用預(yù)設(shè)、標(biāo)簽、快捷選項(xiàng)替代手動(dòng)輸入。
 
  • 餓了么備注:歷史備注一鍵選用,不用重復(fù)編輯image.png
  • 攜程拼音:姓名一鍵轉(zhuǎn)拼音,多音字自動(dòng)提供選項(xiàng)

    image.png

  • 京東評(píng)價(jià):預(yù)設(shè)評(píng)價(jià)標(biāo)簽,快速完成評(píng)分

    image.png

  • 微信零錢(qián)通:“全部轉(zhuǎn)入” 快捷按鈕,不用輸入金額

    image.png

 
核心思路:能選就不填,能默認(rèn)就不手動(dòng)
 

 

五、提供下一步路徑:連貫操作,不用折返

 
完成當(dāng)前動(dòng)作后,直接給出下一場(chǎng)景入口,形成閉環(huán)體驗(yàn)。
 
  • 高德地圖:查路線后,直接顯示單車(chē) / 地鐵掃碼入口
  • 支付寶出行:地鐵支付成功,一鍵喚起網(wǎng)約車(chē)

    image.png

  • 螞蟻森林:“找能量” 直達(dá)可收取好友界面,高效偷取

    image.png

  • 得到 / 大眾點(diǎn)評(píng):截屏自動(dòng)彈出分享按鈕,一步分享image.png
 
核心思路:預(yù)判用戶(hù)下一步,把入口前置
 
轉(zhuǎn)載:優(yōu)設(shè)
 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.wtxcl.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶(hù)體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢(xún)高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。

 

image.png

蘭亭妙微ui設(shè)計(jì)公司:6個(gè)產(chǎn)品細(xì)節(jié)剖析,看看高手是如何做設(shè)計(jì)的!

清陽(yáng) 移動(dòng)端UI設(shè)計(jì)文章及欣賞

UI設(shè)計(jì)的精髓在細(xì)節(jié),蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))作為深耕UI/UE領(lǐng)域16余年的專(zhuān)業(yè)團(tuán)隊(duì),以專(zhuān)業(yè)實(shí)力成為行業(yè)標(biāo)桿。本文聚焦其6個(gè)產(chǎn)品設(shè)計(jì)細(xì)節(jié),拆解高手設(shè)計(jì)邏輯與實(shí)操方法,為UI從業(yè)者、產(chǎn)品人提供可借鑒的設(shè)計(jì)參考,解鎖頂尖UI設(shè)計(jì)密碼。
蘭亭妙微ui設(shè)計(jì)公司:6個(gè)產(chǎn)品細(xì)節(jié)剖析,看看高手是如何做設(shè)計(jì)的!

一、閑魚(yú):AI發(fā)布提效

閑魚(yú)發(fā)閑置功能接入AI,只需上傳商品圖片就可以直接生成描述文案,極大幫助用戶(hù)簡(jiǎn)化發(fā)布流程

1. 零門(mén)檻發(fā)布,降低發(fā)布時(shí)間成本

解決非專(zhuān)業(yè)用戶(hù) “不會(huì)寫(xiě)文案、不懂專(zhuān)業(yè)術(shù)語(yǔ)” 的痛點(diǎn),自動(dòng)提取商品特征,組合成規(guī)范文案;相比傳統(tǒng)發(fā)布流程的耗時(shí)編輯文案、核對(duì)信息,更高效快捷。

2. 優(yōu)化內(nèi)容,提升交易轉(zhuǎn)化

自動(dòng)生成符合當(dāng)前市場(chǎng)熱點(diǎn)的文案表述,更能多文風(fēng)轉(zhuǎn)換,一鍵轉(zhuǎn)為趣味的 “抽象文學(xué)”“黛玉文學(xué)”等,提升內(nèi)容點(diǎn)擊率。

image.png

 

二、支付寶:廣告位游戲化包裝

支付寶的首頁(yè)Banner通過(guò)游戲化的包裝,快速吸引注意力,驅(qū)動(dòng)用戶(hù)主動(dòng)點(diǎn)擊探索,高效地為活動(dòng)頁(yè)面引流。

1. 互動(dòng)機(jī)制強(qiáng)化用戶(hù)參與感

采用懸念式互動(dòng)設(shè)計(jì),button以 “猜猜是什么” 這類(lèi)問(wèn)答形式,激發(fā)用戶(hù)好奇心,通過(guò)游戲化場(chǎng)景的營(yíng)造,降低參與門(mén)檻,驅(qū)動(dòng)用戶(hù)主動(dòng)點(diǎn)擊探索。

2. 場(chǎng)景氛圍營(yíng)造提升吸引力

在以功能入口為主的首頁(yè),該模塊具有游戲化趣味性的氛圍營(yíng)造,從視覺(jué)上差異化的呈現(xiàn),相比傳統(tǒng)的靜態(tài)廣告位,更能有效抓住用戶(hù)眼球,高效地為活動(dòng)頁(yè)面引流。

image.png

 

三、去哪兒:退票時(shí)挽留場(chǎng)景設(shè)計(jì)

當(dāng)有中轉(zhuǎn)單的用戶(hù)在點(diǎn)擊退票時(shí),用挽留浮層及時(shí)給用戶(hù)彈出更優(yōu)的解決方案,并在方案中量化利益點(diǎn),同時(shí)保證原有票的安全感。整體通過(guò) “先抓痛點(diǎn)→再給解決方案→最后引導(dǎo)操作” 的路徑,優(yōu)化了用戶(hù)出行體驗(yàn)。

1. 量化利益點(diǎn)

除了直達(dá)更方便之外,直達(dá)還有更省時(shí)間、金錢(qián),保底票免費(fèi)退等更多的利益點(diǎn)

2. 有兜底有安全感

用當(dāng)前的中轉(zhuǎn)作為保底,先搶票,搶到了還能再退票。讓用戶(hù)安心下單,在未搶到心儀票的時(shí)候能有中轉(zhuǎn)的替補(bǔ)票,可以緩解用戶(hù)的焦慮情緒,有兜底的保障安全感

image.png

 

四、療愈類(lèi)App Endel:引導(dǎo)充值會(huì)員的動(dòng)畫(huà)

通過(guò)一個(gè)巧妙的互動(dòng)行為“搖動(dòng)手機(jī)”,降低用戶(hù)對(duì)會(huì)員充值廣告的反感。

1. 提升用戶(hù)參與感與趣味性

“搖一搖”互動(dòng)將被動(dòng)觀看廣告轉(zhuǎn)變?yōu)橹鲃?dòng)參與,用戶(hù)通過(guò)簡(jiǎn)單的物理動(dòng)作即可觸發(fā)折扣,這種即時(shí)反饋機(jī)制增強(qiáng)了趣味性,降低了傳統(tǒng)廣告的侵入感。

2. 降低付費(fèi)決策的心理門(mén)檻

通過(guò)互動(dòng)行為展示折扣,巧妙地將付費(fèi)流程包裝成一種“獎(jiǎng)勵(lì)”而非強(qiáng)制推銷(xiāo)。用戶(hù)感受到的是“主動(dòng)獲取優(yōu)惠”的成就感,而非被廣告打擾的抵觸情緒,從而更愿意接受付費(fèi)選項(xiàng)。

image.png

五、小宇宙:創(chuàng)新列表設(shè)計(jì)

通過(guò)擬物化的卡牌堆疊形態(tài),將傳統(tǒng)的平面信息流轉(zhuǎn)變?yōu)榫哂锌臻g縱深感和探索趣味的交互式敘事焦點(diǎn)

1. 視覺(jué)層次突破傳統(tǒng)束縛

通過(guò)卡片堆疊、傾斜,在二維屏幕上創(chuàng)造出三維空間感。不對(duì)稱(chēng)的布局打破了傳統(tǒng)設(shè)計(jì)的呆板,賦予界面動(dòng)感與活力,能有效抓住用戶(hù)視線,對(duì)抗“橫幅盲視效應(yīng)”

2. 建立擬物化的趣味交互

模擬物理世界卡牌的操作體驗(yàn),配合流暢的滑動(dòng)動(dòng)畫(huà),讓用戶(hù)產(chǎn)生"翻閱卡片"的愉悅感,這種情感化設(shè)計(jì)能顯著提升用戶(hù)的操作滿(mǎn)足感和停留時(shí)長(zhǎng)

3. 內(nèi)容暗示激發(fā)探索行為

堆疊效果露出部分內(nèi)容作為預(yù)覽,能有效刺激用戶(hù)的好奇心,主動(dòng)進(jìn)行滑動(dòng)探索,提升內(nèi)容消費(fèi)深度

image.png

 

六、QQ音樂(lè):個(gè)人中心下拉觸發(fā)金幣中心

該設(shè)計(jì)通過(guò) “貼合用戶(hù)習(xí)慣的交互 + 強(qiáng)引導(dǎo) + 積分激勵(lì)” 的組合策略,實(shí)現(xiàn)簽到轉(zhuǎn)化與用戶(hù)留存

1. 交互設(shè)計(jì)貼合用戶(hù)固有習(xí)慣

采用下拉觸發(fā)模式,無(wú)需額外學(xué)習(xí)成本,降低用戶(hù)參與簽到的操作門(mén)檻,提升即時(shí)轉(zhuǎn)化效率

2. 視覺(jué)設(shè)計(jì)強(qiáng)化引導(dǎo)與目標(biāo)感知

以金幣掉落清晰的視覺(jué)元素突出金幣中心入口,讓用戶(hù)快速捕捉核心功能,減少尋找成本,縮短 “看到 - 參與” 的路徑

3. 激勵(lì)設(shè)計(jì)構(gòu)建留存閉環(huán)

用 “金幣” 作為即時(shí)激勵(lì),滿(mǎn)足用戶(hù)即時(shí)反饋的心理需求,驅(qū)動(dòng)次日復(fù)訪,同時(shí)聯(lián)動(dòng)積分體系,將單次簽到轉(zhuǎn)化為長(zhǎng)期行為

image.png

最后要說(shuō)的話(huà)

本期的設(shè)計(jì)分享就到這里啦。

文章中的案例與思考來(lái)自于UED同學(xué)的日常分享。

后續(xù)我們將持續(xù)深度體驗(yàn)產(chǎn)品,挖掘更多值得分享、學(xué)習(xí)的設(shè)計(jì)案例。努力將其中的方法理論應(yīng)用到后續(xù)的產(chǎn)品設(shè)計(jì)中。

愿我們的努力為你帶來(lái)更好的體驗(yàn)。下次見(jiàn)。

轉(zhuǎn)載:優(yōu)設(shè)

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.wtxcl.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶(hù)體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢(xún)高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。

 

image.png

蘭亭妙微ui設(shè)計(jì)公司帶您了解篩選功能設(shè)計(jì)

清陽(yáng) 移動(dòng)端UI設(shè)計(jì)文章及欣賞

前言

 
“少即是多” 是設(shè)計(jì)的常用理念,但產(chǎn)品簡(jiǎn)化到一定程度,必然會(huì)出現(xiàn)不可簡(jiǎn)化的復(fù)雜性
 
諾曼曾說(shuō):復(fù)雜是世界的一部分,但它不應(yīng)該令人困惑
 
篩選控件,就是讓用戶(hù)自主管理復(fù)雜信息的核心工具 —— 只要符合用戶(hù)行為,合理的復(fù)雜反而會(huì)被用戶(hù)接受。
 
蘭亭妙微UI設(shè)計(jì)公司從類(lèi)型、場(chǎng)景、維度、準(zhǔn)則五個(gè)維度,完整拆解移動(dòng)端篩選設(shè)計(jì),幫你快速選對(duì)、用好篩選控件。
 

 

一、先搞懂:篩選是什么?為什么要用?

 

1. 篩選的定義

 
篩選 = 用戶(hù)通過(guò)一個(gè) / 多個(gè)條件,在海量?jī)?nèi)容里快速縮小范圍,隱藏不匹配信息,高效找到目標(biāo)。
 
篩選是過(guò)濾器,屬于搜索框架的一部分。
 

2. 篩選 vs 搜索(核心區(qū)別)

image.png

 
  • 篩選:系統(tǒng)提供條件,用戶(hù)被動(dòng)選擇 → 縮小范圍
  • 搜索:用戶(hù)主動(dòng)輸入明確關(guān)鍵詞 → 精準(zhǔn)查找

image.png

 

image.png

簡(jiǎn)單記:搜索找結(jié)果,篩選縮范圍
 

3. 什么時(shí)候必須加篩選?

 
  1. 系統(tǒng)定義篩選(一級(jí)篩選)
     

    image.png

    大方向快速切換,如:訂單(待支付 / 待發(fā)貨)、優(yōu)惠券(未使用 / 已過(guò)期)。
  2. 用戶(hù)自定義篩選(二級(jí) / 精細(xì)化篩選)
     
    在一級(jí)結(jié)果里進(jìn)一步精準(zhǔn),如:價(jià)格、品牌、發(fā)貨地、評(píng)分等。
 
最佳組合:一級(jí)分類(lèi) + 二級(jí)精細(xì)化 + 排序
 

 

二、5 種最常用篩選樣式(直接對(duì)應(yīng)場(chǎng)景)

 

1. Tab 篩選

 

image.png

  • 形態(tài):橫向 / 縱向常駐展示
  • 優(yōu)點(diǎn):一目了然、隨時(shí)切換、無(wú)學(xué)習(xí)成本
  • 場(chǎng)景:內(nèi)容大類(lèi)劃分(新聞?lì)l道、視頻分類(lèi)、商品一級(jí)類(lèi)目)
  • 缺點(diǎn):結(jié)果偏模糊,需搭配二次篩選
 

2. 彈窗式篩選

image.png

 
  • 形態(tài):入口隱藏,點(diǎn)擊蒙層彈出
  • 優(yōu)點(diǎn):省空間、多維度平鋪、不占頁(yè)面
  • 場(chǎng)景:電商列表、外賣(mài)、出行等高頻精細(xì)化篩選
  • 適用:條件不多、操作快
 

3. 折疊式篩選

  • 形態(tài):入口隱藏,點(diǎn)擊展開(kāi)、常駐頁(yè)面
  • 優(yōu)點(diǎn):比 Tab 省空間,比彈窗更可控
  • 場(chǎng)景:中度篩選需求,需反復(fù)調(diào)整條件
 

4. 高級(jí)篩選(新頁(yè)面)

image.png

 
  • 形態(tài):跳轉(zhuǎn)到獨(dú)立頁(yè)面
  • 優(yōu)點(diǎn):無(wú)干擾、可放大量細(xì)顆粒條件
  • 場(chǎng)景:汽車(chē)、房產(chǎn)、招聘、復(fù)雜 B 端篩選
  • 適用:條件多、層級(jí)深、需專(zhuān)注操作
 

5. 篩選 + 排序組合(移動(dòng)端標(biāo)配)

image.png

 
  • 形態(tài):篩選按鈕 + 綜合 / 價(jià)格 / 銷(xiāo)量等排序
  • 優(yōu)點(diǎn):一步完成 “縮小范圍 + 重新排列”
  • 場(chǎng)景:幾乎所有商品 / 內(nèi)容列表
  • 代表:美團(tuán)、餓了么、淘寶、京東
 

 

三、3 個(gè)篩選維度(決定怎么布局)

 

1. 單維度篩選

 

image.png

  • 一次只選一個(gè)條件,觸發(fā)即生效
  • 標(biāo)簽簡(jiǎn)短(≤5 字)、語(yǔ)義清晰
  • 場(chǎng)景:訂單狀態(tài)、內(nèi)容分類(lèi)
 

2. 多維度篩選

image.png

 
  • 支持單選 / 多選 / 區(qū)間 / 滑塊
  • 需配:確定 + 重置按鈕
  • 移動(dòng)端建議:一級(jí)維度≤9 個(gè),多余整合到二級(jí)
 

3. 多等級(jí)篩選

 

image.png

  • 層級(jí):一級(jí)分類(lèi) → 二級(jí)屬性 → 三級(jí)參數(shù)
  • 移動(dòng)端最多 3 級(jí),避免迷路
  • 適合:類(lèi)目復(fù)雜的電商、后臺(tái)系統(tǒng)
 

 

四、篩選設(shè)計(jì) 3 大核心準(zhǔn)則(必遵守)

 

1. 以用戶(hù)效率為目標(biāo)

image.png

 
篩選的本質(zhì)不是 “好看”,而是幫用戶(hù)更快找到
 
  • 不知道要什么的用戶(hù):靠分類(lèi) + 篩選引導(dǎo)
  • 知道要什么的用戶(hù):靠精準(zhǔn)條件快速鎖定
  • 最終目標(biāo):降低時(shí)間成本,提升轉(zhuǎn)化與留存
 

2. 按產(chǎn)品類(lèi)型定制條件

 

image.png

不要抄通用模板:
 
  • 電商:品牌、價(jià)格、銷(xiāo)量、評(píng)分、服務(wù)
  • 新聞 / 內(nèi)容:熱度、時(shí)間、偏好、標(biāo)簽
  • 工具 / B 端:狀態(tài)、時(shí)間區(qū)間、負(fù)責(zé)人、關(guān)鍵字
 

3. 按使用頻率排優(yōu)先級(jí)

 

image.png

高頻條件前置,低頻條件隱藏 / 后置
 
  • 買(mǎi)手機(jī):品牌→內(nèi)存→容量→價(jià)格
  • 買(mǎi)日用品:價(jià)格→銷(xiāo)量→(品牌放高級(jí))
 

 

五、總結(jié)(一句話(huà)記住)

 
篩選的核心價(jià)值:用最簡(jiǎn)單的交互,幫用戶(hù)最高效縮小信息范圍
 
選型只看兩點(diǎn):用戶(hù)需求 + 使用場(chǎng)景
  • 簡(jiǎn)單分類(lèi) → Tab
  • 常規(guī)精篩 → 彈窗
  • 復(fù)雜深篩 → 高級(jí)頁(yè)面
  • 列表標(biāo)配 → 篩選 + 排序

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))www.wtxcl.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶(hù)體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢(xún)高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。

 

image.png

蘭亭秒微|UI 設(shè)計(jì)進(jìn)階:用好留白,讓界面更有表現(xiàn)力

濤濤 設(shè)計(jì)思維

在蘭亭秒微的 UI/UX 設(shè)計(jì)體系里,留白不是 “空著”,而是提升質(zhì)感、聚焦信息、優(yōu)化體驗(yàn)的核心手段。優(yōu)秀的留白設(shè)計(jì),能在簡(jiǎn)約風(fēng)格與功能可用性之間達(dá)到完美平衡,需要長(zhǎng)期實(shí)踐與經(jīng)驗(yàn)沉淀。

蘭亭秒微 UI 設(shè)計(jì)進(jìn)階:以用戶(hù)為中心的設(shè)計(jì) —— 兩本經(jīng)典方法論解析

濤濤 交互設(shè)計(jì)及用戶(hù)體驗(yàn)

作為專(zhuān)注 UI/UE 設(shè)計(jì)與用戶(hù)體驗(yàn)優(yōu)化的專(zhuān)業(yè)團(tuán)隊(duì),蘭亭秒微在工業(yè)軟件、醫(yī)療設(shè)備、能源監(jiān)控、企業(yè)信息化等領(lǐng)域長(zhǎng)期實(shí)踐,始終以以用戶(hù)為中心為設(shè)計(jì)核心。本文將結(jié)合蘭亭秒微項(xiàng)目經(jīng)驗(yàn),提煉《用戶(hù)體驗(yàn)要素》《簡(jiǎn)約至上》兩本經(jīng)典書(shū)籍的核心觀點(diǎn),為產(chǎn)品設(shè)計(jì)與體驗(yàn)升級(jí)提供系統(tǒng)化理論支撐。

UI 設(shè)計(jì)中的用戶(hù)體驗(yàn)設(shè)計(jì)|蘭亭妙微設(shè)計(jì)實(shí)戰(zhàn)全解

濤濤 交互設(shè)計(jì)及用戶(hù)體驗(yàn)

設(shè)計(jì)師遇到瓶頸,最好的破局方式,是跳出純視覺(jué)審美,回到用戶(hù)體驗(yàn)本質(zhì),重新審視需求、場(chǎng)景、行為與感受,用科學(xué)方法做有依據(jù)、可落地、能產(chǎn)生價(jià)值的設(shè)計(jì)。

拓寬設(shè)計(jì)之路,成為炙手可熱的跨行業(yè)大牛的進(jìn)階武器 —— 知識(shí)管理(下)

濤濤 設(shè)計(jì)管理與成長(zhǎng)

上一篇的知識(shí)管理分享,我們圍繞設(shè)計(jì)行業(yè)的知識(shí)管理核心,闡述了如何在合作中建立信任的底層邏輯,本篇分享將繼續(xù)完善上篇觀點(diǎn),結(jié)合蘭亭妙微十五年的設(shè)計(jì)實(shí)戰(zhàn)經(jīng)驗(yàn),為大家拆解設(shè)計(jì)行業(yè)知識(shí)管理的落地方法與核心價(jià)值。

日歷

鏈接

個(gè)人資料

存檔