首頁(yè)

UI設(shè)計(jì)中圓角與直角該如何使用？

博博

在當(dāng)今數(shù)字化時(shí)代，UI設(shè)計(jì)已成為創(chuàng)造引人入勝的用戶體驗(yàn)的關(guān)鍵要素。一個(gè)成功的UI設(shè)計(jì)不僅需要技術(shù)知識(shí)，還需要對(duì)細(xì)微之處的深刻理解。本文將探討兩種基礎(chǔ)但極為重要的圖形元素：圓角和直角。它們?nèi)绾斡绊懹脩舻母兄突?dòng)，如何在設(shè)計(jì)中恰到好處地應(yīng)用它們，以及它們?cè)趯?shí)際案例中的運(yùn)用。
一、圓角與直角的特性
在介紹“圓角與直角”前，先給大家分享一個(gè)心理效應(yīng)“bouba/kiki效應(yīng)。”
這個(gè)效應(yīng)最早由德國(guó)心理學(xué)家沃爾夫?qū)?middot;科勒在1929年提出。
“kiki”這個(gè)詞的尖銳、快速的音調(diào)與尖銳的星狀圖案相呼應(yīng)
“bouba”這個(gè)詞的圓潤(rùn)、流暢的聲音則與圓潤(rùn)的云狀圖案相呼應(yīng)
最早在1929年沃爾夫?qū)?middot;科勒做了一個(gè)實(shí)驗(yàn)，該實(shí)驗(yàn)展示了兩種形式，并詢問(wèn)讀者哪種形狀被稱為“takete”，哪種形狀被稱為“maluma”。盡管沒(méi)有明確說(shuō)明，科勒暗示人們強(qiáng)烈傾向于將鋸齒狀形狀與“takete”配對(duì)，將圓形形狀與“maluma”配對(duì)。
在2001年的另一組實(shí)驗(yàn)中拉馬錢德蘭和 愛(ài)德華·哈伯德使用“kiki”和“bouba”這兩個(gè)詞重復(fù)了科勒的實(shí)驗(yàn)，詢問(wèn)美國(guó)大學(xué)本科生和印度講泰米爾語(yǔ)的人，“這些形狀中哪個(gè)是bouba，哪個(gè)是kiki？” 在兩組中，95% 到 98% 的人選擇彎曲的形狀為“bouba”，鋸齒狀的形狀為“kiki”，這表明人類大腦以某種方式一致地將抽象含義附加到形狀和聲音上。
這個(gè)效應(yīng)主要講述的是“人腦如何以一致的方式將抽象含義附加到視覺(jué)形狀和語(yǔ)音上”
那么我們不妨擴(kuò)展一下，把這這種效應(yīng)延展到角色上就拿我們最熟悉的“喜羊羊與灰太狼”舉例，我們只聽(tīng)名字“羊”和“狼”就可以潛意識(shí)的認(rèn)為“喜羊羊”就相當(dāng)于“bouba”、“灰太狼”相當(dāng)于“kiki”，“羊族”一聽(tīng)就是溫和的族群，而“狼族”就是較為兇猛的族群。那么我們可以再回顧一下，“可可愛(ài)愛(ài)的卡通人物”大部分就是以圓形為基礎(chǔ)“小黃人、葫蘆娃、維尼熊、大頭兒子等”，“超級(jí)大反派”更多是以“直角”為主“女巫、蛇精、吸血鬼”，這就是“將抽象含義附加到視覺(jué)形狀和語(yǔ)音上”。
如果聽(tīng)完這些你還是不懂，那么最簡(jiǎn)單的例子一個(gè)堪比吳彥祖的帥哥叫“文軒沒(méi)有大腦袋”，那當(dāng)你見(jiàn)到他時(shí)一定會(huì)去觀察這個(gè)人到底有沒(méi)有“大腦袋”
圓角與直角該如何使用？
 
 
那么回歸正題，我們將“圓角與直角”代入這種思考方式并將其進(jìn)行UI思考，就可以大致了解“圓角與直角”大致的特性
圓角
1.定義
  •  
    圓角指的是元素邊角被設(shè)計(jì)為圓滑的形狀，而非尖銳的直角。
  •  
    它通常通過(guò)設(shè)定一個(gè)半徑來(lái)實(shí)現(xiàn)，半徑越大，角越圓滑。
2.特性
  •  
    視覺(jué)友好
    「圓角被認(rèn)為更溫和、更友好，因?yàn)樗鼈內(nèi)狈怃J的邊緣，給人一種安全和柔和的感覺(jué)。」
  •  
    現(xiàn)代感
    「在現(xiàn)代設(shè)計(jì)中，圓角被廣泛使用，它們通常與新穎、時(shí)尚的設(shè)計(jì)理念相關(guān)聯(lián)?！?/div>
  •  
    提高注意力聚焦
    「圓角可以引導(dǎo)用戶的視線流動(dòng)，幫助減少視覺(jué)干擾，使用戶更容易聚焦于界面的關(guān)鍵部分?！?/div>
  •  
    適用性
    「在移動(dòng)應(yīng)用和網(wǎng)站設(shè)計(jì)中尤其流行，特別是在按鈕、輸入框、卡片和其他交互元素中?！?/div>
直角
1.定義
  •  
    直角是指元素的邊角以90度角的形式呈現(xiàn)。
  •  
    它是最基本的形狀之一，在許多傳統(tǒng)和經(jīng)典的設(shè)計(jì)中常見(jiàn)。
2.特性
  •  
    專業(yè)感
    「直角通常給人一種更加正式、專業(yè)的印象?！?/div>
  •  
    清晰界定
    「直角在視覺(jué)上提供了清晰的界定，使元素的邊界更加明確，有助于信息的組織和分隔?！?/div>
  •  
    傳統(tǒng)感「
    在某些情況下，直角與傳統(tǒng)、經(jīng)典的設(shè)計(jì)風(fēng)格相聯(lián)系?！?/div>
  •  
    適用性
    「直角在各種應(yīng)用中都很常見(jiàn)，尤其是在需要傳達(dá)清晰、直接信息的界面中，如表格、列表和布局結(jié)構(gòu)。」
那么回想一下“bouba/kiki效應(yīng)”，今后在設(shè)計(jì)中當(dāng)我們看到某個(gè)產(chǎn)品大量的使用“直角/圓角”我們就可以分辨這個(gè)產(chǎn)品的大致風(fēng)格，同樣字體搭配也是相似的效果，通過(guò)不同的banner可以大致看出運(yùn)營(yíng)活動(dòng)的大致目的。
圓角與直角該如何使用？
 
 
二、圓角、直角的使用場(chǎng)景
在實(shí)際的使用場(chǎng)景中，我們就從最常見(jiàn)的“按鈕、卡片”兩個(gè)場(chǎng)景來(lái)舉例分析“圓角、直角”的作用。
按鈕
我們首先具體聚焦在UI設(shè)計(jì)中對(duì)于“按鈕”這一元素的圓角和直角的使用：
圓角按鈕
  •  
    用戶友好性「圓角按鈕通常看起來(lái)更加友好和容易接近，它們給用戶一種溫饌和舒適的感覺(jué)，適合于鼓勵(lì)用戶交互的場(chǎng)景?！?/div>
  •  
    移動(dòng)設(shè)備適應(yīng)性「在移動(dòng)設(shè)備上，由于屏幕尺寸較小，圓角按鈕更易于觸控，尤其是屏幕邊緣的按鈕?！?/div>
  •  
    減少視覺(jué)沖擊「圓角可以減少視覺(jué)上的尖銳感，使界面看起來(lái)更加柔和，適合于尋求輕松視覺(jué)體驗(yàn)的應(yīng)用?！?/div>
直角按鈕
  •  
    專業(yè)和正式感「直角按鈕給人一種更加正式和專業(yè)的感覺(jué)，在一些傳統(tǒng)的或者保守的設(shè)計(jì)風(fēng)格中，直角按鈕更為常見(jiàn)，例如一些服裝品牌（Yohji Yamamoto、CONFIRMED）、學(xué)校（各學(xué)校官方網(wǎng)站）等?！?/div>
  •  
    內(nèi)容和功能區(qū)分「直角按鈕在視覺(jué)上更加突出，能夠有效地區(qū)分不同的功能和內(nèi)容，尤其是在需要用戶做出明確決策的界面上。」
那么這里我們會(huì)有一個(gè)疑問(wèn)，那就是“移動(dòng)設(shè)備適應(yīng)性”，這里我們可能會(huì)想到“直角按鈕”的面積看起來(lái)要比“圓角按鈕”的觸控面積更大，那為什么“圓角按鈕”更易于觸控呢？
我們從兩個(gè)方面來(lái)解答
1.觸控面積
  •  
    實(shí)際上，無(wú)論是圓角還是直角，按鈕的觸控面積通常是由其外接矩形決定的。這意味著，即使按鈕的視覺(jué)元素有圓角，觸控面積實(shí)際上仍然包括了這些圓角區(qū)域。
  •  
    在實(shí)際應(yīng)用中，操作系統(tǒng)或應(yīng)用平臺(tái)通常會(huì)為按鈕元素提供一個(gè)默認(rèn)的“觸控目標(biāo)大小”，這個(gè)大小是為了確保良好的觸控體驗(yàn)而設(shè)計(jì)的，無(wú)論按鈕的視覺(jué)樣式如何。
2.視覺(jué)感知與觸控體驗(yàn)
  •  
    圓角按鈕在視覺(jué)上看起來(lái)更加柔和和親切，這可能使得用戶更傾向于觸摸和與之交互。這種心理效應(yīng)可能會(huì)導(dǎo)致用戶覺(jué)得圓角按鈕更“容易”觸控，即使實(shí)際的觸控面積與直角按鈕相同。
  •  
    在移動(dòng)設(shè)備上，圓角按鈕的另一個(gè)優(yōu)勢(shì)是它們的形狀與設(shè)備的圓潤(rùn)邊緣相協(xié)調(diào)，這在視覺(jué)上創(chuàng)造了一種和諧感，可能會(huì)無(wú)形中增加用戶的觸控舒適度。
圓角與直角該如何使用？
 
 
通過(guò)這兩方面，我們是不是又能聯(lián)想到“bouba/kiki效應(yīng)”，介于“圓角本身的屬性”我們會(huì)更容易去點(diǎn)擊他。
卡片
對(duì)于卡片我們還是先對(duì)比，在進(jìn)行詳細(xì)的分析。
圓角卡片
  •  
    視覺(jué)風(fēng)格「圓角卡片提供了一種柔和、友好的視覺(jué)感受。它們的圓潤(rùn)邊緣可以減少視覺(jué)沖擊，創(chuàng)造出更輕松和親切的外觀?！?/div>
  •  
    用戶體驗(yàn)「圓角的設(shè)計(jì)通常被認(rèn)為更加現(xiàn)代和用戶友好。它們可以使界面看起來(lái)更輕松、更易于接近，這在提高用戶的互動(dòng)意愿方面很有效?！?/div>
  •  
    適用場(chǎng)景「圓角卡片通常用于需要提供溫馨、輕松體驗(yàn)的應(yīng)用中，例如社交媒體、娛樂(lè)內(nèi)容展示、個(gè)人博客，或者任何強(qiáng)調(diào)用戶友好和易用性的設(shè)計(jì)?！?/div>
  •  
    功能效果「在功能上，圓角卡片可以幫助區(qū)分不同的內(nèi)容模塊，同時(shí)保持界面的整體一致性和流暢性?！?/div>
直角卡片
  •  
    視覺(jué)風(fēng)格「直角卡片提供了一種清晰、專業(yè)的視覺(jué)效果。它們的直線和銳角創(chuàng)造了一種結(jié)構(gòu)化和有序的外觀。」
  •  
    用戶體驗(yàn)「直角設(shè)計(jì)傳達(dá)了一種正式和權(quán)威的感覺(jué)，適合于需要展示專業(yè)性和準(zhǔn)確性的應(yīng)用?！?/div>
  •  
    適用場(chǎng)景「直角卡片通常用于更正式或?qū)I(yè)的環(huán)境，如企業(yè)網(wǎng)站、在線商務(wù)平臺(tái)、教育平臺(tái)，或任何需要清晰展示大量信息的界面?！?/div>
  •  
    功能效果「直角卡片在功能上有助于清楚地區(qū)分和組織內(nèi)容，特別是在數(shù)據(jù)密集或信息密集的應(yīng)用中?！?/div>
這里更要值得注意的一點(diǎn)是視覺(jué)效果方面的“圓角對(duì)于用戶的視覺(jué)效果要強(qiáng)于直角”，巴羅神經(jīng)學(xué)研究所對(duì)角落進(jìn)行的科學(xué)研究發(fā)現(xiàn)，“角落的感知顯著性隨角落的角度呈線性變化。銳角比淺角產(chǎn)生更強(qiáng)的虛幻顯著性”，這里角越尖，看起來(lái)就越亮。角落越亮，就越難看。
通過(guò)上述對(duì)比我們可以得到一個(gè)結(jié)論“圓角比直角更親和”，那么可以接著推論“圓角卡片更容易使用戶接受卡片內(nèi)信息”這是因?yàn)閳A角向內(nèi)指向矩形的中心。這會(huì)將焦點(diǎn)放在矩形內(nèi)的內(nèi)容上。當(dāng)兩個(gè)矩形彼此相鄰時(shí)，還可以輕松查看哪條邊屬于哪個(gè)矩形。尖角向外，從而減少對(duì)矩形內(nèi)部?jī)?nèi)容的關(guān)注。當(dāng)兩個(gè)矩形彼此相鄰時(shí)，它們還使得很難判斷兩條邊屬于哪個(gè)矩形。這是因?yàn)槊總€(gè)矩形邊都是一條直線。圓角矩形的邊是獨(dú)特的，因?yàn)榫€條朝著它所屬的矩形彎曲。
圓角與直角該如何使用？
 
 
三、案例分析
那么對(duì)于“直角、圓角”的使用我們以“CONFIRMED、汽水音樂(lè)”這兩個(gè)產(chǎn)品來(lái)分析看一下這兩個(gè)產(chǎn)品對(duì)于“直角、圓角”的應(yīng)用。
圓角與直角該如何使用？
 
 
CONFIRMED
CONFIRMED（Adidas旗下網(wǎng)站，這里懂球鞋的朋友我們可以把它理解為Nike的SNKRS）
作為Adidas旗下產(chǎn)品發(fā)售平臺(tái)，CONFIRMED更多的是發(fā)售一些潮流類的服飾最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服飾，這個(gè)應(yīng)用程序旨在為Adidas的高需求和限量產(chǎn)品提供一個(gè)更加公平和直接的購(gòu)買渠道，通常涵蓋了品牌與設(shè)計(jì)師和藝術(shù)家的合作款，以及特別版的運(yùn)動(dòng)鞋。
那么我們從“產(chǎn)品定位、用戶群體、主要功能流程”來(lái)分析一下
產(chǎn)品定位
  •  
    獨(dú)家發(fā)售平臺(tái)「CONFIRMED 專注于提供 Adidas 的獨(dú)家發(fā)售和限量版產(chǎn)品，特別是鞋類和高端服裝。它的目標(biāo)是成為品牌與其最忠實(shí)粉絲之間的直接連接點(diǎn)」
  •  
    品牌營(yíng)銷工具「通過(guò)這個(gè)平臺(tái)，Adidas 能夠加強(qiáng)其品牌形象，特別是在時(shí)尚和高端運(yùn)動(dòng)裝備領(lǐng)域。CONFIRMED 作為一個(gè)專門平臺(tái)，也強(qiáng)化了 Adidas 在潮流和限量產(chǎn)品市場(chǎng)中的地位?！?/div>
  •  
    市場(chǎng)分析和消費(fèi)者洞察「CONFIRMED 還可能被用作市場(chǎng)研究工具，通過(guò)分析用戶行為和購(gòu)買模式來(lái)更好地理解目標(biāo)市場(chǎng)?！?/div>
用戶群體
  •  
    潮流愛(ài)好者「對(duì)最新潮流和設(shè)計(jì)保持關(guān)注的消費(fèi)者，他們追求限量版、獨(dú)家合作系列。」
  •  
    Adidas 忠實(shí)粉絲「品牌的忠實(shí)支持者，對(duì)于品牌的新產(chǎn)品和特別發(fā)售保持高度興趣?！?/div>
  •  
    運(yùn)動(dòng)鞋收藏家「對(duì)于限量版運(yùn)動(dòng)鞋有收藏價(jià)值的消費(fèi)者，這些人往往愿意為獨(dú)特和罕見(jiàn)的設(shè)計(jì)支付高價(jià)?！?/div>
主要功能流程
  •  
    產(chǎn)品預(yù)覽和信息「用戶可以在應(yīng)用程序中瀏覽即將發(fā)售的產(chǎn)品，并獲取詳細(xì)信息，如價(jià)格、設(shè)計(jì)特點(diǎn)、發(fā)售日期等?！?/div>
  •  
    注冊(cè)和參與抽簽「對(duì)于感興趣的產(chǎn)品，用戶需要在特定時(shí)間內(nèi)注冊(cè)參與抽簽。這通常涉及填寫個(gè)人信息和選擇購(gòu)買尺碼等?！?/div>
  •  
    抽簽結(jié)果通知「抽簽結(jié)束后，用戶會(huì)收到是否中簽的通知。如果中簽，用戶將有機(jī)會(huì)購(gòu)買這些限量產(chǎn)品?！?/div>
  •  
    購(gòu)買和支付「中簽用戶可以在應(yīng)用程序內(nèi)完成購(gòu)買流程，包括支付和選擇配送選項(xiàng)。」
  •  
    社區(qū)互動(dòng)和內(nèi)容「CONFIRMED 還可能提供與品牌相關(guān)的內(nèi)容，如設(shè)計(jì)師訪談、品牌故事等，以增強(qiáng)用戶參與和品牌忠誠(chéng)度?！?/div>
這里我們先從“CONFIRMED”卡片元素分析（本文只講述的直角卡片的用途，不過(guò)多講述App功能）
每款產(chǎn)品可以在一個(gè)直角卡片中展示，其中包括產(chǎn)品圖片、名稱和一些基本信息。這里在App的“首頁(yè)、發(fā)售信息、會(huì)員權(quán)益”這三個(gè)模塊最為突出，這種布局有助于用戶快速瀏覽和識(shí)別不同的產(chǎn)品
圓角與直角該如何使用？
 
 
功能展示
這里“CONFIRMED”不同的卡片可以承載不同的功能，如顯示即將發(fā)售的產(chǎn)品、已經(jīng)發(fā)售的產(chǎn)品、品牌故事等，幫助用戶快速定位他們感興趣的內(nèi)容。這里使用通過(guò)卡片元素的方式來(lái)詳細(xì)展示產(chǎn)品，會(huì)使整個(gè)產(chǎn)品的調(diào)性保持一致，大卡片的元素傳遞給觀眾的瀏覽體驗(yàn)會(huì)更直觀的感受產(chǎn)品（這里會(huì)發(fā)現(xiàn)一個(gè)很有趣的細(xì)節(jié)，貌似好的國(guó)外、跨境電商的App都會(huì)采用這些大的直角卡片）
接下來(lái)我們就講述關(guān)于“CONFIRMED”按鈕元素使用的分析：
突出的功能
直角按鈕通常用于突出最重要的操作，例如“購(gòu)買”、“注冊(cè)抽簽”或“查看詳情”。這些按鈕因其鮮明的邊界和直接的設(shè)計(jì)而容易被用戶注意到。
圓角與直角該如何使用？
 
 
風(fēng)格統(tǒng)一
使用直角按鈕可以與應(yīng)用中其他直角設(shè)計(jì)元素（如卡片）保持視覺(jué)一致性，為用戶提供一致且簡(jiǎn)潔的視覺(jué)體驗(yàn)。
視覺(jué)引導(dǎo)
這些按鈕通常配有“CONFIRMED”的顏色（藍(lán)色），用于引導(dǎo)用戶的注意力，幫助他們快速識(shí)別應(yīng)用程序中的不同功能。
這里我們可以看到“直角卡片"“直角按鈕”在 CONFIRMED 應(yīng)用中的應(yīng)用可能主要體現(xiàn)在其用戶界面的設(shè)計(jì)上，通過(guò)清晰、有序的布局和直觀的用戶交互，提升用戶的體驗(yàn)。
汽水音樂(lè)
提到“汽水音樂(lè)”大家都不陌生，前段是時(shí)間各大“rapper、流行歌手”發(fā)歌都在汽水，這個(gè)App是可以和抖音聯(lián)動(dòng)的，所以播放音樂(lè)的模式?jīng)]有采用大家常見(jiàn)的“點(diǎn)歌、切歌”操作，而是換成隨機(jī)曲子和“抖音”向下滑動(dòng)切換一樣，這樣既新穎又能容易使用戶養(yǎng)成操作習(xí)慣，不至于一下子新的交互方式無(wú)法適應(yīng)。那么我們同樣從“產(chǎn)品定位、用戶群體、主要功能來(lái)分析”
產(chǎn)品定位
  •  
    汽水音樂(lè)是一款音樂(lè)流媒體應(yīng)用，旨在與主要競(jìng)爭(zhēng)對(duì)手如騰訊音樂(lè)和網(wǎng)易云音樂(lè)抗衡。
  •  
    它不僅是一款單純的音樂(lè)播放軟件，還與抖音緊密結(jié)合，使得用戶可以在兩個(gè)平臺(tái)之間無(wú)縫切換音樂(lè)播放列表，顯現(xiàn)出對(duì)社交媒體和音樂(lè)流的綜合運(yùn)用。
用戶群體
  •  
    汽水音樂(lè)的主要用戶群體是中國(guó)市場(chǎng)上的年輕用戶，尤其是那些已經(jīng)使用抖音并尋求更豐富音樂(lè)體驗(yàn)的用戶。
  •  
    考慮到字節(jié)跳動(dòng)在短視頻領(lǐng)域的強(qiáng)大影響力，汽水音樂(lè)會(huì)吸引那些對(duì)新興、流行音樂(lè)以及個(gè)性化推薦感興趣的年輕群體。
主要功能流程
  •  
    個(gè)性推薦「這里“汽水音樂(lè)”通過(guò)算法推薦“個(gè)性電臺(tái)”、“歌單推薦”、“3個(gè)榜單”」
  •  
    與社交媒體的整合「能夠與用戶的抖音賬號(hào)同步，提供跨平臺(tái)的音樂(lè)體驗(yàn)。用戶可以在抖音中發(fā)現(xiàn)音樂(lè)，并在汽水音樂(lè)中繼續(xù)播放，反之亦然。」
  •  
    播放「汽水音樂(lè)的播放方式與抖音同步營(yíng)造區(qū)分于其他音樂(lè)App不同的交互體驗(yàn)」
那么我們從卡片開(kāi)始分析，卡片主要應(yīng)用在“歌曲、專輯”、“播放列表”、“歌單推薦”、“音樂(lè)盲盒”
那么他們起到的作用分別是
  •  
    提高用戶體驗(yàn)
    「圓角卡片的設(shè)計(jì)通常比直角設(shè)計(jì)更柔和、更易于接受。這種設(shè)計(jì)能夠減少視覺(jué)疲勞，使應(yīng)用界面看起來(lái)更加友好和現(xiàn)代化?！?/div>
  •  
    增強(qiáng)視覺(jué)吸引力
    「圓角卡片因其流線型的外觀，在視覺(jué)上更加吸引用戶。這有助于提升用戶對(duì)應(yīng)用的整體印象和興趣。」
  •  
    組織信息
    「圓角卡片可以有效地將信息分組，如將不同的歌曲、專輯、播放列表等內(nèi)容區(qū)分開(kāi)來(lái)，使得用戶瀏覽和選擇時(shí)更加直觀和方便?！?/div>
  •  
    提升操作便捷性
    「在觸摸屏上，圓角卡片可以提供更好的觸摸目標(biāo)，使得用戶在進(jìn)行選擇和導(dǎo)航時(shí)更加方便?！?/div>
  •  
    增強(qiáng)內(nèi)容的層次感
    「圓角卡片可以通過(guò)陰影、邊框或顏色的變化，為界面添加層次感，使得內(nèi)容更加突出和易于閱讀?！?/div>
  •  
    提升品牌形象
    「現(xiàn)代的界面設(shè)計(jì)往往傾向于使用圓角元素，使用這種設(shè)計(jì)可以使應(yīng)用看起來(lái)更加時(shí)尚，從而提升品牌形象?！?/div>
圓角卡片在提升用戶體驗(yàn)、美化界面、優(yōu)化信息展示和操作便利性等方面發(fā)揮著重要作用。這些設(shè)計(jì)元素有助于提高應(yīng)用的整體吸引力和用戶的使用滿意度。
圓角與直角該如何使用？
 
 
“圓角按鈕”對(duì)于“汽水音樂(lè)”的作用有
  •  
    視覺(jué)焦點(diǎn)「圓角按鈕可以作為視覺(jué)焦點(diǎn)，吸引用戶的注意力，特別是對(duì)于重要的功能，如播放按鈕或搜索按鈕?！?/div>
  •  
    界面美觀性「圓角按鈕增加了界面的美觀性，與整體設(shè)計(jì)風(fēng)格協(xié)調(diào)一致，提升了應(yīng)用的整體視覺(jué)效果?！?/div>
  •  
    一致性和標(biāo)準(zhǔn)化「在應(yīng)用中使用標(biāo)準(zhǔn)化的圓角按鈕可以提高界面的一致性，使用戶更容易理解和使用不同的功能?！?/div>
其實(shí)通過(guò)對(duì)比，我們會(huì)發(fā)現(xiàn)“圓角”在社交、音樂(lè)等偏娛樂(lè)方向采用的更加多，因?yàn)檫@些產(chǎn)品屬性需要“產(chǎn)品與用戶”、“用戶與用戶”之間拉近距離，圓角不僅更容易我們的眼睛處理，而且還使信息更容易處理，圓角很有吸引力。那么“直角”就偏向?qū)I(yè)領(lǐng)域、正式的場(chǎng)合以及一些小眾的產(chǎn)品。

作者：交互設(shè)計(jì)師張楚
來(lái)源：站酷

 

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

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

 

評(píng)論(0) 瀏覽(516)

如何為用戶提供正確的鍵盤輸入類型？

博博

Android和iOS系統(tǒng)都設(shè)計(jì)了針對(duì)特定表單字段的指定鍵盤輸入類型。但大多數(shù)開(kāi)發(fā)人員未能在他們的代碼中指定正確的鍵盤輸入類型。這會(huì)導(dǎo)致移動(dòng)設(shè)備上的表單完成效率變慢。本文以Android平臺(tái)為例。
一、輸入類型并不總是“文本”
大多數(shù)開(kāi)發(fā)人員錯(cuò)誤地將每個(gè)表單字段的輸入類型設(shè)置為“文本”。這存在問(wèn)題，因?yàn)槊總€(gè)表單字段的輸入并不總是純文本。通常都有一些字段要求輸入帶有數(shù)字或字母和數(shù)字組合的信息。當(dāng)用戶嘗試填寫這些字段時(shí)，他們應(yīng)該看到一個(gè)數(shù)字或字母和數(shù)字組合的鍵盤。
不幸的是，當(dāng)每個(gè)字段的輸入類型都設(shè)置為“文本”時(shí)，它會(huì)強(qiáng)制用戶使用文本鍵盤來(lái)輸入數(shù)字或字母和數(shù)字組合，輸入時(shí)舉步維艱，不是誤點(diǎn)，就是需要頻繁切換，輸入體驗(yàn)十分糟糕。
因此，請(qǐng)務(wù)必為每個(gè)表單字段指定輸入類型，以便系統(tǒng)能夠顯示相應(yīng)的鍵盤。除了指定輸入類型，我們還應(yīng)指定相關(guān)行為，例如輸入法是否提供拼寫建議、是否將句子的首字母大寫，以及是否使用“完成”或“下一項(xiàng)”等操作鍵替換“回車”。
輸入類型、行為、操作鍵整理如下：
如何為用戶提供正確的鍵盤輸入類型？
例一. 郵箱地址字段
表單要求用戶提供他們的郵箱地址是很常見(jiàn)的。當(dāng)我們將輸入類型設(shè)置為“郵箱地址”時(shí)，它會(huì)為用戶提供一個(gè)針對(duì)郵箱地址輸入的鍵盤。這個(gè)鍵盤不僅顯示字母，還可以顯示“@”和“.”，用戶可以輕松地輸入他們的郵箱地址。
如何為用戶提供正確的鍵盤輸入類型？
例二. 姓名字段
英文名是專有名詞，英語(yǔ)中專有名詞的第一個(gè)字母要大寫。我們將輸入類型設(shè)置為“人名”，并且設(shè)置單詞首字母大寫。用戶無(wú)需對(duì)英文字母進(jìn)行大小寫切換。
如何為用戶提供正確的鍵盤輸入類型？
二、每個(gè)鍵盤對(duì)輸入類型的反應(yīng)可能不同
案例一：登錄頁(yè)面的密碼輸入
釘釘將密碼框輸入類型設(shè)置為“密碼”。假定密碼為 z0h0a0n0g。
  1. 百度輸入法顯示密碼鍵盤，完成密碼輸入僅需點(diǎn)擊 9 次。
  2. 搜狗輸入法顯示文本鍵盤，用戶需在字母和數(shù)字之間切換，完成輸入需點(diǎn)擊 17 次。也支持長(zhǎng)按第一行的字母輸入數(shù)字。
  3. 微信輸入法顯示文本鍵盤，完成密碼輸入需點(diǎn)擊 17 次。不支持長(zhǎng)按字母輸入數(shù)字。
如何為用戶提供正確的鍵盤輸入類型？
 
案例二：登錄頁(yè)面的手機(jī)號(hào)輸入
釘釘設(shè)置電話號(hào)碼鍵盤右下角為“下一項(xiàng)”按鈕。
  1. 百度輸入法的鍵盤右下角顯示“回車”，用戶完成手機(jī)號(hào)輸入后需手動(dòng)獲取密碼文本框焦點(diǎn)。
  2. 搜狗輸入法的鍵盤右下角顯示“下一項(xiàng)”，用戶完成手機(jī)號(hào)輸入點(diǎn)擊下一項(xiàng)，密碼文本框自動(dòng)獲取焦點(diǎn)。
  3. 微信輸入法的鍵盤右下角顯示“下一項(xiàng)”，用戶完成手機(jī)號(hào)輸入點(diǎn)擊下一項(xiàng)，密碼文本框自動(dòng)獲取焦點(diǎn)。
如何為用戶提供正確的鍵盤輸入類型？
三、Input Type 助力產(chǎn)品輸入體驗(yàn)的提升
通過(guò)應(yīng)用 Input Type 你可以正確的為每個(gè)文本字段設(shè)置特定的輸入類型，以及看到每個(gè)輸入類型（以及輸入類型的組合）如何影響鍵盤。
我最初開(kāi)發(fā)此應(yīng)用是為了促進(jìn)工作中跨部門高效協(xié)同，但我希望通過(guò)此應(yīng)用能夠賦能給更多的人，提升協(xié)同效率的同時(shí)更好的提升產(chǎn)品輸入體驗(yàn)。你可以在這里免費(fèi)下載：
https://www.pgyer.com/vT29
Input Type這個(gè)工具需要安裝在安卓手機(jī)上，如果沒(méi)有安卓手機(jī)可以電腦上安裝一個(gè)網(wǎng)易MuMu安卓模擬器就可以用。
應(yīng)用截圖
 
作者：交互設(shè)計(jì)師張楚
來(lái)源：站酷

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

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

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

評(píng)論(0) 瀏覽(369)

雪球金融社區(qū)平臺(tái)表情圖標(biāo)升級(jí)全紀(jì)錄

博博

在社區(qū)平臺(tái)語(yǔ)境里，表情無(wú)疑是很重要的組成部分。一套豐富且定位準(zhǔn)確的表情可以幫助用戶更清晰地表達(dá)自己的感受，增進(jìn)溝通的準(zhǔn)確性，同時(shí)增添社交互動(dòng)的趣味性，拉進(jìn)用戶之間的距離。帶有平臺(tái)特性的表情更能彰顯平臺(tái)自身的獨(dú)特性。
雪球作為金融社區(qū)平臺(tái)，表情自然也是重要的元素。我們通過(guò)數(shù)據(jù)調(diào)研，發(fā)現(xiàn)雪球社區(qū)互動(dòng)中表情的滲透率達(dá)到18%，表情的使用率比較高。而現(xiàn)有的表情年久失修，存在幾個(gè)比較明顯的問(wèn)題，首先視覺(jué)風(fēng)格陳舊辨識(shí)度低；再有，表情中原本存在一些股票梗的表現(xiàn)力較弱，畫風(fēng)不夠有趣。第三，雪球誕生了新IP“呦呦”，非常適合在表情中應(yīng)用來(lái)推廣雪球品牌特性。
基于以上背景我們展開(kāi)了對(duì)于表情翻新改版的項(xiàng)目。
 
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
 
 
現(xiàn)狀&問(wèn)題
通過(guò)對(duì)當(dāng)前狀況進(jìn)行系統(tǒng)梳理，我們發(fā)現(xiàn)了一些存在的問(wèn)題。
 
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
1.設(shè)計(jì)風(fēng)格陳舊，不易識(shí)別表現(xiàn)力弱：
目前線上雪球表情風(fēng)格老舊，視覺(jué)表達(dá)不符合當(dāng)下設(shè)計(jì)潮流趨勢(shì)；由于表情是白色在行文中表現(xiàn)力不足且不易被用戶識(shí)別，因而趣味性表達(dá)的作用不夠凸顯。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
2.缺乏股票基金場(chǎng)景的情緒表達(dá)
社區(qū)場(chǎng)景中有大量的股票基金的討論和相關(guān)內(nèi)容的情緒表達(dá)，而目前表情體系中缺乏此類表達(dá)或表達(dá)不夠生動(dòng)。
比如「關(guān)燈吃面」和「割肉」，在行文中一眼能識(shí)別到視覺(jué)主體是表情臉，而“吃面”和“割肉”的語(yǔ)義沒(méi)有生動(dòng)的體現(xiàn)出來(lái)；還比如「跳水」又太具象和寫實(shí)，少了表情的趣味性。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
3.沒(méi)有將雪球的新IP融入表情
雪球誕生了新的IP“呦呦”，表情的體系非常適合融入IP向的內(nèi)容，將IP表情化也更利于IP的推廣和品牌的傳播。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
 
 
 
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
視覺(jué)風(fēng)格探索
1.雪球用戶特征
設(shè)計(jì)風(fēng)格需要根據(jù)平臺(tái)用戶特征進(jìn)行確定。開(kāi)始設(shè)計(jì)之前，我們先看看雪球用戶大概是什么樣的。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
雪球的主要用戶為男性且集中在30-50歲左右，所以在視覺(jué)表現(xiàn)上盡量避免女性化或低齡化的風(fēng)格。
2.視覺(jué)風(fēng)格探索
風(fēng)格確定
舊版的表情蒼白，雖然細(xì)節(jié)很多但在行文中難以識(shí)別，本次改版重要任務(wù)之一是改版新的視覺(jué)風(fēng)格。emoji是最被用戶熟知的表情體系，我們決定新版向傳統(tǒng)黃臉emoji表情靠攏。大方向定了，但還需要確定視覺(jué)感受符合雪球的emoji。最后在兩種視覺(jué)風(fēng)格中我們選擇了視覺(jué)感受偏中性、風(fēng)格扁平的這個(gè)方向，這個(gè)風(fēng)格和雪球用戶特征更契合。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
提升辨識(shí)度
表情在交流中作為非文字的“語(yǔ)言”，其辨識(shí)度至關(guān)重要。表情在行文中的尺寸相對(duì)較小和單個(gè)文字差不多，那么如何保證在文字中依然能一眼讀懂表情？
在對(duì)表情整體風(fēng)格的把控下，需要通過(guò)對(duì)細(xì)節(jié)的打磨和反復(fù)實(shí)驗(yàn)，得出更有辨識(shí)度的設(shè)計(jì)方案。保持視覺(jué)扁平，盡量使用簡(jiǎn)潔的幾何圖形，加強(qiáng)顏色對(duì)比度，減少顏色數(shù)量，放大表情特征。通過(guò)以上手段有效的提升了表情的一致性和在行文中的辨識(shí)度。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
 
 
 
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
發(fā)現(xiàn)股民討論語(yǔ)境下的“梗”
本次表情升級(jí)除了對(duì)現(xiàn)有表情進(jìn)行改造升級(jí)，還針對(duì)雪球社區(qū)特色進(jìn)行挖掘。
1.挖掘“梗”
前面我們說(shuō)到雪球用戶是集中在30-50歲左右的男性，那么這類人群在社區(qū)中有怎樣的表達(dá)特點(diǎn)呢？
通過(guò)觀察我們發(fā)現(xiàn)，在面對(duì)股市的波動(dòng)和不確定性，雪球用戶更喜歡用幽默詼諧的論調(diào)來(lái)調(diào)侃市場(chǎng)以宣泄心中的無(wú)奈和負(fù)面情緒，同時(shí)在波動(dòng)面前展現(xiàn)出一種堅(jiān)韌和自嘲的心態(tài)。我們可以在這種“戲謔調(diào)侃”中挖掘可以視覺(jué)化的情緒和表情。以此作為本次表情升級(jí)的一個(gè)重要方向。
戲謔調(diào)侃的表情有哪些呢？我們挖掘了當(dāng)下網(wǎng)絡(luò)社交流行的表情包和熱詞?；叵胍幌挛覀兪欠褚步?jīng)常使用類似“地鐵老人看手機(jī)”“黑人問(wèn)號(hào)臉”等網(wǎng)絡(luò)熱圖來(lái)表達(dá)內(nèi)心的復(fù)雜情緒呢。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
在變幻莫測(cè)的股市中，面對(duì)現(xiàn)實(shí)的無(wú)力和不確定，祈福求平靜成了股民表達(dá)情緒舒緩心情的一種方式，比如“敲木魚(yú)”“祈求大漲”等儀式感的情境以表情的方式呈現(xiàn)，也能一定程度上引起用戶的共鳴。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
2.讓表情“淋漓盡致”
  • 微表情盡顯“內(nèi)心戲”
一個(gè)表情里往往蘊(yùn)含不只一種情感，短暫而難以察覺(jué)的面部變化最能傳達(dá)個(gè)體真實(shí)的情感狀態(tài)，一個(gè)眼神、嘴唇微動(dòng)等細(xì)微變化，常常表達(dá)出個(gè)體內(nèi)在的真實(shí)狀態(tài)。
在設(shè)計(jì)“大哭”這個(gè)表情時(shí)，我們挖掘到大哭背后可能是某種“絕望”，那么觀察下人們絕望時(shí)最大的面部特點(diǎn)是不是空洞的眼神和僵硬的臉？用這樣的微表情和大哭結(jié)合在一起，感受大哭情緒的同時(shí)也傳遞了絕望的內(nèi)心戲。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
  • 賺了、虧了一目了然
股票社區(qū)中漲跌是永遠(yuǎn)的話題，市場(chǎng)的漲跌背后牽動(dòng)著的是股民們真金白銀的賬戶。“虧大了”和“暴富”這兩個(gè)表情很生動(dòng)的表達(dá)了用戶盈虧的兩種處境，但原有表情的視覺(jué)表達(dá)過(guò)于保守和隱晦。要讓用戶一眼看到就產(chǎn)生共鳴，紅綠色是最直觀的漲跌信號(hào)，我們把這種語(yǔ)義和表情結(jié)合，“虧大了”除了表情沮喪還得加點(diǎn)綠色烘托氛圍，“暴富”的喜悅中再加上紅包加持情緒。
 
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
  • 戲劇化表達(dá)
在某些極端情緒上我們還嘗試打破舊表情的禁錮，用更加生動(dòng)夸張的方式呈現(xiàn)。比如“絕望”，只靠面部表情似乎無(wú)法充分的表達(dá)，所以我們營(yíng)造了簡(jiǎn)單的環(huán)境和肢體動(dòng)作， 一個(gè)癱在墻角雙目無(wú)神的小黃臉，絕望的形象躍然紙上。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
3.股票專屬“梗”
雪球社區(qū)里有一些獨(dú)特的表情，比如“關(guān)燈吃面”，它是雪球老用戶傳承的經(jīng)典梗；還有諸如跳水、割肉、抄底、滿倉(cāng)等股票術(shù)語(yǔ)梗也頗受歡迎。升級(jí)優(yōu)化這類表情的同時(shí)我們小開(kāi)腦洞在原有基礎(chǔ)上增加了“好基友”等新梗，讓股民表達(dá)更豐富有趣。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
 
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
IP表情化
去年雪球誕生了自己的IP“YOYO”，此次表情升級(jí)正好可以將IP表情化，在平臺(tái)應(yīng)用和傳播。
YOYO所代表的品牌語(yǔ)義
1.福祿壽：因其原型是馴鹿，取福祿壽之意，代表財(cái)富；
2.溫暖陪伴&服務(wù)感：馴鹿具備天生的陪伴和服務(wù)感，與雪球強(qiáng)調(diào)的品牌服務(wù)感相契合。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
YOYO品牌語(yǔ)義表情化
根據(jù)YOYO的兩種品牌語(yǔ)義，我們分別開(kāi)腦洞。
哪些意向和財(cái)富相關(guān)呢？我們找到“錦鯉”“招財(cái)貓”“金元寶”，這些元素和表情相結(jié)合形成財(cái)富類表達(dá)；那么陪伴和服務(wù)感我們使用“抱抱”、“打call”這類溫暖鼓勵(lì)意向的肢體語(yǔ)言來(lái)和YOYO結(jié)合傳達(dá)。
XDC干貨｜雪球表情升級(jí)全紀(jì)錄
 
 
作者：雪球設(shè)計(jì)中心XDC
來(lái)源：站酷

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

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

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

 

評(píng)論(0) 瀏覽(343)

從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計(jì)的思路與技巧

博博

 一般來(lái)說(shuō)做交互鏈路優(yōu)化的核心價(jià)值或是目標(biāo)就那么幾個(gè)；
一、更好用
即更加高效便捷好用的意思，這短短三個(gè)字就直接包含了大家常掛在嘴邊的易用性、可用性啥的了，好的交互就應(yīng)該是盡可能的為用戶提供簡(jiǎn)單好用的交互，舉個(gè)例子，近期在使用阿里云Flow的流水線，期間我也用過(guò)其他家的CI/CD服務(wù)，相比之下我覺(jué)得阿里云Flow的流水線編排反饋就做的更勝一籌，“更方便”加一分
  
二、更準(zhǔn)確
意味著為用戶提供正確的服務(wù)、流程、功能、組件、信息反饋乃至視覺(jué)效果，為的是提升產(chǎn)品的可理解與易用性，從而達(dá)到降低學(xué)習(xí)成本提升效用，減少跳失率或出錯(cuò)等負(fù)面情況
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計(jì)的思路與技巧
 
三、提升意愿
嗯！花費(fèi)那么多心思讓產(chǎn)品體驗(yàn)變得更方便更準(zhǔn)確就是為了提升用戶的使用或付費(fèi)意愿，算是任務(wù)路徑優(yōu)化設(shè)計(jì)的底層價(jià)值吧。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計(jì)的思路與技巧
 
 
階段流程與焦點(diǎn)
整體我們可以劃分為優(yōu)化前、優(yōu)化中、優(yōu)化后三個(gè)階段，對(duì)應(yīng)到三個(gè)階段中，對(duì)應(yīng)的工作流程基本由問(wèn)題定位、優(yōu)化目標(biāo)、方案構(gòu)思、方案驗(yàn)證、持續(xù)改進(jìn)構(gòu)成，然后根據(jù)階段與流程我會(huì)把相關(guān)的優(yōu)化焦點(diǎn)與鏈路優(yōu)化的關(guān)系交代清楚，算是清晰一下鏈路優(yōu)化工作整體思路與每個(gè)階段的工作事項(xiàng)。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計(jì)的思路與技巧
 
 
優(yōu)化前的焦點(diǎn)
以我們B端SaaS產(chǎn)品的優(yōu)化設(shè)計(jì)為例，焦點(diǎn)可以簡(jiǎn)單的鎖定在用戶、產(chǎn)品、業(yè)務(wù)場(chǎng)景三大層面，我們會(huì)關(guān)注這三個(gè)因素中帶來(lái)的反饋來(lái)找到和定位問(wèn)題，最終解決掉用戶痛點(diǎn)或是觸成業(yè)務(wù)目標(biāo)，具體點(diǎn)可以拆分出以下焦點(diǎn)事項(xiàng)；
目標(biāo)用戶
需要關(guān)心產(chǎn)品目標(biāo)用戶的特征，他們是收益的來(lái)源也是市場(chǎng)構(gòu)成的部分，作為產(chǎn)品的經(jīng)理或業(yè)務(wù)設(shè)計(jì)師，肯定是對(duì)預(yù)期的目標(biāo)用戶有所了解才對(duì)，特別是初期型產(chǎn)品；當(dāng)積攢了一定用戶量后，就會(huì)開(kāi)始關(guān)注基于數(shù)據(jù)或定性研究得到的用戶畫像信息，并通過(guò)這些更準(zhǔn)確的用戶畫像來(lái)了解目標(biāo)市場(chǎng)和進(jìn)行業(yè)務(wù)設(shè)計(jì)決策，而不只是對(duì)著市面上競(jìng)品抄作業(yè)罷了。
這過(guò)程中你至少要弄明白五個(gè)問(wèn)題；
1、用戶的需求是什么？
2、用戶使用的場(chǎng)景跟行為大致如何？
3、我們的用戶有何偏好或特征？
4、用戶通常還會(huì)用到哪些競(jìng)品？
5、用戶有哪些反饋值得注意？
 
服務(wù)體系
主要是產(chǎn)品本身的服務(wù)體系或業(yè)務(wù)邏輯相關(guān)，前面提到了用戶畫像或分層的一些概念，
實(shí)際上現(xiàn)在的互聯(lián)網(wǎng)產(chǎn)品中，服務(wù)體系或是用戶角色都不會(huì)很單一，用戶角色、權(quán)益身份、服務(wù)場(chǎng)景等等都有差異，設(shè)計(jì)前的差異化背景或權(quán)重厘清就很重要，至少要清楚當(dāng)前優(yōu)化的服務(wù)線路是為那些人，他們有哪些差異、有哪些狀態(tài)情景、有哪些交互要兼容或避錯(cuò)。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計(jì)的思路與技巧
 
業(yè)務(wù)場(chǎng)景
我們關(guān)注產(chǎn)品、關(guān)注用戶，同時(shí)也關(guān)注他們之間發(fā)生了什么樣的化學(xué)反應(yīng)，所以業(yè)務(wù)場(chǎng)景必定是本階段中的一大焦點(diǎn)，通過(guò)業(yè)務(wù)場(chǎng)景可以洞察到更多用戶實(shí)際遇到或潛在的痛點(diǎn)，以及線上線下等環(huán)境帶來(lái)的微小差異性，至于如何實(shí)踐了，我們可以通過(guò)觀察不同類型的用戶是如何使用產(chǎn)品，或是與用戶對(duì)話分析來(lái)獲取優(yōu)化指引，哪里用戶卡住了或是吐槽了那就表明有優(yōu)化空間，這應(yīng)該算是任務(wù)鏈路優(yōu)化的基礎(chǔ)焦點(diǎn)了吧。
實(shí)際業(yè)務(wù)場(chǎng)景中我們常關(guān)注的點(diǎn)
1、用戶：用戶本身有什么特征屬性值得我們關(guān)注？
2、情景：用戶出于什么背景原因或目標(biāo)在什么時(shí)機(jī)進(jìn)入該場(chǎng)景？
2、行為：用戶進(jìn)入場(chǎng)景后要做什么或做了些什么？是否做的順暢？
3、結(jié)果：用戶是否達(dá)成目標(biāo)？未達(dá)成或達(dá)成受阻的原因是什么？
4、反饋：用戶吐槽或建議了些什么，我們獲取了哪些有效的改善訊息？
 
優(yōu)化中的焦點(diǎn)
這個(gè)階段中，我們的主要工作可以概括為分析問(wèn)題、解決問(wèn)題、驗(yàn)證問(wèn)題，其中焦點(diǎn)可能會(huì)比較多，這里我挑了一些說(shuō)一下；
需求分析
結(jié)合前面階段中的場(chǎng)景化來(lái)還原問(wèn)題是什么情景下怎么發(fā)生的，產(chǎn)生了什么樣的負(fù)面影響，這很重要，我們需要知道用戶的業(yè)務(wù)訴求是什么，造成出錯(cuò)原因是什么，產(chǎn)生了多大的影響，以及用戶期望的是怎樣，然后就是如何更好的滿足用戶訴求，同時(shí)保障企業(yè)的利益，這就是需求分析要做的事情；
交互媒介
主要是考慮復(fù)雜且涉及多方媒介的業(yè)務(wù)場(chǎng)景，要思考這些媒介或端怎么配合用戶完成任務(wù)，以什么樣的形式進(jìn)行交互。就例如哈羅單車的，不僅是要經(jīng)過(guò)手機(jī)的交互，還有單車的傳感器與數(shù)據(jù)交互等，事實(shí)上一套完整的服務(wù)正是由這些媒介之間的不斷交互，才使得哈羅的租賃服務(wù)可以如此靈活，所以在整個(gè)服務(wù)流程中讓媒介之間更智能、自動(dòng)、高效的完成銜接與交互，就成了必要的焦點(diǎn)了，如果說(shuō)你認(rèn)為這是多余或無(wú)效的部分，那么很有可能說(shuō)明你所處在的產(chǎn)品服務(wù)構(gòu)成還不算復(fù)雜，但這不能否定掉交互媒介的重要性。
這個(gè)過(guò)程中，你至少要清楚服務(wù)完成要經(jīng)過(guò)哪些端、那些人、哪些條件、哪些信息構(gòu)成。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計(jì)的思路與技巧
 
 
信息構(gòu)成
幾乎進(jìn)行任何服務(wù)都離不開(kāi)特定的構(gòu)成信息交互；舉個(gè)最簡(jiǎn)單的例子，晚上你來(lái)到街邊攤，想要一份烤冷面，那么你除了要掏錢以外，你還要跟老板確認(rèn)口味、加料、價(jià)格這些信息，這些就是構(gòu)成任務(wù)進(jìn)程的信息，這些信息可以通過(guò)問(wèn)答式確認(rèn)，也可以提供招牌信息給食客確認(rèn)
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計(jì)的思路與技巧
總之將這些信息更簡(jiǎn)練準(zhǔn)確的進(jìn)行交互或傳達(dá)，就能實(shí)現(xiàn)任務(wù)鏈路的優(yōu)化，事實(shí)上應(yīng)用程序本身就是由各種各樣的信息交織在一起所構(gòu)成，所以“做任務(wù)鏈路優(yōu)化不僅是減少操作步驟而已”。
 
業(yè)務(wù)模型
可以簡(jiǎn)單易懂的幫助我們理解和消化業(yè)務(wù)，以及更好協(xié)同，面對(duì)復(fù)雜的任務(wù)流程，可以更好的表達(dá)或梳理業(yè)務(wù)概念與全局結(jié)構(gòu)，在做復(fù)雜的任務(wù)優(yōu)化時(shí)，就不容易被局部問(wèn)題牽著鼻子走，而忽略其他影響面，說(shuō)的直白點(diǎn)，就是這個(gè)業(yè)務(wù)的整體過(guò)程你腦子里要有個(gè)概念，制作方法其實(shí)就是將各個(gè)業(yè)務(wù)或任務(wù)拆解成多個(gè)單元的形式，并將單元之間的包含或?qū)蛹?jí)關(guān)系表達(dá)出來(lái)
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計(jì)的思路與技巧
 
 
研發(fā)能力
需要考慮技術(shù)實(shí)現(xiàn)的周期與成本，即開(kāi)發(fā)是否可以實(shí)現(xiàn)，需要研發(fā)多久，要投入多少成本，我相信產(chǎn)品經(jīng)理都會(huì)關(guān)心這個(gè)問(wèn)題，其實(shí)就是投資回報(bào)率與可行性的問(wèn)題，產(chǎn)品生產(chǎn)研發(fā)的本質(zhì)是賺錢不是虧錢，不是嗎？
例如說(shuō)你看見(jiàn)了一個(gè)很酷炫的交互效果，也準(zhǔn)備應(yīng)用到自家的產(chǎn)品中，但實(shí)際開(kāi)發(fā)的難度大不大，要投入多少時(shí)間精力，這個(gè)酷炫的交互又能帶了多少產(chǎn)品收益？所以研發(fā)實(shí)現(xiàn)能力在方案設(shè)計(jì)的過(guò)程中還是要考慮的。
 
測(cè)試反饋
方案落地前，進(jìn)行一定的內(nèi)部測(cè)試或評(píng)審是很有必要的，介于還沒(méi)有完成開(kāi)發(fā)上線，可以在優(yōu)化方案出來(lái)后通過(guò)Demo的方式找人進(jìn)行測(cè)試反饋，一般自測(cè)走查只是第一環(huán)，有不確定的一定要拉上其他人一起研討評(píng)審一番，如果要找人測(cè)試的話，其實(shí)只要設(shè)定好合適的任務(wù)與目標(biāo)，還原出真實(shí)用戶碰到問(wèn)題的任務(wù)過(guò)程即可，接著就是觀察測(cè)試者是如何使用Demo的，你的新方案是否奏效我想你知道怎么去衡量，就不贅述了。
 
優(yōu)化后的焦點(diǎn)
優(yōu)化后階段我們主要關(guān)注是否優(yōu)化了個(gè)寂寞，是不是又優(yōu)化出了新問(wèn)題，優(yōu)化后還有哪些收尾工作，關(guān)聯(lián)的需求池與迭代規(guī)劃怎么安排。
數(shù)據(jù)采集準(zhǔn)備
當(dāng)一個(gè)方案被投入到生產(chǎn)環(huán)境中，我們卻無(wú)法得知是否比舊的方案更好，這種情況是很糟糕的，故我們?cè)谛碌姆桨竿瞥龅耐瑫r(shí)，一定要保障有辦法收集到有效的用戶反饋，這個(gè)過(guò)程我們可以是采用AB測(cè)試、數(shù)據(jù)埋點(diǎn)監(jiān)測(cè)、灰度采樣、用戶使用性測(cè)試等，這都是我們實(shí)際工作中采用的有效手段。
效果對(duì)比
始于數(shù)據(jù)采集，采集后自然是與原始版本的效果進(jìn)行比對(duì)，確認(rèn)新的版本是有效可靠的，能被用戶認(rèn)可采納的，同時(shí)也能發(fā)現(xiàn)新的問(wèn)題反饋，這需要進(jìn)一步的跟進(jìn)與規(guī)劃，這是個(gè)重點(diǎn)環(huán)節(jié)。
需求規(guī)劃
原始問(wèn)題是否圓滿結(jié)束，是否有新的問(wèn)題待解決，是否需要分批開(kāi)發(fā)上線或驗(yàn)證，調(diào)整后其他部分是否需要配合改造，這一系列問(wèn)題將迫使我們持續(xù)改進(jìn)，并將流程再一次的接軌到優(yōu)化前階段。
 
AI告訴我的焦點(diǎn)˜
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計(jì)的思路與技巧
 
 

作者：泡泡_PAO
來(lái)源：站酷

 

 

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

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

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

軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

 

評(píng)論(0) 瀏覽(379)

向用戶請(qǐng)求權(quán)限的正確方式

博博

 

權(quán)限的目的是保護(hù)用戶隱私，那么在何時(shí)以及用什么方式請(qǐng)求用戶權(quán)限會(huì)是比較合適的？本文將詳細(xì)介紹Android的運(yùn)行時(shí)權(quán)限模型，并展示設(shè)計(jì)一個(gè)UX來(lái)請(qǐng)求你的應(yīng)用程序所需的權(quán)限，希望對(duì)你有所啟發(fā)。
從Android 6.0開(kāi)始，沒(méi)有在安裝時(shí)請(qǐng)求所有權(quán)限，而是引入了運(yùn)行時(shí)權(quán)限模型，開(kāi)發(fā)者可以控制應(yīng)用何時(shí)以及如何請(qǐng)求權(quán)限。這如同你想邀某人出去約會(huì)，過(guò)早、過(guò)頻繁或以錯(cuò)誤的方式對(duì)你來(lái)說(shuō)并不好。
本文我將詳細(xì)介紹Android的運(yùn)行時(shí)權(quán)限模型，并向你展示如何設(shè)計(jì)一個(gè)UX來(lái)請(qǐng)求你的應(yīng)用程序所需的權(quán)限。權(quán)限的目的是保護(hù)用戶的隱私，但當(dāng)你請(qǐng)求權(quán)限時(shí)，你是在要求用戶放棄一點(diǎn)隱私，因此，你需要提供明確且平等的利益以換取訪問(wèn)。運(yùn)行時(shí)權(quán)限允許你在用戶更了解你請(qǐng)求權(quán)限的原因和授予權(quán)限的好處時(shí)選擇合適的時(shí)間請(qǐng)求權(quán)限。Android實(shí)現(xiàn)它們的方式使得以正確的方式請(qǐng)求它們變得十分重要。
運(yùn)行時(shí)權(quán)限模型有利于保護(hù)用戶的隱私，當(dāng)你的應(yīng)用程序請(qǐng)求權(quán)限時(shí)，Android會(huì)顯示一個(gè)對(duì)話框讓用戶接受或拒絕它，第一次請(qǐng)求權(quán)限時(shí)對(duì)話框不會(huì)顯示“不再詢問(wèn)”復(fù)選框，只會(huì)在用戶至少一次拒絕權(quán)限請(qǐng)求后顯示它，你可以檢查之前是否被拒絕過(guò)，并明智的決定在何時(shí)提供更多教育。
向用戶請(qǐng)求權(quán)限的正確方式
從Android 11開(kāi)始，如果用戶在使用應(yīng)用的過(guò)程中多次拒絕某項(xiàng)特定的權(quán)限，那么在你的應(yīng)用再次請(qǐng)求該權(quán)限時(shí)，用戶將不會(huì)看到系統(tǒng)權(quán)限對(duì)話框。該操作表示用戶希望“不再詢問(wèn)”。
你無(wú)需過(guò)度防御，例如在實(shí)際請(qǐng)求權(quán)限之前你始終通過(guò)預(yù)許可（預(yù)授權(quán)）來(lái)衡量用戶授予權(quán)限的可能性，本質(zhì)上是請(qǐng)求兩次，這種雙重提示可能是不必要且煩人的，你可以通過(guò)在正確的時(shí)間以正確的方式詢問(wèn)來(lái)達(dá)到同樣的效果。
Material Design分解了在兩個(gè)維度上請(qǐng)求權(quán)限的不同方法。首先權(quán)限對(duì)你的應(yīng)用程序的運(yùn)行有多重要？其次，你請(qǐng)求它的原因有多清晰？根據(jù)這兩個(gè)因素，建議你采用不同的方法來(lái)請(qǐng)求權(quán)限。
向用戶請(qǐng)求權(quán)限的正確方式
預(yù)先請(qǐng)求權(quán)限（Ask up-front）
如果某項(xiàng)權(quán)限對(duì)應(yīng)用程序運(yùn)行至關(guān)重要，并且顯而易見(jiàn)為什么需要請(qǐng)求它。例如日歷應(yīng)用，拒絕日歷權(quán)限會(huì)使應(yīng)用程序無(wú)法運(yùn)行，并且用戶顯然知道日歷應(yīng)用的用途以及請(qǐng)求日歷權(quán)限的原因，因此
不需要用任何不必要的解釋來(lái)打擾用戶，只需在用戶首次啟動(dòng)應(yīng)用時(shí)立即請(qǐng)求它即可。
向用戶請(qǐng)求權(quán)限的正確方式
預(yù)先教育（Educate up-front）
如果某項(xiàng)權(quán)限對(duì)應(yīng)用至關(guān)重要，但請(qǐng)求它的原因不是很清晰。例如信貸應(yīng)用，為了準(zhǔn)確評(píng)估用戶的信貸資格、償還能力和防范反欺詐，通訊錄權(quán)限、通話記錄權(quán)限、位置權(quán)限對(duì)于風(fēng)控而言非常重要，建議請(qǐng)求權(quán)限之前對(duì)用戶進(jìn)行教育。
向用戶請(qǐng)求權(quán)限的正確方式
使用場(chǎng)景中請(qǐng)求權(quán)限（Ask in context）
如果應(yīng)用中的某項(xiàng)次要功能需要權(quán)限，但請(qǐng)求它的原因很清晰，建議你在使用場(chǎng)景中請(qǐng)求權(quán)限。例如筆記應(yīng)用允許用戶使用語(yǔ)音或音頻創(chuàng)建筆記，那么很明顯為什么此功能需要麥克風(fēng)權(quán)限，無(wú)需過(guò)早的請(qǐng)求它，以免用戶負(fù)擔(dān)過(guò)重，最好等到用戶嘗試使用該功能時(shí)，因?yàn)橛脩舾锌赡茉试S符合其預(yù)期的權(quán)限請(qǐng)求。
向用戶請(qǐng)求權(quán)限的正確方式
結(jié)合使用場(chǎng)景進(jìn)行教育（Educate in context）
如果應(yīng)用中的某項(xiàng)次要功能需要權(quán)限，并且請(qǐng)求他的原因不是很清晰，建議你結(jié)合使用場(chǎng)景進(jìn)行教育。例如筆記應(yīng)用允許用戶與朋友協(xié)作，那么請(qǐng)求聯(lián)系人權(quán)限可能是合理的，但它不是顯而易見(jiàn)的，當(dāng)用戶調(diào)用該功能時(shí)，解釋應(yīng)用獲得聯(lián)系人權(quán)限后可為用戶提供哪些好處，比如自動(dòng)填充郵件地址，然后才請(qǐng)求聯(lián)系人權(quán)限讓用戶授予它。
向用戶請(qǐng)求權(quán)限的正確方式
處理權(quán)限請(qǐng)求遭拒情況
通過(guò)使用正確的方法，用戶應(yīng)該清楚應(yīng)用請(qǐng)求權(quán)限的原因以及應(yīng)用獲得權(quán)限后可以為他們提供哪些好處。然而，這并不意味著用戶一定會(huì)授予權(quán)限。如果用戶拒絕了權(quán)限請(qǐng)求，建議采用以下做法：
  • 在應(yīng)用界面中突出顯示因?yàn)闆](méi)有獲得特定權(quán)限而受限的功能所在的具體部分，例如在原本用于顯示該功能的結(jié)果或數(shù)據(jù)的位置顯示一條消息，讓用戶知道因缺少權(quán)限而無(wú)法使用該功能，幫助用戶在權(quán)限和功能之間建立心理聯(lián)系。
  • 不要阻止界面顯示，不要全屏警告消息，讓用戶根本無(wú)法繼續(xù)使用應(yīng)用。即使在權(quán)限請(qǐng)求拒后，應(yīng)用也應(yīng)盡可能提供最佳的用戶體驗(yàn)。例如即使麥克風(fēng)使用權(quán)限請(qǐng)求遭拒，仍應(yīng)全面提高文本功能的易用性。
  • 用戶可能已經(jīng)選中了“不再詢問(wèn)“復(fù)選框，應(yīng)用可能會(huì)在用戶未看到權(quán)限請(qǐng)求對(duì)話框的情況下受到拒絕，此時(shí)應(yīng)用應(yīng)該提供一個(gè)鏈接，鏈接到設(shè)備設(shè)置中用戶可以打開(kāi)權(quán)限的具體位置。
盡量減少權(quán)限請(qǐng)求
在應(yīng)用中聲明權(quán)限之前，請(qǐng)先考慮是否需要這樣做，或者是否有替代方法可以在應(yīng)用中支持該功能。因?yàn)槿绻麘?yīng)用聲明權(quán)限，那么每當(dāng)用戶使用需要運(yùn)行時(shí)權(quán)限的功能時(shí)，應(yīng)用便不得不中斷用戶的操作，請(qǐng)求相應(yīng)權(quán)限。然后，用戶必須做出決定。如果用戶不能理解您的應(yīng)用為何請(qǐng)求特定權(quán)限，可能就會(huì)拒絕授予該權(quán)限，甚至卸載應(yīng)用。
下面介紹幾個(gè)可以在不聲明任何權(quán)限的情況下實(shí)現(xiàn)的用例：
拍攝照片/錄制視頻
Android為應(yīng)用提供了相互通信的功能，讓你可以將任務(wù)委托給其他應(yīng)用。例如，如果你希望允許用拍照，但它不是應(yīng)用的核心部分，可以考慮使用Intent請(qǐng)求相機(jī)應(yīng)用拍攝照片并將其分享給你的應(yīng)用，這樣就不需要CAMERA權(quán)限。
自動(dòng)輸入動(dòng)態(tài)短信驗(yàn)證碼
雙因素身份驗(yàn)證流程中，動(dòng)態(tài)短信驗(yàn)證碼作為第二校驗(yàn)因素時(shí)，使用SMS Retriever API（短信檢索器）可以讓應(yīng)用自動(dòng)執(zhí)行用戶身份驗(yàn)證，不需要用戶手動(dòng)輸入驗(yàn)證碼，不需要READ_SMS權(quán)限。  
 
作者：交互設(shè)計(jì)師張楚
來(lái)源：站酷
 

 

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

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

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

軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

評(píng)論(0) 瀏覽(383)

如何提高設(shè)計(jì)還原質(zhì)量和驗(yàn)收效率？

博博

最近我們做了一次全新改版的項(xiàng)目。作為此次項(xiàng)目的設(shè)計(jì)師，從項(xiàng)目的前期分析、設(shè)計(jì)、交付開(kāi)發(fā)、驗(yàn)收上線，整個(gè)流程，在項(xiàng)目走查驗(yàn)收階段我們?cè)O(shè)計(jì)師投入了30人/天！占了設(shè)計(jì)師整體投入的50%！在我們覺(jué)得應(yīng)該設(shè)計(jì)投入最少的階段，卻占了我們大量的工作 且最后還原度也遠(yuǎn)不達(dá)預(yù)期。
在這個(gè)項(xiàng)目中我遇到了哪些問(wèn)題：
通用組件更改困難
驗(yàn)收過(guò)程反復(fù)、低效
技術(shù)設(shè)計(jì)沒(méi)有達(dá)成共識(shí)，技術(shù)對(duì)交互體驗(yàn)層面和視覺(jué)層面的問(wèn)題敏感度很低
還原問(wèn)題反饋不及時(shí)，有些問(wèn)題項(xiàng)目后期驗(yàn)收的時(shí)候才暴露
前期對(duì)還原度工作評(píng)估不準(zhǔn)確，導(dǎo)致后期發(fā)現(xiàn)問(wèn)題 來(lái)不及修改
還原問(wèn)題不單單是設(shè)計(jì)師把設(shè)計(jì)稿做的多精準(zhǔn)，標(biāo)注的多仔細(xì)，這么簡(jiǎn)單就能解決的。是設(shè)計(jì)和開(kāi)發(fā)，團(tuán)隊(duì)之間的合作共識(shí)問(wèn)題。我把整個(gè)和開(kāi)發(fā)對(duì)接工作分為前中后三個(gè)階段，在這里從頭來(lái)梳理一下，聊一聊設(shè)計(jì)師和開(kāi)發(fā)如何高效對(duì)接，也是對(duì)自己的一次復(fù)盤總結(jié)。
如何提高設(shè)計(jì)還原質(zhì)量和驗(yàn)收效率？
一、評(píng)審/排期
1.1、設(shè)計(jì)師對(duì)還原的要求宣講
在評(píng)審環(huán)節(jié)，設(shè)計(jì)師本人一定要將自己的設(shè)計(jì)稿進(jìn)行宣講、幫助開(kāi)發(fā)理解。注意給技術(shù)講述一些適配要求、設(shè)計(jì)規(guī)范、交互狀態(tài)及動(dòng)效等，同時(shí)解答技術(shù)同學(xué)的一些疑問(wèn)，這樣就能將一些可預(yù)見(jiàn)的問(wèn)題解決掉，解決后期的溝通成本。
有一些地方有多種實(shí)現(xiàn)方式，如果前期沒(méi)有跟開(kāi)發(fā)溝通清楚，就會(huì)導(dǎo)致最終實(shí)現(xiàn)的效果存在誤差，比如：下方這個(gè)tab項(xiàng)，單給一張圖，開(kāi)發(fā)根本不知道設(shè)計(jì)師想要的實(shí)現(xiàn)方式是什么，固定間距還是固定菜單寬度，還是每項(xiàng)平分寬度，最后很大可能就會(huì)按照自己的理解去做了，導(dǎo)致出現(xiàn)重復(fù)返工的現(xiàn)象
如何提高設(shè)計(jì)還原質(zhì)量和驗(yàn)收效率？
再比如一些點(diǎn)擊熱區(qū)，如果不手動(dòng)標(biāo)明，有可能就做的很小
下圖是我們手動(dòng)標(biāo)注的熱區(qū)
如何提高設(shè)計(jì)還原質(zhì)量和驗(yàn)收效率？
1.2、實(shí)際開(kāi)發(fā)者要參與評(píng)審
每個(gè)開(kāi)發(fā)負(fù)責(zé)的具體頁(yè)面模塊不一樣，別人對(duì)具體了解程度也不會(huì)不一致，所以在評(píng)審會(huì)議上，一定要具體開(kāi)發(fā)者在場(chǎng)，如果對(duì)應(yīng)開(kāi)發(fā)沒(méi)有發(fā)表意見(jiàn)，設(shè)計(jì)師可詢問(wèn)，確保他已經(jīng)理解需求。
1.3、開(kāi)發(fā)充分評(píng)估還原工作問(wèn)題
設(shè)計(jì)師在講解自己的要求后，開(kāi)發(fā)也要及時(shí)反饋是否有還原困難，如：是否有技術(shù)限制？是否有組件改動(dòng)困難（牽一發(fā)而動(dòng)全身）？實(shí)現(xiàn)成本過(guò)高（投入產(chǎn)出的性價(jià)比不夠）？等意見(jiàn)和原因，設(shè)計(jì)師也可拋出之前是否遇到過(guò)類似的阻礙，幫助開(kāi)發(fā)去了解。
1.4、認(rèn)真記會(huì)議紀(jì)要
評(píng)審過(guò)程的問(wèn)題和重要講解點(diǎn)，一定要記錄下來(lái)，會(huì)議中開(kāi)發(fā)提出的一些問(wèn)題及解決方案、或者沒(méi)有達(dá)成共識(shí)的地方，記錄下來(lái)等領(lǐng)導(dǎo)決策，在會(huì)議結(jié)束后以郵件形式、或wiki文檔發(fā)送前端們，抄送產(chǎn)品，確保會(huì)議內(nèi)容的傳達(dá)到位。后面也好跟蹤。
還有一點(diǎn)就是，我們之前遇到的情況，在宣講會(huì)上 講解的一些要求，開(kāi)發(fā)在做的時(shí)候可能就忘記了，讓開(kāi)發(fā)改他認(rèn)為設(shè)計(jì)沒(méi)有明確要求、會(huì)有點(diǎn)難推動(dòng)，就會(huì)搞得雙方都有抱怨。有會(huì)議記錄也可避免此類情況發(fā)生
二、開(kāi)發(fā)階段
2.1、還原有問(wèn)題及時(shí)反饋
在前面我們做了詳盡的溝通和評(píng)審，但有時(shí)也避免不了在開(kāi)發(fā)過(guò)程有些問(wèn)題才發(fā)現(xiàn)暴露。這個(gè)就需要開(kāi)發(fā)同學(xué)能重視還原問(wèn)題，積極溝通反饋，和設(shè)計(jì)確認(rèn)商議 是否有其它可替代方案，切勿自己發(fā)揮，等到后期驗(yàn)收的時(shí)候才說(shuō)出問(wèn)題可能會(huì)影響進(jìn)度。
?2.2、開(kāi)發(fā)完成后對(duì)齊設(shè)計(jì)稿自查
開(kāi)發(fā)者在完成自己負(fù)責(zé)的模塊界面時(shí)，可自己對(duì)齊設(shè)計(jì)稿自查一遍，參考【3.1驗(yàn)收標(biāo)準(zhǔn)】的表格，可幫助判斷問(wèn)題，在此階段也可發(fā)給設(shè)計(jì)者確認(rèn)效果。
三、驗(yàn)收階段
如何提高設(shè)計(jì)還原質(zhì)量和驗(yàn)收效率？
3.1、測(cè)試同學(xué)確保交互和視覺(jué)還原度至少在70%左右
這里可以提前在項(xiàng)目排期階段，設(shè)計(jì)師將所需的驗(yàn)收工時(shí)同步給技術(shù)和測(cè)試，將驗(yàn)收時(shí)間考慮進(jìn)去
為什么要求測(cè)試同學(xué)保證還原度至少在70%呢？
因?yàn)槿绻灰鬁y(cè)試走查還原度，設(shè)計(jì)驗(yàn)收的時(shí)候就會(huì)有大量的問(wèn)題，最后變成設(shè)計(jì)在測(cè)試界面而不是驗(yàn)收。設(shè)計(jì)師不像測(cè)試對(duì)整個(gè)流程的測(cè)試配置那么熟悉方便，反復(fù)驗(yàn)收需要測(cè)試和設(shè)計(jì)不斷配合，雙方的工作量都會(huì)加大。
理想的狀態(tài)應(yīng)該是測(cè)試整個(gè)流程走通，視覺(jué)和交互還原問(wèn)題也要著重測(cè)試，設(shè)計(jì)和產(chǎn)品在測(cè)試沒(méi)什么大問(wèn)題后再進(jìn)行驗(yàn)收。
參考【驗(yàn)收標(biāo)準(zhǔn)】的表格，可幫助判斷還原問(wèn)題
如何提高設(shè)計(jì)還原質(zhì)量和驗(yàn)收效率？
3.2、明確知道模塊的開(kāi)發(fā)者
最好是提前知道模塊的開(kāi)發(fā)者，這樣驗(yàn)收的時(shí)候一對(duì)一進(jìn)行模塊的打版驗(yàn)收效率更高
3.3、設(shè)計(jì)走查問(wèn)題標(biāo)注優(yōu)先級(jí)
技術(shù)對(duì)功能上的BUG，可以自己很好的判斷哪些是嚴(yán)重的緊急的，但對(duì)于視覺(jué)和交互層面的感知就比較低。在提問(wèn)題單的時(shí)候，我們可以幫他標(biāo)注出優(yōu)先級(jí)，告知開(kāi)發(fā)哪些是比較嚴(yán)重的需要優(yōu)先修改的，不然 開(kāi)發(fā)自己很難判斷，可能就會(huì)挑一些比較好改的先改了，重要的問(wèn)題反而被擱置了。尤其在項(xiàng)目時(shí)間比較緊張的時(shí)候，有優(yōu)先級(jí)標(biāo)注 開(kāi)發(fā)能夠看出哪些是可以為項(xiàng)目進(jìn)度做出妥協(xié)的，哪些是必須要修改的。
如何提高設(shè)計(jì)還原質(zhì)量和驗(yàn)收效率？
3.4、BUG單
設(shè)計(jì)提BUG單的不能簡(jiǎn)單的說(shuō)這里出錯(cuò)了，請(qǐng)參考設(shè)計(jì)標(biāo)注重新調(diào)整。要直接給出正確的尺寸、增多少、減多少、這樣可幫助技術(shù)提高更高效率，也能避免開(kāi)發(fā)自己去看又出現(xiàn)誤差、又要返工修改。
如何提高設(shè)計(jì)還原質(zhì)量和驗(yàn)收效率？
3.5、遺留問(wèn)題有記錄
如何提高設(shè)計(jì)還原質(zhì)量和驗(yàn)收效率？
四、結(jié)語(yǔ)
設(shè)計(jì)師在驗(yàn)收過(guò)程中容易遇到的一個(gè)比較頭疼的問(wèn)題就是，技術(shù)和產(chǎn)品小伙伴可能因?yàn)轫?xiàng)目上線時(shí)間緊，覺(jué)得視覺(jué)還原和頁(yè)面交互體驗(yàn)上的問(wèn)題不重要不給予修改，優(yōu)先保障功能上線。
除了這些原因，設(shè)計(jì)側(cè)也在檢討總結(jié)，自己有哪些做的不足的地方，所以 以上文檔也是對(duì)接下來(lái)工作的優(yōu)化方案。設(shè)計(jì)還原度也是日?？己酥?，需要大家重視，好的產(chǎn)品要嚴(yán)格把控精心打磨，希望這次的總結(jié)、相關(guān)流程和經(jīng)驗(yàn)，在接下來(lái)工作中能夠提升設(shè)計(jì)驗(yàn)收效率和還原度。

作者：考思考
來(lái)源：站酷

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

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

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

評(píng)論(0) 瀏覽(413)

如何為用戶提供正確的鍵盤輸入類型？

博博

Android和iOS系統(tǒng)都設(shè)計(jì)了針對(duì)特定表單字段的指定鍵盤輸入類型。但大多數(shù)開(kāi)發(fā)人員未能在他們的代碼中指定正確的鍵盤輸入類型。這會(huì)導(dǎo)致移動(dòng)設(shè)備上的表單完成效率變慢。本文以Android平臺(tái)為例。
一、輸入類型并不總是“文本”
大多數(shù)開(kāi)發(fā)人員錯(cuò)誤地將每個(gè)表單字段的輸入類型設(shè)置為“文本”。這存在問(wèn)題，因?yàn)槊總€(gè)表單字段的輸入并不總是純文本。通常都有一些字段要求輸入帶有數(shù)字或字母和數(shù)字組合的信息。當(dāng)用戶嘗試填寫這些字段時(shí)，他們應(yīng)該看到一個(gè)數(shù)字或字母和數(shù)字組合的鍵盤。
不幸的是，當(dāng)每個(gè)字段的輸入類型都設(shè)置為“文本”時(shí)，它會(huì)強(qiáng)制用戶使用文本鍵盤來(lái)輸入數(shù)字或字母和數(shù)字組合，輸入時(shí)舉步維艱，不是誤點(diǎn)，就是需要頻繁切換，輸入體驗(yàn)十分糟糕。
因此，請(qǐng)務(wù)必為每個(gè)表單字段指定輸入類型，以便系統(tǒng)能夠顯示相應(yīng)的鍵盤。除了指定輸入類型，我們還應(yīng)指定相關(guān)行為，例如輸入法是否提供拼寫建議、是否將句子的首字母大寫，以及是否使用“完成”或“下一項(xiàng)”等操作鍵替換“回車”。
輸入類型、行為、操作鍵整理如下：
如何為用戶提供正確的鍵盤輸入類型？
例一. 郵箱地址字段
表單要求用戶提供他們的郵箱地址是很常見(jiàn)的。當(dāng)我們將輸入類型設(shè)置為“郵箱地址”時(shí)，它會(huì)為用戶提供一個(gè)針對(duì)郵箱地址輸入的鍵盤。這個(gè)鍵盤不僅顯示字母，還可以顯示“@”和“.”，用戶可以輕松地輸入他們的郵箱地址。
如何為用戶提供正確的鍵盤輸入類型？
例二. 姓名字段
英文名是專有名詞，英語(yǔ)中專有名詞的第一個(gè)字母要大寫。我們將輸入類型設(shè)置為“人名”，并且設(shè)置單詞首字母大寫。用戶無(wú)需對(duì)英文字母進(jìn)行大小寫切換。
如何為用戶提供正確的鍵盤輸入類型？
二、每個(gè)鍵盤對(duì)輸入類型的反應(yīng)可能不同
案例一：登錄頁(yè)面的密碼輸入
釘釘將密碼框輸入類型設(shè)置為“密碼”。假定密碼為 z0h0a0n0g。
  1. 百度輸入法顯示密碼鍵盤，完成密碼輸入僅需點(diǎn)擊 9 次。
  2. 搜狗輸入法顯示文本鍵盤，用戶需在字母和數(shù)字之間切換，完成輸入需點(diǎn)擊 17 次。也支持長(zhǎng)按第一行的字母輸入數(shù)字。
  3. 微信輸入法顯示文本鍵盤，完成密碼輸入需點(diǎn)擊 17 次。不支持長(zhǎng)按字母輸入數(shù)字。
如何為用戶提供正確的鍵盤輸入類型？
案例二：登錄頁(yè)面的手機(jī)號(hào)輸入
釘釘設(shè)置電話號(hào)碼鍵盤右下角為“下一項(xiàng)”按鈕。
  1. 百度輸入法的鍵盤右下角顯示“回車”，用戶完成手機(jī)號(hào)輸入后需手動(dòng)獲取密碼文本框焦點(diǎn)。
  2. 搜狗輸入法的鍵盤右下角顯示“下一項(xiàng)”，用戶完成手機(jī)號(hào)輸入點(diǎn)擊下一項(xiàng)，密碼文本框自動(dòng)獲取焦點(diǎn)。
  3. 微信輸入法的鍵盤右下角顯示“下一項(xiàng)”，用戶完成手機(jī)號(hào)輸入點(diǎn)擊下一項(xiàng)，密碼文本框自動(dòng)獲取焦點(diǎn)。
如何為用戶提供正確的鍵盤輸入類型？
三、Input Type 助力產(chǎn)品輸入體驗(yàn)的提升
通過(guò)應(yīng)用 Input Type 你可以正確的為每個(gè)文本字段設(shè)置特定的輸入類型，以及看到每個(gè)輸入類型（以及輸入類型的組合）如何影響鍵盤。
Input Type這個(gè)工具需要安裝在安卓手機(jī)上，如果沒(méi)有安卓手機(jī)可以電腦上安裝一個(gè)網(wǎng)易MuMu安卓模擬器就可以用。
應(yīng)用截圖
應(yīng)用截圖

作者：交互設(shè)計(jì)師張楚
來(lái)源：站酷

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

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

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

軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

評(píng)論(0) 瀏覽(421)

B端產(chǎn)品 | 如何快速建立業(yè)務(wù)&產(chǎn)品認(rèn)知

博博

先說(shuō)結(jié)論：是很好的“答疑期”，但幫助有限，學(xué)會(huì)問(wèn)問(wèn)題，同時(shí)接納自己暫時(shí)不懂的情況。
 
在入職后，一般會(huì)有業(yè)務(wù)方向、研發(fā)背景、設(shè)計(jì)思路、產(chǎn)品使用流程等方面的培訓(xùn)講解。但即便同事講的不錯(cuò)，對(duì)于剛?cè)肼毜奈覀儊?lái)說(shuō)，也很難短時(shí)間內(nèi)消化掌握，并直接應(yīng)用到設(shè)計(jì)工作中。
 
在這個(gè)時(shí)期，有三點(diǎn)建議：
  1. 找關(guān)鍵詞
  2. 虛心請(qǐng)教
  3. 提出問(wèn)題并給出方案
 
評(píng)論(0) 瀏覽(324)

B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)

博博

第一部分 | WEB表單設(shè)計(jì)
在B的設(shè)計(jì)中、表單是我們最為常見(jiàn)的設(shè)計(jì)內(nèi)容。下面我們來(lái)學(xué)習(xí)如何做好表單設(shè)計(jì)這部分內(nèi)容。
1、什么是表單
我理解表單就是系統(tǒng)為和用戶進(jìn)行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺(tái)產(chǎn)品中對(duì)我們數(shù)據(jù)做的增、刪、改、查、驗(yàn)都可以通過(guò)表單完成。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
表單是一種用于收集用戶輸入的HTML元素，通常用于創(chuàng)建用戶與網(wǎng)頁(yè)交互的表單。表單可以包含各種輸入字段，如文本框、復(fù)選框、單選按鈕、下拉列表和提交按鈕等。當(dāng)用戶填寫表單并提交后，數(shù)據(jù)將被發(fā)送到服務(wù)器進(jìn)行處理。在web開(kāi)發(fā)中，表單是實(shí)現(xiàn)用戶交互和數(shù)據(jù)收集的重要手段之一。
 
1.1、常見(jiàn)應(yīng)用場(chǎng)景
在我們的后臺(tái)系統(tǒng)中、我們表單在70%的場(chǎng)景上都會(huì)使用到。采集錄入數(shù)據(jù)信息、編輯數(shù)據(jù)信息等。如我們SaaS管理平臺(tái)的學(xué)員錄入、檔案查詢、獎(jiǎng)勵(lì)規(guī)則設(shè)置等。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
2、表單設(shè)計(jì)原則
設(shè)計(jì)原則是任何一種解決方案的指路燈。我們?cè)诒韱蔚脑O(shè)計(jì)中需要遵循以下原則、
簡(jiǎn)潔明了、清晰高效、適應(yīng)業(yè)務(wù)、及時(shí)反饋。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
2.1、簡(jiǎn)潔明了
表單的設(shè)計(jì)應(yīng)該簡(jiǎn)潔明了，避免過(guò)多的裝飾和元素干擾用戶填寫表單。
 
2.2、清晰高效
表單中的各個(gè)字段和選項(xiàng)應(yīng)該清晰可見(jiàn)。用戶應(yīng)該能夠快速找到需要填寫的字段和選項(xiàng)，并且填寫過(guò)程中不會(huì)遇到過(guò)多的困難。
 
2.3、適應(yīng)業(yè)務(wù)
應(yīng)該符合我們的業(yè)務(wù)應(yīng)用場(chǎng)景、滿足我們的業(yè)務(wù)需求。
 
2.4、及時(shí)反饋
在用戶填寫表單的過(guò)程中，應(yīng)該提供適當(dāng)?shù)姆答?，例如輸入?yàn)證、錯(cuò)誤提示等，以便用戶能夠及時(shí)了解自己的輸入是否正確。
 
3、表單構(gòu)成
我們通常的表單都基本都是由、標(biāo)簽、域、提示、操作按鈕這四個(gè)部分構(gòu)成的。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
3.1、標(biāo)簽
標(biāo)簽文本主要是解釋輸入項(xiàng)的含義，一般不宜太長(zhǎng)，需要簡(jiǎn)明扼要，快速讓用戶理解。輸入框標(biāo)簽在布局上可以分為
左標(biāo)簽、頂標(biāo)簽、行內(nèi)標(biāo)簽
。這三種設(shè)計(jì)在許多情況下可以提高可讀性和用戶友好性，但也有一些潛在的缺點(diǎn)。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
3.1.1、左標(biāo)簽
優(yōu)點(diǎn)：可讀性強(qiáng)、減少用戶的認(rèn)知負(fù)擔(dān)。布局直觀、提高填寫速度。
缺點(diǎn)：不適合長(zhǎng)標(biāo)簽、對(duì)業(yè)務(wù)場(chǎng)景適用性差。
 
3.1.2、頂標(biāo)簽
優(yōu)點(diǎn)：節(jié)省空間、減少表單的長(zhǎng)度和寬度。視覺(jué)層次清晰。
缺點(diǎn)：需要額外的間距、縱向空間利用率不高
 
3.1.3、行內(nèi)標(biāo)簽
優(yōu)點(diǎn)：節(jié)省空間、簡(jiǎn)潔易于閱讀
缺點(diǎn)：可讀性有限、對(duì)于長(zhǎng)標(biāo)簽或復(fù)雜內(nèi)容可讀性降低、不適合大部分的場(chǎng)景。
 
3.2、域
表單的域表示的是一個(gè)空間。這個(gè)空間里可以是輸入內(nèi)容、選擇內(nèi)容、選則時(shí)間、選擇數(shù)值、觸發(fā)交互按鈕（上傳資料）等
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
3.3、提示
避免廢話、給出結(jié)果以及處理方式。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
3.4、按鈕
一般出現(xiàn)在頁(yè)面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁(yè)面底部。
在我們系統(tǒng)設(shè)計(jì)里。我是更愿意把按鈕放在頁(yè)面的底部。至于為什么可以看一下、我之前的《按鈕的基礎(chǔ)設(shè)計(jì)知識(shí)的文章》
 
4、設(shè)計(jì)細(xì)節(jié)
除了上面表單的基礎(chǔ)知識(shí)外，為了我們表單設(shè)計(jì)的更好我們就需要在細(xì)節(jié)上下功夫了。畢竟優(yōu)秀的設(shè)計(jì)師注重細(xì)節(jié)的表現(xiàn)的。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
4.1、表單里標(biāo)簽后的冒號(hào)要不要加
最初是因?yàn)槠聊伙@示的原因所以才加的冒號(hào)、隨著技術(shù)的進(jìn)步?，F(xiàn)在可加可不加。系統(tǒng)內(nèi)統(tǒng)一就行。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
4.2、如何設(shè)定輸入框的寬度
輸入框的寬度是自適應(yīng)的、輸入框的寬度是有暗示左右的。在真實(shí)場(chǎng)景中，大部分輸入框是存在理想長(zhǎng)度的，那么就應(yīng)該向用戶暗示所需輸入內(nèi)容的長(zhǎng)度來(lái)減輕判斷負(fù)擔(dān)。下圖就是典型案例，一個(gè)實(shí)際不需要花多少錢的金額輸入框在左圖中進(jìn)行等寬處理，反而容易誤導(dǎo)用戶對(duì)輸入金額的判斷，造成一種不安全感。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
4.3、表單布局
在表單中我們采用多種布局方式。
信息分組、內(nèi)容列表、標(biāo)簽頁(yè)、分步驟。
在信息傳遞上。這集中布局方式本質(zhì)都是一樣的。將信息進(jìn)行分類展示。來(lái)更好效的進(jìn)行信息的傳遞和展示。理論支持、格式塔原理
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
我們?nèi)绾芜x則適用那種布局方式呢。很簡(jiǎn)單需要展示內(nèi)容的多少。
 
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
第二部分 | 表單交互
為了讓我們表單的用戶體驗(yàn)做到極致、我們還有注意這些交互上的細(xì)節(jié)。做好這些細(xì)節(jié)將大幅提升我們的用戶體檢。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
1、錯(cuò)誤提示
驗(yàn)證用戶輸入活提交信息是否正確、驗(yàn)證方法有三種、實(shí)時(shí)、提交后、服務(wù)器。因?yàn)樗麄儠r(shí)效性不同所以應(yīng)用的場(chǎng)景也不同。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
錯(cuò)誤提示要適用積極地的語(yǔ)言、不清楚的告訴用戶存在哪里、要如何修復(fù)。
 
2、更智慧、高效
之前好像看過(guò)一個(gè)什么定律忘了。他的大致意思是，如果系統(tǒng)能處理的問(wèn)題盡量讓系統(tǒng)去處理、不用留給用戶去操作。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
2.1、簡(jiǎn)化輸入智能默認(rèn)
如果可以帶出來(lái)的信息可以盡力帶過(guò)來(lái)。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
滿足多數(shù)人需要的地方放置選擇，來(lái)幫助用戶作出明智選擇?；ヂ?lián)網(wǎng)表單中有很多地方能利用智能默認(rèn)減少必要的選擇次數(shù)，加速表單完成過(guò)程。
 
2.2、個(gè)性化默認(rèn)
保留用戶登陸信息、重復(fù)填寫內(nèi)容。例如、之前去醫(yī)院需要手機(jī)登陸的那段時(shí)間。在去過(guò)一次后。掃完填寫信息制藥填一個(gè)名字、其他信息都帶出來(lái)了。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
2.3、及時(shí)新增
我們?cè)跐M足大部分用戶的同時(shí)、在某些場(chǎng)景里還要提高額外的輸入框給需要的人用。同時(shí)不會(huì)阻礙不需要的人。這類輸入框常常被作為高級(jí)選項(xiàng)或者額外選項(xiàng)。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
3、結(jié)構(gòu)
一個(gè)結(jié)構(gòu)充分的表單就像一個(gè)與用戶的良好對(duì)話。所以記住這一點(diǎn)，仔細(xì)規(guī)劃結(jié)構(gòu)。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
3.1、從簡(jiǎn)單開(kāi)始到創(chuàng)建邏輯分類
從簡(jiǎn)單問(wèn)題開(kāi)始，用戶已經(jīng)很清楚答案了。將不相關(guān)的信息按邏輯分組展示。來(lái)幫助用戶理解。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
3.2、單步、多步、單列、多列
至于這些的方式的選擇、總的來(lái)說(shuō)還是信息呈現(xiàn)多少的不同。單步的轉(zhuǎn)化率更高。但多步卻更適合復(fù)雜信息的收集。
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
單列和多列基本也是一樣的道理
 
B端基礎(chǔ) | 全套WEB表單設(shè)計(jì)基礎(chǔ)
 
 
 


作者：彪形大漢pro
來(lái)源：站酷

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

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

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

 

評(píng)論(0) 瀏覽(427)

設(shè)計(jì)原則：認(rèn)知偏差

博博

什么是確認(rèn)偏差？
確認(rèn)偏差是一種認(rèn)知偏差，指的是人們更傾向于尋找、記住或贊同支持已有信念或假設(shè)的信息，而忽視或排斥與其相矛盾的信息。這種偏差導(dǎo)致人們?cè)趯で笮畔⒑托纬捎^點(diǎn)時(shí)傾向于選擇那些與他們已有信念相一致的信息，而忽視那些與之相悖的信息。
在設(shè)計(jì)和決策過(guò)程中，確認(rèn)偏差可能會(huì)對(duì)判斷和決策產(chǎn)生影響。設(shè)計(jì)師或決策者可能會(huì)傾向于尋找支持他們最初想法或假設(shè)的信息，而忽略潛在的反對(duì)觀點(diǎn)或證據(jù)。這可能導(dǎo)致錯(cuò)誤的假設(shè)、不完整的分析或偏離客觀事實(shí)的判斷。
了解確認(rèn)偏差對(duì)于設(shè)計(jì)師和決策者來(lái)說(shuō)是很重要的，因?yàn)樗梢杂绊懙剿麄儗?duì)問(wèn)題的看法和解決方案的選擇。為了減輕確認(rèn)偏差的影響，重要的做法包括尋求多樣的觀點(diǎn)和信息來(lái)源、鼓勵(lì)團(tuán)隊(duì)開(kāi)放性討論、持續(xù)評(píng)估和反思自己的假設(shè)，以及意識(shí)到并主動(dòng)應(yīng)對(duì)這種偏差。
 
超長(zhǎng)干貨！UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
它是怎么產(chǎn)生的？
確認(rèn)偏差的產(chǎn)生與人類的認(rèn)知方式和信息處理方式有關(guān)。它可以追溯到我們處理信息的心理機(jī)制，以及對(duì)信息的選擇性接收和處理。
信息過(guò)濾和選擇性接收
： 人類大腦處理的信息量龐大，為了應(yīng)對(duì)這種信息負(fù)荷，我們會(huì)有意無(wú)意地選擇性地接收與已有信念相符的信息，因?yàn)檫@樣更容易被接受和理解。
認(rèn)知一致性和舒適度
： 我們傾向于尋求與我們已有信念一致的信息，因?yàn)檫@會(huì)讓我們感到更加舒適和認(rèn)知上的一致性，而與之相悖的信息則可能引起認(rèn)知不適或挑戰(zhàn)。
記憶偏差
： 我們記憶中更容易保留和回憶起與我們已有信念相符的信息，而忽略或淡化與之不符的信息，導(dǎo)致我們更傾向于記住和重復(fù)暴露于已有信念的信息。
社會(huì)影響和團(tuán)隊(duì)動(dòng)態(tài)
： 在團(tuán)隊(duì)環(huán)境中，人們可能更容易受到同伴或領(lǐng)導(dǎo)觀點(diǎn)的影響，導(dǎo)致更多地尋求與團(tuán)隊(duì)共識(shí)一致的信息。
因此，確認(rèn)偏差源于我們處理信息的方式和尋求認(rèn)知一致性的趨勢(shì)，這種傾向性會(huì)影響我們對(duì)信息的選擇、記憶和接受，使得我們更容易偏向于支持已有信念的信息。
 
超長(zhǎng)干貨！UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
思考下確認(rèn)偏差在UI作用？
認(rèn)知偏差在UI設(shè)計(jì)中有著深遠(yuǎn)的影響，設(shè)計(jì)師需要了解并考慮這些偏差，以創(chuàng)造更符合用戶認(rèn)知和行為的界面：
信息呈現(xiàn)與確認(rèn)偏差：
UI設(shè)計(jì)中的信息呈現(xiàn)方式能夠影響用戶的感知。確認(rèn)偏差提示我們，設(shè)計(jì)師應(yīng)該精心布局信息，確保用戶首先接觸到的內(nèi)容是符合其期望和信念的。在重要位置展示與用戶預(yù)期一致的信息能夠增強(qiáng)用戶對(duì)界面的認(rèn)可感。
用戶體驗(yàn)與認(rèn)知一致性：
UI設(shè)計(jì)應(yīng)該符合用戶的認(rèn)知模式和習(xí)慣。保持一致的界面元素、布局結(jié)構(gòu)和交互方式有助于降低用戶學(xué)習(xí)成本，提升用戶體驗(yàn)，因?yàn)檫@與用戶的認(rèn)知一致性相契合。
選擇性暴露與設(shè)計(jì)引導(dǎo)：
設(shè)計(jì)師可以利用確認(rèn)偏差的特性來(lái)引導(dǎo)用戶，將重要信息或功能放置在易于察覺(jué)的位置，引導(dǎo)用戶進(jìn)行特定的操作。然而，需要謹(jǐn)慎處理，以避免對(duì)用戶造成信息過(guò)載。
避免偏見(jiàn)與用戶測(cè)試：
設(shè)計(jì)師應(yīng)該避免自身的認(rèn)知偏差影響設(shè)計(jì)，而是更多地關(guān)注用戶的實(shí)際需求和行為。通過(guò)持續(xù)的用戶測(cè)試和反饋，可以驗(yàn)證設(shè)計(jì)的有效性，確保設(shè)計(jì)更加客觀、全面地服務(wù)于用戶。
認(rèn)知偏差不僅能夠幫助設(shè)計(jì)師更好地了解用戶行為和認(rèn)知模式，也提醒設(shè)計(jì)師需要謹(jǐn)慎地處理信息的呈現(xiàn)方式，以創(chuàng)造出更符合用戶認(rèn)知特點(diǎn)和期望的界面。
 
超長(zhǎng)干貨！UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
需要我們記住什么？
用戶選擇性感知：
用戶會(huì)傾向于選擇性地接收與其已有信念相符的信息。因此，在設(shè)計(jì)中需要注意如何呈現(xiàn)信息，以便用戶更容易接收并理解與其預(yù)期一致的內(nèi)容。
認(rèn)知一致性與用戶體驗(yàn)：
用戶更喜歡一致性的界面設(shè)計(jì)。保持界面元素、布局和交互方式的一致性有助于提高用戶體驗(yàn)，減少認(rèn)知負(fù)擔(dān)。
引導(dǎo)與用戶行為：
可以利用認(rèn)知偏差的特性來(lái)引導(dǎo)用戶行為，但需要謹(jǐn)慎，以避免對(duì)用戶造成信息過(guò)載或誤導(dǎo)。
客觀設(shè)計(jì)與用戶測(cè)試：
設(shè)計(jì)師需保持客觀，在設(shè)計(jì)中避免個(gè)人偏見(jiàn)的影響。持續(xù)的用戶測(cè)試和反饋是驗(yàn)證設(shè)計(jì)有效性的關(guān)鍵。
用戶需求至上：
最重要的是設(shè)計(jì)能夠滿足用戶的實(shí)際需求。認(rèn)知偏差提醒我們關(guān)注用戶行為和反饋，確保設(shè)計(jì)更加貼近用戶期望。
記住這些關(guān)鍵點(diǎn)有助于設(shè)計(jì)師更好地應(yīng)用認(rèn)知偏差的理論，創(chuàng)造出更符合用戶認(rèn)知和行為習(xí)慣的界面，提升用戶體驗(yàn)和產(chǎn)品吸引力。
 
在app產(chǎn)品中，我們應(yīng)該怎么應(yīng)用認(rèn)知偏差
在App產(chǎn)品中，了解和應(yīng)用認(rèn)知偏差可以改善用戶體驗(yàn)和促進(jìn)用戶參與。以下是一些應(yīng)用認(rèn)知偏差的方法：
個(gè)性化內(nèi)容推薦：
 利用用戶的歷史數(shù)據(jù)和偏好，提供個(gè)性化的內(nèi)容推薦，引導(dǎo)用戶瀏覽與其興趣相關(guān)的信息，這符合用戶的認(rèn)知偏好。
強(qiáng)調(diào)常用功能：
 將常用功能放置在易于察覺(jué)的位置，這有助于用戶更快速地找到并使用常用功能，符合用戶對(duì)信息的選擇性感知。
引導(dǎo)用戶決策：
 通過(guò)明確的引導(dǎo)和推薦，幫助用戶做出決策。例如，突出顯示推薦選項(xiàng)或使用明確的指導(dǎo)語(yǔ)言，以降低用戶的選擇焦慮。
增加用戶互動(dòng)和獎(jiǎng)勵(lì)機(jī)制： 利用認(rèn)知偏差中的獎(jiǎng)勵(lì)機(jī)制，激勵(lì)用戶參與互動(dòng)。例如，獎(jiǎng)勵(lì)積分、勛章或獎(jiǎng)勵(lì)物品以促進(jìn)用戶的積極參與。
社交證據(jù)和影響力：
 強(qiáng)調(diào)其他用戶的行為和意見(jiàn)，例如顯示用戶評(píng)論或社交分享，可以影響新用戶的決策，符合社會(huì)影響的認(rèn)知偏差。
提供個(gè)性化的反饋和建議：
 根據(jù)用戶的行為提供個(gè)性化的反饋和建議，引導(dǎo)用戶完成特定的動(dòng)作或行為，符合用戶的認(rèn)知偏好和選擇性感知。
綜合利用這些策略可以更好地與用戶互動(dòng)，促進(jìn)參與度，提高用戶對(duì)產(chǎn)品的滿意度。然而，需要謹(jǐn)慎運(yùn)用，避免過(guò)度使用以至于影響用戶體驗(yàn)或?qū)е滦畔⑦^(guò)載。
 
認(rèn)知偏差總結(jié)
綜合利用認(rèn)知偏差的這些方面，設(shè)計(jì)者可以更加精準(zhǔn)地與用戶互動(dòng)，提升用戶體驗(yàn)和參與度。但務(wù)必注意，應(yīng)用認(rèn)知偏差需要在不影響用戶信任和體驗(yàn)的前提下進(jìn)行，避免過(guò)度干預(yù)或引導(dǎo)，以免影響用戶的自主性和信任感。


作者：A大林子
來(lái)源：站酷

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

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

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

軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

評(píng)論(0) 瀏覽(463)

日歷

鏈接

個(gè)人資料

存檔