首頁

《六步，探索優(yōu)秀設(shè)計作品》

前端達人

最近一直在整理eagle收藏夾里的設(shè)計作品，發(fā)現(xiàn)那些真正讓人眼前一亮的設(shè)計，其實都有很多相似的地方。于是花了2個月的課余時間分析這些作品，并且做了筆記。
我是從以下6個方面（背景、寓意、表現(xiàn)手法、顏色、版式和文字）作為切入點進行剖析，希望能跟大家一起學(xué)習(xí)，一起進步。
《六步，探索優(yōu)秀設(shè)計作品》
 
 
《六步，探索優(yōu)秀設(shè)計作品》
 
 
以下，就是我按照這6個要素進行分析的優(yōu)秀作品的筆記內(nèi)容：
《六步，探索優(yōu)秀設(shè)計作品》
 
 
《六步，探索優(yōu)秀設(shè)計作品》
 
 
 


作者：菜菜不甜
鏈接：https://www.zcool.com.cn/article/ZMTYxNTQyNA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(662)

認識“增長設(shè)計”

前端達人

一些從產(chǎn)品/運營設(shè)計角度對用戶側(cè)增量的思考，希望分享對大家能有所幫助。文中如理解有誤，歡迎交流指正。
 
 
 
 
 
增長設(shè)計其實已經(jīng)不是特別新穎的概念，伴隨互聯(lián)網(wǎng)載體的發(fā)展，我們關(guān)于用戶增長也是在不斷的迭代的。
在導(dǎo)入期和成長期，運營手段側(cè)重利益驅(qū)動，通過補貼/紅包等短平快的推廣活動快速獲取用戶；當(dāng)產(chǎn)品積累了大量注冊用戶，進入漫長的成熟期，持續(xù)促進用戶活躍就成為更加重要的目標(biāo)。
 
認識“增長設(shè)計”
 
 
 
 
 
 
 
今天，我們來簡單的聊聊什么是“增長設(shè)計”，日常的產(chǎn)品/運營設(shè)計中，如何利用增長設(shè)計做好用戶的激活與留存轉(zhuǎn)化。
認識“增長設(shè)計”
 
 
 
 
 
 
 
以往的——“AARRR”增長策略模型
認識“增長設(shè)計”
 
 
我們先來簡單解析下這個模型。
 
 
首先第一個環(huán)節(jié)（Acquisition）：獲取用戶
 
簡單來說，就是如何讓用戶發(fā)現(xiàn)或接觸我們的產(chǎn)品，產(chǎn)品的用戶增量，一定是長期且持續(xù)的不斷的設(shè)法獲取新用戶。
 
 
第二個環(huán)節(jié)（Activation）：用戶激活
 
完成第一步流量獲取之后，下一步要做動作的就是激活用戶了，因為在現(xiàn)在這個快節(jié)奏時代，人們的記憶力太短暫了，關(guān)注力也在變?nèi)?。而被拉新過來的用戶，不見得就能成為是你的用戶，所以需要讓用戶在短時間內(nèi)產(chǎn)生興趣并注冊使用產(chǎn)品。
 
 
第三個環(huán)節(jié):（retention ）提高留存
 
現(xiàn)在流量越來越貴的情況下，好不容易來的流量不好好加以利用簡直是浪費，如果用戶成功激活之后，使用一次產(chǎn)品之后就流失，那單個用戶的成本特太高了，所以為了拉低獲客成本，我們就要想辦法讓用戶持續(xù)性的來活躍。提升粘性做好留存。
 
 
第四個環(huán)節(jié)：（revenue） 商業(yè)變現(xiàn)
在完成前三個環(huán)節(jié)之后， 也就是如何讓用戶付費，讓產(chǎn)品和服務(wù)產(chǎn)生商業(yè)價值和營收。
 
 
最后一個環(huán)節(jié)：（referral）推薦分享
 
分享推薦，是用戶的一種自我傳播行為，通常來說就是利用一個事件來吸引用戶主動分享，以達到一傳十，十傳百的效果。社交電商玩的就是這個套路，拼多多直表示：這活我熟，我天天干，比如用邀請多少好友點鏈接可以提現(xiàn)100現(xiàn)金，砍一刀免費領(lǐng)取獎品等等。
 
 
 
 
 
 
如今的——
“RARRA”增長策略模型
 
認識“增長設(shè)計”
 
 
如今的增長模型有何區(qū)別？
 
 
以 C 端產(chǎn)品為典型
 
在當(dāng)下的互聯(lián)網(wǎng)市場中，大多產(chǎn)品都會有一倆個或多個競爭對手。如果C端用戶留存率不佳，用戶生命周期不能拉長，就算獲客端導(dǎo)入足夠的用戶量，但用戶流失可能也同樣的快。因為用戶信息獲取的渠道變得簡單，而且選擇變多了。用戶很快就會流失或者被吸引到其他競品上。
所以當(dāng)下每個產(chǎn)品都開始注重和思考用戶留存與培養(yǎng)用戶忠誠度的問題，留存逐漸顯現(xiàn)出極高的戰(zhàn)略地位，因而也就漸漸的出現(xiàn)了以用戶留存主導(dǎo)的增長策略。
 
 
 
 
 
 
 
認識“增長設(shè)計”
 
 
認識“增長設(shè)計”
 
 
 
我們設(shè)計師要想所做的用戶增長肯定不是去街上發(fā)個小廣告，去地鐵上拿著產(chǎn)品的下載二維碼讓用戶去下載我們的產(chǎn)品，我們設(shè)計師著手的設(shè)計增長范圍還是從用戶體驗去入手，回歸到產(chǎn)品功能設(shè)計和體驗提升上。
 
例如，公司現(xiàn)在想要提升某款產(chǎn)品的銷量，作為設(shè)計師做方案輸出的時候肯定不會是建議讓公司去請個明星代言來吸引用戶下單之類的。
 
 
設(shè)計師的增長觀一定是基于產(chǎn)品本身
，我們所要思考的應(yīng)該是如何讓用戶快速認識我們的產(chǎn)品，悉知我們產(chǎn)品的優(yōu)勢和價值，縮短路徑下單路徑，便利流暢讓用戶能成交，盡量讓用戶有優(yōu)秀的使用體驗從而助力用戶的數(shù)據(jù)增長。
 
 
 
 
 
 
-------------------------------------------------------------------------
 
 
 
 
 
 
認識“增長設(shè)計”
 
 
 
 
 
 
 
人是社交型的集合體，包括社交反饋、伙伴關(guān)系，甚至是從眾和競爭心理。當(dāng)你看到朋友
曬出某些技能、珍貴的物品或者靚麗的照片，你也會想跟他一樣，這一驅(qū)動力也反映了我們?yōu)槭裁瓷鷣砭推珢叟c我們有關(guān)的人。
認識“增長設(shè)計”
 
 
 
 
 
 
 
舉個例子，假設(shè)我是一個喜歡閱讀的用戶。
 
當(dāng)我打開微信讀書，APP告訴我，作為我的微信好友的“他/她”同樣在使用著微信讀書，并且他還在閱讀當(dāng)初我看過的“硅谷鋼鐵俠”這本了解埃隆•馬斯克最全面、最真實、最經(jīng)典讀本。
 
這時你會發(fā)現(xiàn)，原來身邊有人也對這本書這么感興趣，從而激發(fā)用戶對這個微信讀書這款產(chǎn)品的認同感。同時這個APP里肯定能找到更多的優(yōu)秀讀物，從而從動力上強化了用戶對產(chǎn)品使用行為。
 
認識“增長設(shè)計”
 
 
 
 
 
 
 
APP內(nèi)的紅包激勵手段
——燒錢要燒得明明白白，不同的用戶的“精細化燒法”
認識“增長設(shè)計”
 
 
 
  •  
    1.新用戶紅包：拉新激活
 
在用戶首次接觸產(chǎn)品，也就是用戶新鮮感最高的時候，新用戶的大額紅包有利于快速激活用戶的注冊行為，讓新用戶快速熟悉使用流程，盡快完成第一單，將新用戶盡快轉(zhuǎn)化成有效用戶。
 
 
  •  
    2.滿減限時紅包：用戶促活
 
顧名思義，這類紅包具有時效性。要求用戶在指定的時間段內(nèi)使用紅包，過期紅包則失效。這類贈送的紅包目的是給用戶低成本薅羊毛的機會，同時制造緊迫感，鼓勵并強化用戶產(chǎn)生盡快完成購買下單的行為，主要目標(biāo)就是為了提升產(chǎn)品轉(zhuǎn)化率。
 
 
  •  
    3.會員成長紅包：用戶粘性
 
用戶以優(yōu)惠的價格開通會員后，通過平臺每月贈送紅包從而可以享受更多優(yōu)惠或者獎勵金的形式，讓用戶每到飯點時就惦記著我還有個紅包沒用，如果不用就浪費了，從而增加用戶的沉默成本，能持續(xù)的讓用戶在固定時間內(nèi)重復(fù)回歸產(chǎn)品，而達到保持用戶粘性的目的。
 
 
 
 
 
 
關(guān)于個性化推薦，提升用戶動力。
這里我們主要看一下保險行業(yè)。特別是互聯(lián)網(wǎng)保險，線上產(chǎn)品的銷售一定是產(chǎn)品找人，結(jié)合場景的方式，保險產(chǎn)品自動找人進行自我營銷。推薦保險的意義需要第一時間就被用戶所感知到，產(chǎn)品是非常符合他的需求的，這個時候才有可能高效的完成客戶轉(zhuǎn)化。
認識“增長設(shè)計”
 
 
認識“增長設(shè)計”
 
 
 
 
 
 
 
提升用戶動力之——游戲化
當(dāng)產(chǎn)品積累了大量注冊用戶，進入漫長的成熟期，持續(xù)促進用戶活躍就成為更加重要的目標(biāo)，用戶對簡單的商品宣傳（運營活動）容易感到乏味或無法提起持續(xù)參與的興趣，所以更多的會將運營活動包裝成一個簡單易懂的游戲去俘獲用戶的芳心。
 
 
比如人人都有的支付寶，常見的如：收集，養(yǎng)成，抽獎，種植...等系列游戲化增長玩法是其此階段的主要運營手段之一，在利益驅(qū)動的同時，加強游戲化的趣味體驗，取悅用戶、制造記憶點，更有利于黏住用戶、建立長期忠誠。
認識“增長設(shè)計”
 
 
 
 
 
 
游戲化玩法尤其重要的一點就是任務(wù)體系，任務(wù)獎勵可以激勵人們采取行動，將用戶引導(dǎo)去體驗不同的頁面，它幫助用戶熟悉更多的APP功能和流程。更可以設(shè)置分享型的任務(wù)，讓用戶主動傳播產(chǎn)生裂變，這既是內(nèi)容分發(fā)最有效的途徑，也是拉新促活的低成本實現(xiàn)方法。
認識“增長設(shè)計”
 
 
 
 
 
 
 
 
-------------------------------------------------------------------------
 
 
 
 
 
 
 
認識“增長設(shè)計”
 
 
上面說了做加法，那接下來我們聊聊如何做減法。
絕大數(shù)用戶剛接觸產(chǎn)品或工具時，都會有一部分人選擇離開，可能是注冊環(huán)節(jié)、功能指引環(huán)節(jié)等等，所以在這個階段對于用戶的激活和留存的最好方式就是幫產(chǎn)品做減法
 
 
 
 
 
認識“增長設(shè)計”
 
 
認識“增長設(shè)計”
 
 
認識“增長設(shè)計”
 
 
 
 
 
 
 
 
-------------------------------------------------------------------------
 
 
 
 
 
 
當(dāng)然，增長設(shè)計遠不止上面分享的這些。比如積分成就體系，完善獎勵機制，彈窗引導(dǎo)助推，弱化用戶的負面情緒....限于時間原因，今天暫時先分享到這
認識“增長設(shè)計”
 
 
 
認識“增長設(shè)計”
 
 
 

藍藍設(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。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者：7V_Kevin
鏈接：https://www.zcool.com.cn/article/ZMTYxNjk0NA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(744)

UI&UE實用方法論 | 如何用費茨定律做設(shè)計

資深UI設(shè)計者

多看多學(xué)“法則”其實往往是在鞏固一種思維模式和思考   方向，而這些我們裝在腦中的   東西往往比法則本身更有價值。

評論(0) 瀏覽(743)

餓了么「飯搭子」產(chǎn)品設(shè)計

資深UI設(shè)計者

飯搭子是餓了么APP平臺上線的一款好友之間分享飲食數(shù)據(jù)的玩法，基于智能ai的行業(yè)趨勢下結(jié)合新技術(shù)風(fēng)口，結(jié)合平臺屬性通過營養(yǎng)數(shù)據(jù)分享的切入點，帶動小圈子提頻，實現(xiàn)引流價值；此外，高頻用戶訪問出現(xiàn)瓶頸，希望做用戶提頻，帶動用戶增量；餓了么的社交好友體系待完善，通過新玩法的探索進一步沉淀用戶數(shù)據(jù)，反哺到互動玩法乃至整個平臺的生態(tài)圈。

評論(0) 瀏覽(751)

教你一文讀懂暗色模式

博博

暗色模式（Dark Mode）的興起是一個逐漸發(fā)展的過程，它涉及到技術(shù)進步、用戶體驗優(yōu)化以及設(shè)計趨勢的變化。
隨著iOS 13在2019年的發(fā)布，暗色模式開始成為用戶關(guān)注的焦點；在用戶體驗方面，設(shè)計者們考慮到了環(huán)境光線與屏幕亮度的匹配問題，暗色模式可以有效減少視覺疲勞；在實際使用中，用戶發(fā)現(xiàn)暗色模式在光線較暗的環(huán)境中更為舒適，這也促使了暗色模式的普及和發(fā)展。
暗色模式在UI設(shè)計中的重要性體現(xiàn)在改善視覺舒適度、節(jié)省電量以及提供個性化選擇上，其普及程度隨著用戶需求和技術(shù)發(fā)展不斷提升。
 
 
「大廠設(shè)計師」教你一文讀懂暗色模式
 
一、定義及其在UI設(shè)計中的表現(xiàn)形式
1.暗色模式的定義
  暗色模式是一種低光用戶界面（UI）設(shè)計，也稱為深色模式，是一種用戶界面設(shè)計選項，它使用較深的顏色方案和背景，通常為黑色或深灰色，以減少屏幕亮度并提供更舒適的視覺體驗。
iOS 13 亮色模式（左）與暗色模式（右）的對比
iOS 13 亮色模式（左）與暗色模式（右）的對比
 
2.暗色模式的定義
(1).暗色模式在UI設(shè)計中的表現(xiàn)形式
設(shè)計師需要為暗色模式創(chuàng)建一個新的調(diào)色板，這通常意味著降低顏色的飽和度，以適應(yīng)深色背景。同時，避免使用純黑作為主色調(diào)背景，而是選擇接近純黑的深灰色，以確保閱讀體驗的舒適性和可讀性。
亮色/暗色模式下主色需要進行調(diào)整
亮色/暗色模式下主色需要進行調(diào)整
 
(2).對比度控制
暗色背景與文本顏色之間的對比度應(yīng)該控制在WCAG2.0AA級標(biāo)準(zhǔn)以上，以保證內(nèi)容的清晰度和易讀性。對于彩色元素，也需要適當(dāng)調(diào)整飽和度，確保整體色彩之間的對比度符合無障礙標(biāo)準(zhǔn)。
達到/未達到WCAG2.0AA標(biāo)準(zhǔn)的視覺效果對比
達到/未達到WCAG2.0AA標(biāo)準(zhǔn)的視覺效果對比
 
(3).視覺元素區(qū)分
在暗色模式下，設(shè)計師需要特別注意視覺元素的區(qū)分，通過足夠的對比度來保證文字和圖形的清晰可見。這不僅僅是簡單的顏色反轉(zhuǎn)，而是一種“弱光”主題的設(shè)計思考，旨在優(yōu)化用戶在低光環(huán)境下的視覺體驗。
亮色模式中的按鈕在暗色模式中顯得太跳躍
亮色模式中的按鈕在暗色模式中顯得太跳躍
 
二、歷史回顧及發(fā)展脈絡(luò)
1.命令行界面時代
在早期的計算機系統(tǒng)中，如DOS和Linux，終端通常使用暗色模式，這是因為早期的CRT顯示器存在閃爍問題，暗色背景能夠減少視覺疲勞，并提供較高的對比度。
Linux的終端界面
Linux的終端界面
 
2.個人電腦時代
隨著個人電腦的普及，圖形用戶界面（GUI）逐漸成為標(biāo)準(zhǔn)，此時大多數(shù)操作系統(tǒng)和應(yīng)用程序采用了亮色模式，以模仿紙張的顏色并減少CRT顯示器的眩光。
Windows2000的GUI
Windows2000的GUI
 
3.移動設(shè)備時代
智能手機和平板電腦的興起帶來了OLED等先進顯示技術(shù)，這些設(shè)備的小屏幕和高分辨率使得暗色模式再次變得實用和流行，特別是在節(jié)省電量和減少眼睛疲勞方面。
iOS13的暗色模式
iOS13的暗色模式
 
4.操作系統(tǒng)時代
近年來，各大操作系統(tǒng)開始正式支持暗色模式。例如，Windows 10在2018年的更新中引入了暗色應(yīng)用模式，macOS和iOS隨后也推出了可以根據(jù)時間或環(huán)境自動切換的暗色模式。
Windows10的暗色模式
Windows10的暗色模式
 
三、設(shè)計趨勢中暗色模式的地位
暗色模式在當(dāng)前設(shè)計趨勢中占據(jù)重要地位，以其減輕眼睛疲勞、節(jié)省電量和聚焦內(nèi)容的優(yōu)勢受到青睞。它不僅適應(yīng)低光環(huán)境，還提供美學(xué)上的新探索，響應(yīng)了用戶對舒適性和個性化選擇的需求。隨著技術(shù)發(fā)展和設(shè)計創(chuàng)新，暗色模式已成為現(xiàn)代界面設(shè)計不可或缺的一部分。許多頂級品牌和應(yīng)用程序，如WhatsApp、Instagram、Google、Facebook等，都已經(jīng)引入暗色模式設(shè)計，這表明暗色模式已經(jīng)成為了一種廣泛接受的設(shè)計趨勢。
從左往右依次為：WhatsApp、Instagram、Google、Facebook
從左往右依次為：WhatsApp、Instagram、Google、Facebook
 
「大廠設(shè)計師」教你一文讀懂暗色模式
 
一、用戶體驗層面
1.提高閱讀舒適度
(1).對比度和可讀性
在相同的對比度條件下，淺背景上的黑字比深背景上的淺色字閱讀效果更好。這表明，優(yōu)化對比度是提高閱讀舒適度的關(guān)鍵因素之一。
淺背景上深字與深背景上淺字的視覺對比
淺背景上深字與深背景上淺字的視覺對比
 
(2).用戶偏好和滿意度
一項針對用戶對暗色模式的使用體驗的調(diào)查顯示，與默認的白底模式相比，用戶在使用暗色模式時報告了更低的視覺疲勞和更高的滿意度。斯?。⊿loan）的一項研究在1977年就報告說，如果更多的光線通過混濁的透鏡到達眼睛，則出現(xiàn)畸變的可能性更大，即暗模式對視力障礙者更好。
對于長時間從事屏幕工作的人來說，暗色模式對眼睛更加友好
對于長時間從事屏幕工作的人來說，暗色模式對眼睛更加友好
 
2.減少視覺疲勞
(1).人眼生理特性
暗色模式能減少屏幕發(fā)出的光線，這有利于減少眼睛疲勞和不適，特別是在低光環(huán)境下，人眼的虹膜會打開以接受更多光線，而暗色模式提高了減少的光源，減少了對眼睛的刺激。
亮/暗環(huán)境下瞳孔大小的變化
亮/暗環(huán)境下瞳孔大小的變化
 
(2).藍光輻射減少
人們通過長期研究發(fā)現(xiàn)短波可見光，即紫光和藍光對眼底視網(wǎng)膜有相當(dāng)程度的破壞作用， 而人們通常把這種可見光波長中高能量波段(400- 470nm)對視網(wǎng)膜的損壞現(xiàn)象稱為“藍光傷害現(xiàn)象”。 還有研究關(guān)注了暗色模式對藍光輻射的影響。由于暗色模式降低了屏幕的整體亮度，因此也減少了藍光的輻射。
可見光波段分布
可見光波段分布
 
二、設(shè)備電池壽命
1.降低屏幕功耗
在OLED屏幕上，每個像素都是獨立發(fā)光的，當(dāng)顯示黑色時，相關(guān)的像素點會關(guān)閉，從而不消耗能量。這意味著，顯示大面積黑色內(nèi)容的暗色模式能夠顯著減少屏幕的能量消耗。
OLED屏幕發(fā)光原理
OLED屏幕發(fā)光原理
 
2.實際省電效果
以 Google 測試數(shù)據(jù)為例，OLED 屏幕的 Pixel 手機在時間段內(nèi)啟用深色模式并在使用地圖導(dǎo)航時保持屏幕最大亮度，手機的電量消耗下降了 63%。
Google的測試數(shù)據(jù)
Google的測試數(shù)據(jù)
 
三、降低屏幕功耗
1.促進睡眠
對于晚上喜歡在床上閱讀或工作的用戶來說，暗色背景有助于降低屏幕亮度，減少對褪黑素分泌的干擾，也有助于減少藍光對睡眠周期的影響，從而幫助用戶更快入睡并提高睡眠質(zhì)量。
OPPO手機暗色模式廣告
OPPO手機暗色模式廣告
 
2.減少眩光
眩光是明亮的屏幕和低光環(huán)境之間惱人的對比現(xiàn)象，對眼睛具有一定的影響并造成眼部不適。暗色模式通過使用深色背景和亮色文字，整體降低了屏幕的亮度，這樣在光線較亮的環(huán)境中，屏幕的亮光與周圍暗環(huán)境的對比度降低，從而減少了屏幕反射光線對眼睛的刺激，降低不適。
有眩光與無眩光的顯示器對比
有眩光與無眩光的顯示器對比
 
四、打造沉浸式體驗
1.減少視覺干擾
暗色模式提高了一種無干擾的工作環(huán)境，有助于他們專注于手頭的任務(wù)，特別是在進行寫作、編碼或其他需要集中注意力的活動時，暗色模式能夠減少視覺干擾。
暗色模式為視覺設(shè)計提供了更大的對比度，使得界面元素更為突出。這種高對比度不僅有利于內(nèi)容的戰(zhàn)士，也增強了用戶的視覺聚焦，讓用戶更容易沉浸于應(yīng)用或游戲的環(huán)境中。特別是在觀看視頻或進行游戲時，暗色背景能夠使色彩更為鮮明，提升用戶的視覺體驗。
編碼軟件一般默認暗色界面，有利于專注工作
編碼軟件一般默認暗色界面，有利于專注工作
 
2.增強視覺聚焦
暗色模式為視覺設(shè)計提供了更大的對比度，使得界面元素更為突出。這種高對比度不僅有利于內(nèi)容的戰(zhàn)士，也增強了用戶的視覺聚焦，讓用戶更容易沉浸于應(yīng)用或游戲的環(huán)境中。特別是在觀看視頻或進行游戲時，暗色背景能夠使色彩更為鮮明，提升用戶的視覺體驗。
手游王者榮耀UI界面


作者：阿琳01
來源：站酷

藍藍設(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。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(1123)

UI設(shè)計中的微文案：細微之處見真章

博博

在UI設(shè)計中，微文案往往被視作細枝末節(jié)，容易被設(shè)計師們所忽視。然而，正是這些看似不起眼的文字，卻在用戶體驗中扮演著舉足輕重的角色。微文案，即那些短小精悍、直接明了的文字描述，它們不僅能夠指導(dǎo)用戶操作，還能夠增強產(chǎn)品的情感價值，提升用戶滿意度。
 
資深設(shè)計專家Joshua Porter曾指出：優(yōu)化界面體驗的一個快捷方式，就是提升文案的質(zhì)量。 他在《Writing Microcopy》一文中首次提及“微文案”這一術(shù)語，并以確認彈窗的文案為例，展示了如何通過清晰的表述“賬單地址是你卡上顯示的地址”，有效減少用戶在使用過程中的錯誤。 簡而言之，要想快速優(yōu)化界面體驗，提升文案水平是一個行之有效的途徑。
 
一、了解微文案
如果你有學(xué)習(xí)過尼爾森的十大可用性原則，你會發(fā)現(xiàn)10條中有4條都與文案有關(guān)。
系統(tǒng)狀態(tài) —— 告訴用戶當(dāng)前正在發(fā)生什么，是卡住了還是處在loading中或是其它什么狀態(tài)。
一致性和標(biāo)準(zhǔn)化原則 —— 有一些約定俗成的規(guī)則，其中有一些普遍接受的術(shù)語，明確的操作提示，在不同界面保持統(tǒng)一等等。
防錯原則 —— 幫助用戶明白當(dāng)他們做什么操作會發(fā)生什么結(jié)果，或者清晰的解釋某個操作會有什么行為。
明確錯誤 —— 錯誤信息應(yīng)該用人話表達（不要用代碼），較準(zhǔn)確地反映問題所在，并且提出一個建設(shè)性的解決方案。
 
1、微文案的定義
微文案（Microcopy）指的是在界面中，能夠引導(dǎo)、幫助用戶與界面交互行為的簡短文案，可以是一個單詞、也可以是一句話，常見的有表單文案、按鈕文案、彈窗文案、錯誤提示等，大部分微文案都會對用戶的行為產(chǎn)生直接的影響，如下所示：
UI設(shè)計中的微文案：細微之處見真章
 
2、微文案被重視的原因
微文案，作為用戶與產(chǎn)品交流中最直接的觸點，不僅有助于用戶預(yù)見潛在問題，更能激發(fā)他們繼續(xù)操作的意愿。通過預(yù)先洞察用戶在操作過程中可能遭遇的障礙并提供針對性的解決方案，微文案在很大程度上降低了用戶的流失率。 優(yōu)秀的微文案能夠精準(zhǔn)地揭示問題核心，消除用戶的疑慮，從而加速他們的決策過程，為產(chǎn)品創(chuàng)造更多價值。
此外，微文案所傳達的語氣和態(tài)度，對用戶情緒有著顯著影響。用戶的情緒狀態(tài)往往決定了他們是否愿意繼續(xù)在產(chǎn)品中深入探索。因此，眾多產(chǎn)品在追求體驗優(yōu)化的過程中，都將微文案作為重點改進的一環(huán)。
UI設(shè)計中的微文案：細微之處見真章
 
3、微文案專設(shè)崗位
國外對于微文案的重視不止反映在公司對于職位的要求上，更反映在國外的教育市場上。國外有很多教育機構(gòu)相繼開設(shè)了UX Writing的課程體系，比如 UX Writer Collective 以及 UX Writing Hub。這都代表著國外市場對于微文案設(shè)計的重視程度提高。
相比之下，國內(nèi)除了頭部大廠在微文案方面有著較強的意識，其余以下尚未獲得足夠的重視，但其重要性正迅速提升，展現(xiàn)出巨大的發(fā)展?jié)摿Α?/span>
 
二、如何設(shè)計微文案
 
1、少用技術(shù)專業(yè)詞匯
每個領(lǐng)域、每個公司都有專業(yè)的詞匯，設(shè)計師和開發(fā)者通常會在產(chǎn)品當(dāng)中潛移默化地使用這些專業(yè)詞匯。而用戶群體卻是包羅萬象，所以需要做的，是將專業(yè)的技術(shù)信息簡單易懂地表述出來。
避免含糊文案，明確表述問題和指引。力求簡潔，詞語能達意則不用句，一句話能說明則不贅言。用戶沒有耐心來看你寫小說。
避免含糊文案，明確表述問題和指引。力求簡潔，詞語能達意則不用句，一句話能說明則不贅言。用戶沒有耐心來看你寫小說。
 
2、不要拘束于一種表達方式
設(shè)計常常賦予產(chǎn)品獨特的個性。在完成了前面的步驟后，我們往往需要將微文案與設(shè)計理念相融合。不同的設(shè)計與微文案結(jié)合，會產(chǎn)生不同的效果，但絕不應(yīng)是單調(diào)冷漠的提示。相反，我們應(yīng)賦予其人性化的口吻，比如將“未設(shè)置收貨地址，請?zhí)砑?rdquo;修改為“您需要我們送到哪里？…”，從而使整個文案更具情感溫度，成為一個溫暖而富有親和力的聲音。
在一些特殊的場景下，微文案能起到安撫用戶情緒、引導(dǎo)用戶選擇后續(xù)行為的作用
在一些特殊的場景下，微文案能起到安撫用戶情緒、引導(dǎo)用戶選擇后續(xù)行為的作用
 
3、謹慎開玩笑，除非你對你的產(chǎn)品非常自信
雖然幽默風(fēng)趣的微文案可以讓人更加輕松，但是也要分場合，玩笑和俏皮的語言應(yīng)該在氛圍合適的時候使用，并且并不是所有人都能Get到特定的笑點。
有些笑話在文章當(dāng)中或許合適，但是在UI界面當(dāng)中就不一定那么有意思了。 比如，你所提交的數(shù)據(jù)無法保存，結(jié)果文案是“糟糕！您的數(shù)據(jù)好像無法保存呢”，這對于當(dāng)前的狀況毫無裨益。
這樣的表達方式既直接指出了問題所在，又給出了簡單的解決方案或建議，更有助于用戶理解和處理當(dāng)前的問題。
這樣的表達方式既直接指出了問題所在，又給出了簡單的解決方案或建議，更有助于用戶理解和處理當(dāng)前的問題。
 
4、克制與誠信是微文案應(yīng)用的基石原則，它們共同構(gòu)成了我們在運用微文案時應(yīng)當(dāng)堅守的底線
有時，我們過于依賴這些標(biāo)簽，使得人們對信息逐漸變得麻木不仁。又或是由于虛假、夸大其詞的數(shù)據(jù)泛濫，使得人們開始對社會證明持懷疑態(tài)度。
正如張小龍在2017年微信之夜中所言，當(dāng)App的推送變得過于頻繁時，人們往往會選擇忽視，以至于任何一個推送都無法引起他們的關(guān)注。
當(dāng)全部都是特惠時，你還會因為優(yōu)惠而沖動購買嗎？
當(dāng)全部都是特惠時，你還會因為優(yōu)惠而沖動購買嗎？
 
結(jié)語
微文案不僅是文字，更是溝通的橋梁。請確保微語言準(zhǔn)確、清晰，同時注重情感化和個性化，以貼近用戶。同時，保證可讀性和可理解性，避免復(fù)雜表達。保持微語言的一致性和連貫性，提升用戶體驗。通過精心設(shè)計的微語言，為用戶創(chuàng)造更舒適、便捷的體驗。
UI設(shè)計中的微文案：細微之處見真章
 
 
作者：晚上去拔罐
來源：站酷

藍藍設(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。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)


著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
評論(0) 瀏覽(793)

設(shè)計方法論 I 超全面的頁面分割設(shè)計指南

前端達人

當(dāng)你打開一個頁面，首先映入眼簾的是豐富多樣的內(nèi)容和信息。如何在有限的空間內(nèi)，既保證內(nèi)容的完整性，又讓用戶能夠輕松理解和瀏覽，這背后的奧秘就在于頁面分割。今天，我們就來一起
探討頁面分割的藝術(shù)與技巧
，看看它是如何為你的設(shè)計增添魅力，提升用戶體驗的。
 
在設(shè)計中，頁面分割不僅僅是一種技術(shù)手段，更是一種藝術(shù)表現(xiàn)。它如同一位細心的畫師，巧妙地運用線條、色彩、空白等元素，
將頁面內(nèi)容劃分為一個個清晰、有序的區(qū)域。
通過這些分割，用戶能夠更快速地找到所需信息，更輕松地理解頁面內(nèi)容，從而享受到更加愉悅的閱讀體驗。
 
頁面分割的魅力在于其
多樣性和靈活性
。不同的頁面可以采用不同的分割方式，如線條分割、卡片分割、留白分割等，以滿足不同的設(shè)計需求和用戶習(xí)慣。同時，頁面分割也需要根據(jù)內(nèi)容的實際情況進行合理調(diào)整，既要保證信息的完整性，又要避免過度分割帶來的混亂感。
 
在本文中，我們將一起探討頁面分割的原則、技巧和應(yīng)用實例。我們將學(xué)習(xí)如何運用不同的分割方式來優(yōu)化頁面布局，提升用戶體驗。同時，我們還將分享一些成功的頁面分割案例，以激發(fā)你的設(shè)計靈感，為你的界面設(shè)計注入新的活力。
 
分享目錄：
一、分割的常見樣式
二、線性分割
三、卡片分割
四、留白分割
五、總結(jié)
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
線性分割：
通過使用線條來劃分頁面的不同區(qū)域，以達到組織內(nèi)容、引導(dǎo)用戶視線和提升整體美觀度的目的。這種分割方式簡單明了，能夠清晰地展現(xiàn)出頁面內(nèi)容的層次和結(jié)構(gòu)。
 
卡片分割：
卡片式設(shè)計是一種流行的界面分割方法，通過將內(nèi)容劃分為獨立的卡片或區(qū)塊，使用戶能夠更清晰地理解信息。每個卡片通常包含相關(guān)的內(nèi)容，如文本、圖片或按鈕，以便用戶快速瀏覽和交互。
 
留白分割：
主要通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），自然地將信息進行分組。這種留白的方式能夠為頁面增加呼吸感，降低視覺噪音，使設(shè)計看起來更簡潔。
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
近年來，設(shè)計趨勢從
“卡片式設(shè)計”轉(zhuǎn)向了“去線化設(shè)計”，
即傾向于使用留白分割而非過多的線條分割，以實現(xiàn)更為簡潔清晰的界面效果。設(shè)計師在選擇分割方式時，應(yīng)
優(yōu)先考慮留白分割，其次是線性分割，最后是卡片分割
。這個選擇順序反映了設(shè)計界的一般原則，即在不影響信息傳達的前提下，盡可能保持設(shè)計的簡潔性。
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
線性分割的定義：
線性分割設(shè)計是一種在視覺設(shè)計中使用的技巧，它使用線條、邊框或細線等元素來劃分、區(qū)分或連接頁面上的不同內(nèi)容區(qū)域。這種設(shè)計手法主要用于
提高頁面內(nèi)容的可讀性和組織性，幫助用戶更好地理解和瀏覽頁面信息。
 
線性分割設(shè)計具有以下優(yōu)勢：
 
1.劃分區(qū)域：
線性分割可以將頁面劃分為不同的區(qū)域或模塊，使得每個區(qū)域的內(nèi)容更加清晰、有序。這有助于用戶快速定位和瀏覽所需的信息，提高閱讀效率。
 
2.區(qū)分內(nèi)容：
線性分割可以用來區(qū)分不同類型的內(nèi)容，如文本、圖片、圖表等。通過線性分割，可以將這些內(nèi)容進行分組或歸類，使得頁面更加整潔、有序。
 
3.引導(dǎo)視線：
線性分割可以引導(dǎo)用戶的視線，幫助他們更好地理解頁面內(nèi)容。通過合理的線性分割設(shè)計，可以突出顯示重要的信息或元素，引導(dǎo)用戶關(guān)注到關(guān)鍵內(nèi)容。
 
4.增強層次感：
線性分割可以增強頁面的層次感，使得頁面內(nèi)容更加豐富、有深度。通過不同樣式的線性分割，可以區(qū)分不同的信息層級，幫助用戶更好地理解頁面結(jié)構(gòu)和內(nèi)容關(guān)系。
 
使用原則：
在使用分割線時，我們應(yīng)遵循一些原則，以確保其有效地幫助用戶理解頁面的組成，同時避免過度使用帶來的視覺干擾。
 
1.分割線應(yīng)當(dāng)微妙而不過于顯眼。
它們在布局中應(yīng)該容易被用戶注意到，但又不應(yīng)成為焦點，以免分散用戶的注意力。
 
2.分割線應(yīng)被視為次要的元素。
只有在留白等其他設(shè)計手法無法有效起到分割作用時，才考慮使用分割線。它們應(yīng)當(dāng)是布局中的輔助工具，而不是主導(dǎo)元素。
 
3.謹慎使用分割線。
過度使用分割線可能會導(dǎo)致頁面顯得混亂和復(fù)雜。相反，我們應(yīng)該用分割線來創(chuàng)建信息分組，而不是簡單地分割每一個條目。通過審慎而恰當(dāng)?shù)厥褂梅指罹€，我們可以有效地提升頁面的可讀性和用戶體驗。
圖片來源于參考文章
圖片來源于參考文章
 
線性分割三種類型：
通欄分割線、內(nèi)嵌分割線和中間分割線。
 
1.通欄分割線（Full-bleed Dividers）：
通欄分割線通常橫跨整個頁面寬度，用于分隔彼此完全獨立的內(nèi)容區(qū)域。這種分割線在視覺上非常顯著，能夠清晰地劃分出不同的內(nèi)容區(qū)塊，使用戶能夠迅速區(qū)分不同部分的信息。通欄分割線通常用于區(qū)分文章、產(chǎn)品列表、服務(wù)介紹等獨立的內(nèi)容區(qū)域。
 
2.內(nèi)嵌分割線（Inset Dividers）：
內(nèi)嵌分割線通常位于內(nèi)容區(qū)域內(nèi)部，用于分隔有錨點（如頭像、圖標(biāo)等）的相關(guān)內(nèi)容。這些錨點可以是圖片、符號或小的圖形元素，它們與分割線一起，幫助用戶更好地理解和區(qū)分內(nèi)容。內(nèi)嵌分割線常用于列表、卡片式布局、時間線等場景中，用于展示有關(guān)聯(lián)但不同類別的信息。
 
3.中間分割線（Middle Dividers）：
中間分割線位于兩個內(nèi)容區(qū)域之間，用于分隔無錨點的相關(guān)內(nèi)容。這種分割線通常比通欄分割線更細，更注重于在視覺上劃分空間，而不是強調(diào)內(nèi)容的獨立性。中間分割線常用于文本段落之間、列表項之間或不同功能區(qū)域之間，以提供清晰的結(jié)構(gòu)和層次。
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
在大多數(shù)情況下，當(dāng)信息層級較為簡單（即信息層級≤2）時，使用分割線進行信息分割是一種有效的方法。然而，實際上，
如果留白間距足夠大，我們也可以使用留白來達到類似的效果
。通過增大留白間距，我們可以創(chuàng)造出清晰的視覺區(qū)域劃分，使得信息之間的界限更加明確。
 
與分割線相比，足夠大的留白間距可以避免多余的線性元素干擾，讓整體視覺效果更加清爽。這樣的設(shè)計選擇有助于提升用戶的閱讀體驗，使用戶更加輕松地理解和消化信息。
 
因此，在
信息層級較簡單的情況下，我們可以靈活地選擇使用分割線或留白來進行信息分割
。通過調(diào)整留白間距，我們可以達到與分割線相似的效果，同時保持整體設(shè)計的簡潔和清晰。
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
為了提升屏效
，我們希望在一屏內(nèi)展示盡可能多的信息。在這種情況下，分割線的設(shè)計顯得尤為重要，因為它們能夠
有效地劃分信息區(qū)域，使內(nèi)容更加清晰、易于理解。
 
通過使用分割線，我們可以
將較多的信息條理化
，使得用戶能夠更快速地找到所需的內(nèi)容。與沒有分割線的布局相比，使用分割線能夠
顯著提高信息的可讀性和可理解性。
 
在相同的信息布局下，分割線能夠?qū)⑿畔^(qū)域明確地劃分開來，
防止信息之間產(chǎn)生混淆或交叉
。這種劃分不僅使得每個信息塊更加獨立，而且提高了信息之間的對比度，使用戶能夠更輕松地識別和區(qū)分不同的信息。
 
因此，當(dāng)我們的目標(biāo)是提高屏效并展示大量信息時，分割線的設(shè)計是一個關(guān)鍵要素。通過合理地使用分割線，我們可以確保信息布局更加清晰、有序，從而提高用戶的閱讀效率和滿意度。（如下圖）
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
線性分割在移動端頁面設(shè)計中的應(yīng)用場景廣泛，尤其是在
需要清晰劃分信息模塊時
。如微信的聊天列表中，線性分割被用來區(qū)分不同的消息條目。每條消息之間通過一條細線進行分隔，使得每條消息清晰可辨，方便用戶快速瀏覽和定位到特定的消息。
 
線性分割還常用在各類
App的信息提示
中，如果有多條消息需要展示，線性分割可以用來
區(qū)分不同的消息組
。例如招商銀行APP中，當(dāng)用戶收到多條未讀消息時，每條消息之間可以通過線性分割進行區(qū)分，使得每條消息清晰可辨，方便用戶逐一查看和處理。
 
在APP
需要用戶填寫信息和設(shè)置的表單頁面中
，線性分割可以用來區(qū)分不同的輸入字段或信息區(qū)域。這有助于用戶更清晰地了解需要填寫的信息，提高表單的填寫效率和準(zhǔn)確性，比如站酷的設(shè)置頁面（如下圖）
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
卡片分割的定義：
卡片分割設(shè)計主要通過將內(nèi)容或功能區(qū)域劃分成獨立的“卡片”來進行信息展示和組織。每個卡片通常包含相關(guān)的內(nèi)容或功能，并且與其他卡片通過一定的間距或線性分隔進行區(qū)分。
 
卡片分割設(shè)計具有以下優(yōu)勢：
 
1.內(nèi)容封裝：
卡片分割設(shè)計將相關(guān)內(nèi)容或功能封裝在一個獨立的卡片內(nèi)，使得每個卡片成為一個獨立的信息單元。這有助于保持頁面內(nèi)容的清晰和整潔，方便用戶瀏覽和理解。
 
2.明確邊界
：每個卡片通常具有明確的邊界，通過邊框、陰影或間距等元素來區(qū)分不同的卡片。這種邊界的存在使得每個卡片在視覺上相對獨立，方便用戶進行區(qū)分和識別。
 
3.靈活布局：
卡片分割設(shè)計具有很高的靈活性，可以根據(jù)需要自由調(diào)整卡片的大小、位置和排列方式。這使得設(shè)計師可以根據(jù)不同的設(shè)計需求和用戶習(xí)慣來靈活調(diào)整卡片的布局，以達到最佳的視覺效果。
 
4.強調(diào)重點：
通過不同的視覺處理手法，如改變卡片的顏色、大小或樣式等，可以突出顯示重要的卡片或內(nèi)容。這有助于吸引用戶的注意力，引導(dǎo)他們關(guān)注到關(guān)鍵信息。
 
卡片的基本構(gòu)成：
卡片是一個獨立的主題性容器，旨在將內(nèi)容和操作組合在一起。它可以包含多種元素，如容器、縮略圖、標(biāo)題、副標(biāo)題、富媒體、輔助文字、按鈕和圖標(biāo)按鈕等。這些元素并非必須全部存在，而是根據(jù)具體需求進行選擇和配置。無論選擇哪些元素，它們都會以易于掃描和操作的形式整齊地放置在卡片上。這種設(shè)計使得卡片成為一個靈活且高效的信息展示工具，適用于各種場景和應(yīng)用。
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
卡片分割常見的類型：
卡片分割可分為
通欄卡片
和
非通欄卡片
 
1、通欄卡片：
其特點是卡片占據(jù)整個頁面寬度，沒有左右邊距。通欄卡片的設(shè)計可以提高布局的靈活性，使得頁面內(nèi)容更加寬敞和大氣。同時，通欄卡片也可以更好地突出展示單條內(nèi)容，引導(dǎo)用戶的視線，提高閱讀效率。
 
2.非通欄卡片：
與通欄卡片相比，它會在卡片的左右兩側(cè)留有邊距，不完全占據(jù)整個頁面寬度。這種設(shè)計方式可以使得頁面內(nèi)容更加有層次感和組織性，同時也有利于突出顯示某些關(guān)鍵信息。
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
通欄卡片
通欄卡片相較于非通欄卡片，其設(shè)計特點在于去除了左右兩端的留白，僅保留上下邊距，從而提供了更大的展示空間。這種設(shè)計使得卡片內(nèi)的內(nèi)容能夠占據(jù)整個頁面寬度，進一步增強了內(nèi)容的視覺沖擊力。在通欄卡片中，卡片與背景的關(guān)系通常通過一條背景色塊來抽象表現(xiàn)，這種簡潔的處理方式避免了過多的視覺元素干擾，使得頁面整體看起來更加整潔和統(tǒng)一。
 
通欄卡片可以被視為在極簡列表式和傳統(tǒng)卡片式設(shè)計之間的一種折中選擇。它繼承了卡片式的分層方式和強交互性，使得用戶能夠輕松地瀏覽和交互頁面內(nèi)容。如下圖微博“關(guān)注”、微信“發(fā)現(xiàn)”頁面。
設(shè)計方法論 I 超全面的頁面分割設(shè)計指南
 
 
非通欄卡片
非通欄卡片
通常采用帶圓角的設(shè)計形式
，這種設(shè)計不僅賦予卡片一種柔和、圓潤的視覺效果，還增強了用戶的視覺舒適度。結(jié)合陰影效果以及四周的邊距，非通欄卡片巧妙地形成頁面留白，使得整體設(shè)計層次感更加豐富。
 
通過巧妙的投影設(shè)計以及前后顏色的精準(zhǔn)設(shè)定，非通欄卡片成功地讓內(nèi)容與背景之間
產(chǎn)生視覺空間感
，進一步強化了內(nèi)容的立體感和層次感。這種設(shè)計技巧不僅提升了卡片的視覺吸引力，還使得用戶在瀏覽頁面時能夠更加輕松地
區(qū)分和聚焦關(guān)鍵信息
。
 
在頁面設(shè)計中，非通欄卡片的應(yīng)用范圍十分廣泛。無論是用于展示文章、產(chǎn)品、圖片還是其他類型的內(nèi)容，非通欄卡片都能夠通過其獨特的視覺效果和設(shè)計元素，為用戶帶來更加舒適、美觀的視覺體驗。同時，非通欄卡片還具有良好的
適應(yīng)性和靈活性
，可以根據(jù)不同的設(shè)計需求和用戶習(xí)慣進行定制和調(diào)整，滿足不同場景下的應(yīng)用需求。如下圖夸克“夸克日報”、APP Store“首頁”

 
 
選擇使用通欄分割線還是卡片分割，主要取決于你的設(shè)計目標(biāo)和內(nèi)容需求。以下是三個參考建議，幫助你做出更好的選擇：
 
1.當(dāng)內(nèi)容已有自然分割線時：
如果你的主題內(nèi)容本身就已經(jīng)有明確的分割線，比如列表項、段落分隔等，那么采用非通欄分割會是一個好選擇?？ㄆ梢郧逦亟缍總€內(nèi)容塊，使主題信息層次更加分明，提高用戶的閱讀效率。
 
2.當(dāng)內(nèi)容類型多樣且占據(jù)較大空間時：
如果單個主題內(nèi)部包含了多種類型的內(nèi)容，如文字、圖片、視頻等，且這些內(nèi)容在垂直方向上占據(jù)了較大的空間（例如，內(nèi)容長度超過屏幕高度的一半），使用非通欄分割會更加合適?？ㄆ軌蛴行У厝Χ▋?nèi)容范圍，為用戶提供一個明確的視覺邊界，幫助他們更好地理解和消化信息。
 
3.當(dāng)需要增強橫向空間感時：
如果你希望擴展頁面的橫向空間，或者暗示用戶可以橫向滑動頁面查看更多內(nèi)容，那么非通欄卡片會是更好的選擇。非通欄卡片的設(shè)計能夠利用橫向內(nèi)容連續(xù)性原則，幫助用戶建立頁面可以橫向滑動的意識，從而提升頁面的互動性和用戶體驗。如下圖知乎“發(fā)現(xiàn)”、站酷“推薦”。

 
 
卡片分割更適合圖文混排
卡片分割設(shè)計以其獨特的布局方式，成為圖文混排中的理想選擇。它能夠巧妙地將不同大小、媒介的內(nèi)容統(tǒng)一呈現(xiàn)在一個界面中，
實現(xiàn)了內(nèi)容的多樣性與統(tǒng)一性的結(jié)合
。這種設(shè)計不僅讓單屏區(qū)域能夠顯示更多內(nèi)容，還通過合理的空間劃分，確保了文字和圖片之間的和諧共存，既維持了視覺的一致性，又
巧妙地平衡了文字和圖片的視覺強度
。因此，在需要同時呈現(xiàn)多種內(nèi)容和媒介的場景中，卡片分割無疑是一種高效且美觀的解決方案。如下圖知乎“想法”、站酷“首頁”

 
 

 
 

 
 
留白分割的定義：
留白分割是目前設(shè)計的主流趨勢，越來越多的產(chǎn)品在使用留白分割設(shè)計。留白分割主要通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會傾向于把彼此靠近的元素視為一組），將信息進行自然的視覺分組。
 
留白分割具有以下優(yōu)勢：
 
1.突出重點信息：
通過增加間距，可以將關(guān)鍵信息與其他內(nèi)容區(qū)分開來，使用戶更容易注意到。
 
2.提高可讀性：
適當(dāng)?shù)牧舭卓梢允刮淖只驁D形元素之間的界限更清晰，減少視覺干擾，從而提高用戶的閱讀效率。
 
3.增強設(shè)計感：
留白可以為設(shè)計增加呼吸感，避免元素過于擁擠，使整體布局更加和諧、美觀。
 
當(dāng)元素之間的間距保持均勻時，整個視覺呈現(xiàn)會顯得平衡且協(xié)調(diào)，大腦默認為一個整體。然而，一旦元素的橫向和縱向間距發(fā)生變化，我們的大腦會
基于接近性法則
，本能地將距離較近的元素視為一個整體或群組，這就是留白分割。（如下圖）

 
 
留白分割在
有規(guī)律且卡片樣式較多
的頁面中表現(xiàn)尤為突出，在有大量卡片樣式的頁面中，每個卡片通常都包含一定的信息。通過留白分割，可以清晰地劃分每個卡片的信息區(qū)域，使用戶更容易區(qū)分和閱讀每個卡片的內(nèi)容，增加呼吸感，避免元素過于擁擠，從而提高整體的可讀性。例如下圖中主流的音樂類App

 
 
相反，如果在沒有規(guī)律且頁面內(nèi)容較多的情況使用留白分割，則會使頁面雜亂無章。比如下圖咸魚的“廣場”界面feed流中，圖片從1～9張都有的情況下，使用留白分割，頁面就會變得雜亂，影響視覺效果。而脈脈則采用了卡片式分割樣式，頁面模塊則相對清晰很多。

 
 
 
 

藍藍設(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。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者：King_LBJ
鏈接：https://www.zcool.com.cn/article/ZMTYxMDk2NA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

評論(0) 瀏覽(1140)

產(chǎn)品設(shè)計中的心智模式：深度理解用戶需求與行為｜北京藍藍UI設(shè)計公司

前端達人

產(chǎn)品設(shè)計中的心智模式：深度理解用戶需求與行為｜北京藍藍UI設(shè)計公司
 
 
一、引言
在產(chǎn)品設(shè)計的世界里，心智模式是一個至關(guān)重要的概念。它反映了用戶的內(nèi)在需求、期望和行為習(xí)慣，是產(chǎn)品設(shè)計的核心依據(jù)。本文將帶你深入了解產(chǎn)品設(shè)計中的心智模式，掌握如何通過洞察用戶心智模式，創(chuàng)造出真正滿足用戶需求的產(chǎn)品。
二、什么是心智模式？
簡單來說，心智模式是指人們對于世界的認知和理解的內(nèi)在模式。它是人們對事物的看法、經(jīng)驗和行為習(xí)慣的集合，影響人們對世界的感知和反應(yīng)。在產(chǎn)品設(shè)計中，了解和利用用戶的心智模式，可以幫助我們更好地把握用戶需求，創(chuàng)造出更符合用戶習(xí)慣和期望的產(chǎn)品。
三、如何洞察用戶心智模式？
  1.  
    觀察研究：深入觀察用戶在實際生活中的行為、習(xí)慣和需求，理解他們的真實需求和痛點。這需要設(shè)計師具備敏銳的觀察力和同理心，能夠設(shè)身處地地站在用戶的角度思考問題。
  2.  
    用戶調(diào)研：通過問卷、訪談等方式，直接獲取用戶的反饋和建議。這有助于了解用戶的期望、偏好和顧慮，進一步揭示他們的心智模式。
  3.  
    競品分析：研究市場上類似產(chǎn)品的設(shè)計，理解其滿足用戶需求的優(yōu)點和不足。通過競品分析，可以洞察用戶在不同產(chǎn)品間的選擇和行為模式，從而深入理解他們的心智模式。
四、如何運用心智模式進行產(chǎn)品設(shè)計？
  1.  
    明確目標(biāo)用戶：了解目標(biāo)用戶的心智模式，根據(jù)他們的需求和行為習(xí)慣進行產(chǎn)品設(shè)計。這有助于確保產(chǎn)品功能、交互和視覺設(shè)計等方面符合用戶的內(nèi)在期望。
  2.  
    優(yōu)化用戶體驗：基于用戶的心智模式，優(yōu)化產(chǎn)品的使用流程。例如，通過合理的信息架構(gòu)、易于理解的交互設(shè)計和符合用戶直覺的視覺語言，提升產(chǎn)品的易用性和用戶體驗。
  3.  
    創(chuàng)新設(shè)計：通過深入了解用戶的心智模式，發(fā)現(xiàn)潛在的需求和痛點，為產(chǎn)品設(shè)計帶來創(chuàng)新點。這有助于創(chuàng)造出真正解決用戶問題的產(chǎn)品，提升市場競爭力。
  4.  
    迭代優(yōu)化：在產(chǎn)品發(fā)布后，持續(xù)收集用戶反饋，了解用戶在使用過程中的感受和體驗。根據(jù)用戶的反饋和行為數(shù)據(jù)，不斷優(yōu)化產(chǎn)品設(shè)計和用戶體驗，以滿足用戶不斷變化的心智模式。
五、結(jié)語
在產(chǎn)品設(shè)計過程中，了解和運用心智模式至關(guān)重要。通過深入洞察用戶的心智模式，我們可以創(chuàng)造出更符合用戶需求的產(chǎn)品，提升用戶體驗和市場競爭力。因此，設(shè)計師應(yīng)不斷提升對用戶心智模式的認知和理解，以更好地滿足用戶需求，推動產(chǎn)品的持續(xù)創(chuàng)新和發(fā)展。
藍藍未來將會持續(xù)在平臺上分享關(guān)于設(shè)計行業(yè)的文章。此外藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，添加vx藍小助ben_lanlan，報下信息，藍小助會請您入群。同時添加藍小助我們將會為您提供優(yōu)秀的設(shè)計案例和設(shè)計素材等，歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
 
藍藍設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
產(chǎn)品設(shè)計中的心智模式：深度理解用戶需求與行為｜北京藍藍UI設(shè)計公司



評論(0) 瀏覽(740)

UI設(shè)計師如何使用能力模型

資深UI設(shè)計者

在UI設(shè)計不僅僅是UI設(shè)計的今天，如何給自己的能力進行定位至關(guān)重要。

UI 職業(yè)的發(fā)展在今天已經(jīng)越來越復(fù)雜，越來越多元化，不同企業(yè)對 UI 設(shè)計師的要求各不相同，包括了產(chǎn)品、交互、視覺、協(xié)作、創(chuàng)意等等五花八門的領(lǐng)域。

這種現(xiàn)狀為在職設(shè)計師和新人帶來很多負面的影響，不僅覺得自己要學(xué)習(xí)海量的技能，并且因為方向太多陷入選擇困難癥，越是想要提升就越覺得迷茫。

所以，想要解決這樣的現(xiàn)狀，就要應(yīng)用我們今天說的重點——UI設(shè)計師能力模型。

評論(0) 瀏覽(851)

UI設(shè)計中常用設(shè)計模型方法論

資深UI設(shè)計者

做設(shè)計的時候如果只是依賴設(shè)計感覺，在輸出設(shè)計觀點的時候，就會缺乏理論支撐從而無法說服別人，所以，了解一定的設(shè)計模型方法論，可以讓你的設(shè)計更加有理有據(jù)，同時設(shè)計師在思考設(shè)計的過程中，也可以通過一些設(shè)計模型幫助我們開拓思維，突破瓶頸。

評論(0) 瀏覽(1069)

日歷

鏈接

個人資料

存檔