首頁(yè)

設(shè)計(jì)原則:??硕?/a>

博博

它是怎么產(chǎn)生的?
??硕墒腔谛睦韺W(xué)和人類(lèi)認(rèn)知過(guò)程的研究而產(chǎn)生的。威廉·??撕退耐略?930年代進(jìn)行了一系列的實(shí)驗(yàn),旨在了解人們?cè)诓煌x擇數(shù)量下做出決策的反應(yīng)時(shí)間。
實(shí)驗(yàn)中,被試者面對(duì)不同數(shù)量的選擇,例如按鈕或選項(xiàng),然后被要求盡快做出選擇。實(shí)驗(yàn)結(jié)果顯示,隨著選項(xiàng)數(shù)量的增加,被試者做出選擇所需的時(shí)間也相應(yīng)增加。這一觀察成為希克定律的基礎(chǔ)。
??硕傻谋举|(zhì)是認(rèn)知心理學(xué)的一部分,它涉及到人類(lèi)對(duì)信息的處理方式。當(dāng)人們面對(duì)多個(gè)選項(xiàng)時(shí),他們需要對(duì)每個(gè)選項(xiàng)進(jìn)行評(píng)估和決策,這會(huì)增加認(rèn)知負(fù)荷。結(jié)果是,隨著選項(xiàng)數(shù)量的增加,處理和選擇所需的時(shí)間也相應(yīng)增加。
這個(gè)定律提出了一種對(duì)設(shè)計(jì)界面和交互方式有深遠(yuǎn)影響的見(jiàn)解:簡(jiǎn)化界面,減少選擇數(shù)量,可以幫助用戶(hù)更快速、更輕松地做出決策。這種認(rèn)知負(fù)荷的理論成果對(duì)于優(yōu)化用戶(hù)體驗(yàn)和提高界面效率有著重要的指導(dǎo)作用。
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
思考下希克定律UI作用?
希克定律在UI設(shè)計(jì)中具有重要作用,它強(qiáng)調(diào)了簡(jiǎn)化選擇以提高用戶(hù)體驗(yàn)的重要性。以下是??硕稍赨I設(shè)計(jì)中的一些具體作用和應(yīng)用:
簡(jiǎn)化菜單和導(dǎo)航
 減少導(dǎo)航菜單中的選項(xiàng)數(shù)量,將類(lèi)似功能的項(xiàng)目歸類(lèi)或合并,可以減輕用戶(hù)的選擇負(fù)擔(dān),幫助他們更快速地找到所需信息。
優(yōu)化工作流程
 在應(yīng)用程序或網(wǎng)站設(shè)計(jì)中,簡(jiǎn)化工作流程和操作步驟可以減少用戶(hù)需要做出的決策,提高用戶(hù)完成任務(wù)的效率。
默認(rèn)設(shè)置和建議
 使用默認(rèn)設(shè)置或提供建議可以減少用戶(hù)必須做出的選擇。通過(guò)合理設(shè)置默認(rèn)選項(xiàng),可以簡(jiǎn)化用戶(hù)體驗(yàn),讓用戶(hù)更快地進(jìn)入應(yīng)用或網(wǎng)站并開(kāi)始使用。
信息層級(jí)結(jié)構(gòu)
 設(shè)計(jì)清晰的信息架構(gòu)和層級(jí)結(jié)構(gòu)有助于將內(nèi)容組織得更有條理,使用戶(hù)能夠更容易地定位所需信息,避免過(guò)多的選擇。
上下文反饋和指導(dǎo)
 提供清晰的上下文反饋和指導(dǎo),幫助用戶(hù)更快速地了解當(dāng)前操作的影響,減少不必要的猶豫和選擇焦慮。
用戶(hù)個(gè)性化和智能推薦
 利用個(gè)性化推薦或智能算法,根據(jù)用戶(hù)的歷史偏好為其提供定制化的選擇,減少不必要的選擇。
在UI設(shè)計(jì)中,理解??硕煽梢砸龑?dǎo)設(shè)計(jì)師創(chuàng)造出更簡(jiǎn)潔、更直觀、更易用的界面,從而提高用戶(hù)滿(mǎn)意度和效率。通過(guò)減少選擇數(shù)量和簡(jiǎn)化操作,設(shè)計(jì)可以更好地配合人類(lèi)認(rèn)知特性,使用戶(hù)在界面上的交互變得更加流暢和自然。
超長(zhǎng)干貨!UI設(shè)計(jì)師必須要懂的4個(gè)設(shè)計(jì)心理學(xué)
需要我們記住什么?
在UI設(shè)計(jì)中,了解和應(yīng)用??硕捎兄趧?chuàng)造更優(yōu)秀的用戶(hù)體驗(yàn)。以下是需要記住的一些關(guān)鍵點(diǎn):
選擇數(shù)量與決策時(shí)間成正比:
用戶(hù)需要花費(fèi)更多時(shí)間來(lái)做出決策,當(dāng)他們面對(duì)更多選擇時(shí)。減少選擇數(shù)量可以提高用戶(hù)的決策效率。
簡(jiǎn)化界面以降低認(rèn)知負(fù)荷:
 設(shè)計(jì)簡(jiǎn)潔、清晰的界面可以減少用戶(hù)的認(rèn)知負(fù)荷,幫助他們更輕松地使用應(yīng)用或網(wǎng)站。
層級(jí)結(jié)構(gòu)和組織:
 通過(guò)良好的信息層級(jí)結(jié)構(gòu)和內(nèi)容組織,可以使用戶(hù)更快速地找到所需信息,減少選擇過(guò)程。
默認(rèn)設(shè)置的重要性:
合理設(shè)置默認(rèn)選項(xiàng)可以簡(jiǎn)化用戶(hù)體驗(yàn),降低他們需要做出的選擇,從而更快地開(kāi)始使用應(yīng)用或網(wǎng)站。
上下文反饋和引導(dǎo)
提供清晰的上下文反饋和指導(dǎo),幫助用戶(hù)更快速地了解其操作的影響,減少選擇焦慮。
用戶(hù)個(gè)性化和智能推薦
利用用戶(hù)個(gè)性化數(shù)據(jù)和智能算法,為用戶(hù)提供定制化的選擇,降低不必要的選擇過(guò)程。
記住這些關(guān)鍵點(diǎn)能夠幫助設(shè)計(jì)師更好地優(yōu)化界面,提供更出色的用戶(hù)體驗(yàn),減少用戶(hù)做出選擇所需的時(shí)間,從而增強(qiáng)產(chǎn)品或應(yīng)用的吸引力和實(shí)用性。
 
在app產(chǎn)品中,我們應(yīng)該怎么應(yīng)用希克定律
在移動(dòng)應(yīng)用程序(App)設(shè)計(jì)中,應(yīng)用??硕煽梢酝ㄟ^(guò)以下方式提高用戶(hù)體驗(yàn):
簡(jiǎn)化導(dǎo)航和菜單
 減少主導(dǎo)航菜單中的選項(xiàng)數(shù)量,將類(lèi)似的功能合并或分類(lèi),以簡(jiǎn)化用戶(hù)的選擇過(guò)程。使用清晰的圖標(biāo)和標(biāo)簽幫助用戶(hù)更快速地理解選項(xiàng)。
優(yōu)化注冊(cè)和登錄流程
在注冊(cè)和登錄過(guò)程中盡可能減少必填項(xiàng),使用社交媒體登錄或單一注冊(cè)選項(xiàng)簡(jiǎn)化流程,降低用戶(hù)的選擇負(fù)擔(dān)。
默認(rèn)設(shè)置和個(gè)性化推薦: 利用用戶(hù)的偏好和歷史數(shù)據(jù),為用戶(hù)提供個(gè)性化的推薦或默認(rèn)設(shè)置,減少用戶(hù)需要做出的選擇,并快速展示最相關(guān)的內(nèi)容或功能。
簡(jiǎn)化表單和輸入
最小化表單字段,根據(jù)上下文預(yù)填充表單內(nèi)容或使用智能輸入建議,以降低用戶(hù)輸入的認(rèn)知負(fù)擔(dān)。
上下文引導(dǎo)和反饋
在用戶(hù)進(jìn)行關(guān)鍵操作時(shí)提供清晰的引導(dǎo)和反饋,讓用戶(hù)了解他們的操作將會(huì)帶來(lái)的結(jié)果,減少不必要的猶豫和選擇焦慮。
智能搜索和過(guò)濾功能
提供強(qiáng)大的搜索和過(guò)濾功能,幫助用戶(hù)快速找到所需內(nèi)容,減少在大量選項(xiàng)中的選擇時(shí)間。
簡(jiǎn)化購(gòu)買(mǎi)流程
 在電商應(yīng)用中,優(yōu)化購(gòu)買(mǎi)流程,減少購(gòu)物車(chē)和結(jié)賬過(guò)程中的步驟和選擇,提供清晰的購(gòu)買(mǎi)路徑。
通過(guò)以上方式,設(shè)計(jì)師可以在App中運(yùn)用??硕?,幫助用戶(hù)更輕松、更高效地使用應(yīng)用,提高用戶(hù)滿(mǎn)意度并增強(qiáng)應(yīng)用的吸引力。這些方法都圍繞著減少選擇數(shù)量、簡(jiǎn)化操作和提供個(gè)性化的體驗(yàn),以減少用戶(hù)的認(rèn)知負(fù)荷,提高用戶(hù)的決策效率。
 
希克定律總結(jié)
??硕稍谝苿?dòng)應(yīng)用設(shè)計(jì)中的應(yīng)用關(guān)鍵在于簡(jiǎn)化選擇、優(yōu)化流程以提升用戶(hù)體驗(yàn)。通過(guò)減少主導(dǎo)航選項(xiàng)、優(yōu)化注冊(cè)與登錄流程、提供個(gè)性化推薦、簡(jiǎn)化表單輸入、提供清晰反饋和引導(dǎo)、強(qiáng)化搜索功能以及簡(jiǎn)化購(gòu)買(mǎi)流程,設(shè)計(jì)師可以降低用戶(hù)的選擇焦慮和認(rèn)知負(fù)荷,使用戶(hù)更輕松、更高效地使用應(yīng)用,提升用戶(hù)滿(mǎn)意度。這些策略圍繞著簡(jiǎn)化操作、減少選項(xiàng)數(shù)量和提供個(gè)性化體驗(yàn),有助于提高用戶(hù)的決策效率,增強(qiáng)應(yīng)用的吸引力與可用性。


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

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專(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。

關(guān)鍵詞:UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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ā)

一招教會(huì)你頁(yè)面分割怎么用

博博

作為一名合格的UI設(shè)計(jì)師,用好留白分割、線(xiàn)性分割、卡片分割,你的頁(yè)面即成功了一半!

留白分割≧線(xiàn)性分割≧卡片分割

留白分割定義:指的是只通過(guò)增加間距的方式,利用人的視知覺(jué)原理(接近法則:人的大腦會(huì)傾向于把彼此靠近的元素視為一組),自然的將信息分組。(如上圖)

間距留白是區(qū)隔單一信息元素的默認(rèn)選擇。(如下圖)

使用原則:建議在不影響核心數(shù)據(jù)指標(biāo)的前提下,條目之間盡可能采用留白分割,會(huì)讓界面更清爽,瀏覽更沉浸。

留白分割的分類(lèi)及適用場(chǎng)景:當(dāng)條目信息層次較少(≦2)時(shí),留白分割是比較合適的,當(dāng)信息層次較多(≧3)時(shí),留白分割既會(huì)浪費(fèi)空間,也難以達(dá)到一目了然的分割效果。

線(xiàn)性分割定義:用線(xiàn)來(lái)分隔不同的信息內(nèi)容。(大部分APP的分割線(xiàn)是1px粗細(xì),黑色,不透明度12%)。

使用原則:分割線(xiàn)可以幫助用戶(hù)理解頁(yè)面是如何組成的,但過(guò)度使用分割線(xiàn)會(huì)造成視覺(jué)干擾,影響頁(yè)面信息傳達(dá)。

Android系統(tǒng)明確規(guī)定了分割線(xiàn)的使用原則:
1、微妙的:分割線(xiàn)在布局中應(yīng)該很容易被注意到,但又不凸顯。
2、次要的:只有當(dāng)留白不能起到分割作用時(shí),才采用分分割線(xiàn)。
3、少用的:謹(jǐn)慎使用分割線(xiàn),用它來(lái)創(chuàng)建分組而不是分割條目。(如下圖)

分類(lèi)及使用場(chǎng)景:
1、通欄分割線(xiàn):用于分割彼此完全獨(dú)立的內(nèi)容。
2、內(nèi)嵌分割線(xiàn):用于分割有錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。
3、中間分割線(xiàn):用于分割無(wú)錨點(diǎn)(頭像或圖標(biāo))的相關(guān)內(nèi)容。

如果為了提高屏效,希望在一屏內(nèi)盡可能多的展示信息,那么同樣的信息布局,分割線(xiàn)帶來(lái)的效果會(huì)更清晰(如下圖)

卡片分割定義:卡片是一個(gè)由內(nèi)容和操作組合而成的獨(dú)立主題的面性容器①,它可以包含縮略圖②、標(biāo)題③、副標(biāo)題④、副媒體⑤、文本⑥、問(wèn)文字按鈕⑦和圖標(biāo)按鈕⑧,除了卡片容器本身,其他元素都是可選的,所有元素都以易于掃描和操作的形式放置在卡片上。

使用原則:
1、包含的:卡片是一個(gè)可識(shí)別的,單獨(dú)的、包含內(nèi)容的單元。
2、獨(dú)立的:一張卡片可以獨(dú)立存在,而不依賴(lài)于上下文環(huán)境。
3、不可分割的:一張卡片不能與另一張合并,也不能拆分成多張卡片。
分類(lèi)及適用場(chǎng)景:
卡片根據(jù)左右是否有邊距,可簡(jiǎn)單分為通欄卡片和非通欄卡片(如下圖)。

從視覺(jué)效果上來(lái)看,由于圓角的聚焦效應(yīng),非通欄卡片對(duì)于凸顯單個(gè)卡片的獨(dú)立性和內(nèi)容的效果都更好,畫(huà)面的分割感會(huì)更強(qiáng)。
1、當(dāng)這個(gè)主題內(nèi)部的內(nèi)容已經(jīng)有分割線(xiàn)時(shí),建議采用卡片分割,讓主題信息層次更加清晰。
2、當(dāng)單個(gè)主題內(nèi)部的內(nèi)容類(lèi)型較多,上下所占空間較大,建議采用卡片分割,以更好的圈定該主題的內(nèi)容范圍,給用戶(hù)明確的內(nèi)容邊界感。
3、當(dāng)需要擴(kuò)展頁(yè)面的橫向空間時(shí),暗示頁(yè)面可以橫向滑動(dòng)時(shí),需要采用非通欄卡片,利用橫向內(nèi)容連續(xù)性原則,幫助用戶(hù)建立可以橫向滑動(dòng)的意識(shí)。

小結(jié):

  • 當(dāng)信息條目復(fù)雜度較低時(shí),優(yōu)先采用留白分割,視覺(jué)清爽無(wú)干擾。
  • 當(dāng)信息條目復(fù)雜度增加,只利用留白分割效果不明顯時(shí),建議引入線(xiàn)性分割,讓信息層次更清晰且屏效高。
  • 當(dāng)信息條目復(fù)雜度進(jìn)一步提升,(比如已經(jīng)有了線(xiàn)性分割,或者有更多操作),需要進(jìn)一步強(qiáng)化信息條目本身的邊界感,建議引入卡片,以強(qiáng)化條目信息的視覺(jué)層次和可操作性。

信息分割本身不是目的,分割方式的選擇是為了讓版面產(chǎn)生清晰的條理性,用悅目的信息秩序來(lái)更好的突出內(nèi)容,達(dá)成最佳的信息傳達(dá)效果,所以決策時(shí),除了上述細(xì)節(jié)考慮因素,還要考慮整體版面效果和信息傳達(dá)效率。


作者:是一顆李子
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專(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。

關(guān)鍵詞:UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司用戶(hù)體驗(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ā)

 

設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”

博博

一、表情化反饋設(shè)計(jì)
 
通過(guò)用戶(hù)反饋可以讓產(chǎn)品的服務(wù)和體驗(yàn)做得更好,因此獲取反饋的設(shè)計(jì)變得至關(guān)重要。
 
在餓了么 App 點(diǎn)餐,完成訂單配送之后,會(huì)以彈窗的形式采集用戶(hù)反饋。通過(guò)表情化的設(shè)計(jì)讓用戶(hù)完成選項(xiàng),情感化的表達(dá)可以提高用戶(hù)的參與度,進(jìn)而達(dá)到獲取反饋意見(jiàn)的目的。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
 
二、靈動(dòng)可愛(ài)的動(dòng)效表達(dá)
 
動(dòng)效的表達(dá)相較于靜態(tài)而言更有吸引力,可以讓畫(huà)面更有視覺(jué)張力。
 
餓了么在 0 元奪寶活動(dòng)設(shè)計(jì)中,以 3D 動(dòng)效的形式展示靈動(dòng)可愛(ài)的小魚(yú)吐泡泡的畫(huà)面,瞬間讓場(chǎng)景變得更有趣味性。吸引用戶(hù)關(guān)注度的同時(shí),也讓活動(dòng)氛圍感十足。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
三、突出品牌主題的輪播設(shè)計(jì)
 
輪播圖的設(shè)計(jì)樣式豐富多樣,設(shè)計(jì)師都在不斷探索更新穎的表現(xiàn)形式和互動(dòng)玩法。
 
最近在體驗(yàn)芒果TV 時(shí),在好物欄目中的輪播圖布局設(shè)計(jì)中,結(jié)合了品牌主題進(jìn)行輪播切換。不僅強(qiáng)化了品牌主題,新穎的樣式表達(dá)也使得欄目更有設(shè)計(jì)感。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
四、收縮式導(dǎo)航欄設(shè)計(jì)
 
通過(guò)交互形式可以讓靜態(tài)布局有更多靈活性,方便用戶(hù)在不同操作場(chǎng)景中享受更好的體驗(yàn)。
 
作業(yè)幫 App 首頁(yè)默認(rèn)狀態(tài)突出搜索功能,當(dāng)用戶(hù)滑動(dòng)瀏覽內(nèi)容時(shí),頂部導(dǎo)航欄和搜索功能會(huì)收縮展示。簡(jiǎn)化部分功能和適配導(dǎo)航欄布局,提高當(dāng)前界面的利用率,帶給用戶(hù)更好的瀏覽體驗(yàn)。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
五、通過(guò)動(dòng)效強(qiáng)化按鈕關(guān)注度
 
微動(dòng)效越來(lái)越普及,不僅可以讓產(chǎn)品變得更有趣味性,也能通過(guò)動(dòng)靜對(duì)比突出功能關(guān)注度。
 
進(jìn)入作業(yè)幫 App 個(gè)人中心時(shí),會(huì)員開(kāi)通按鈕會(huì)通過(guò)一圈光效動(dòng)效進(jìn)行強(qiáng)化,吸引用戶(hù)關(guān)注到開(kāi)通按鈕。左上角的每日簽到圖標(biāo)也會(huì)以 3D 動(dòng)效的形式循環(huán)播放,以此吸引用戶(hù)進(jìn)行簽到操作。通過(guò)動(dòng)效強(qiáng)化功能的吸引力,提高用戶(hù)的操作概率。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
六、可視化設(shè)計(jì)強(qiáng)化任務(wù)流程
 
生硬的文字表達(dá)無(wú)法打動(dòng)用戶(hù)的參與度,圖形化、趣味性的可視化表達(dá)更能打動(dòng)用戶(hù)。
 
One More App 通過(guò)對(duì)選項(xiàng)內(nèi)容進(jìn)行圖形化表達(dá),讓用戶(hù)更直觀地判斷,可視化的設(shè)計(jì)也讓任務(wù)流程的選擇變得更輕松。不僅讓選項(xiàng)內(nèi)容更直觀,也能提高用戶(hù)的參與度,達(dá)到采集數(shù)據(jù)的目的。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
七、動(dòng)態(tài)封面更吸引人
 
封面設(shè)計(jì)是吸引用戶(hù)點(diǎn)擊欄目的關(guān)鍵,通過(guò)豐富多樣的設(shè)計(jì)表達(dá)逐步拉開(kāi)差異,而動(dòng)態(tài)封面變得尤為重視。
 
天天跳繩 App 首頁(yè)中,趣運(yùn)動(dòng)欄目的活動(dòng)主題封面進(jìn)行了動(dòng)靜結(jié)合。相較于靜態(tài)封面而言,動(dòng)態(tài)封面不僅更吸引人,也顯得很有趣味性。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
八、賦予功能營(yíng)銷(xiāo)屬性
 
挖掘營(yíng)銷(xiāo)點(diǎn)是提高產(chǎn)品變現(xiàn)力的關(guān)鍵,如何在用戶(hù)體驗(yàn)和營(yíng)銷(xiāo)曝光度中做平衡,需要我們不斷思考和探索。
 
微博 App 內(nèi)的營(yíng)銷(xiāo)布局點(diǎn)很多,在發(fā)現(xiàn)欄目中進(jìn)行下拉刷新時(shí),有時(shí)也會(huì)結(jié)合活動(dòng)或者品牌廣告。在不改變功能屬性的基礎(chǔ)上,融入營(yíng)銷(xiāo)屬性,是一個(gè)不錯(cuò)的嘗試。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
九、趣味性的設(shè)置按鈕
 
通過(guò)設(shè)置按鈕/開(kāi)關(guān)等進(jìn)行選項(xiàng)或者功能切換,一枚小小的按鈕也可以進(jìn)行更好的設(shè)計(jì)發(fā)揮,往往細(xì)微之處才能體現(xiàn)出產(chǎn)品的體驗(yàn)。
 
進(jìn)入騰訊動(dòng)漫 App 在“我的”版塊,進(jìn)行性別設(shè)置和夜間/日間切換時(shí),按鈕設(shè)計(jì)結(jié)合趣味性的動(dòng)效表達(dá)。小小的按鈕變得更加形象可愛(ài),更能吸引用戶(hù)進(jìn)行設(shè)置和體驗(yàn)。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”
 
十、細(xì)微動(dòng)效讓圖標(biāo)更精致
 
微動(dòng)效在圖標(biāo)設(shè)計(jì)中的運(yùn)用非常普及,通常是為了突出點(diǎn)擊狀態(tài)或者重點(diǎn)功能,而用于所有圖標(biāo)的案例相對(duì)較少。
 
最近在體驗(yàn)馬蜂窩 App 的時(shí)候,發(fā)現(xiàn)首頁(yè)金剛區(qū)圖標(biāo)全部都帶有微動(dòng)效,動(dòng)效表達(dá)不會(huì)很夸張,都是細(xì)微的點(diǎn)綴。不僅點(diǎn)綴了圖標(biāo)設(shè)計(jì),也讓圖標(biāo)顯得更精致和趣味,細(xì)微的動(dòng)效不會(huì)使得整體互相干擾,是一個(gè)非常不錯(cuò)的金剛區(qū)圖標(biāo)設(shè)計(jì)方案。
設(shè)計(jì)靈感來(lái)源于“善于發(fā)現(xiàn)”


作者:黑馬青年
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專(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。

關(guān)鍵詞:UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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ā)

探索web端和移動(dòng)端的差異和解決方案

博博

市面上主流的界面設(shè)計(jì)主要包括移動(dòng)端、web端、桌面端、硬件、插件等,app和網(wǎng)站設(shè)計(jì)是大部分設(shè)計(jì)師最常見(jiàn)的設(shè)計(jì)需求,這兩個(gè)也是最核心的設(shè)計(jì)端平臺(tái),所以明白web端和移動(dòng)端設(shè)計(jì)的相似和差異并且知道如何應(yīng)對(duì)是至關(guān)重要的。
整體來(lái)說(shuō),移動(dòng)端的設(shè)計(jì)是更可控的,web端的設(shè)計(jì)難度實(shí)際更高,上限也更高。但是想要做好web端的設(shè)計(jì)并不難,只要明白web端設(shè)計(jì)時(shí)需要考慮的因素和解決辦法,那么所有問(wèn)題自然迎刃而解。
 
一、文本
 
1. 大小
總體上,移動(dòng)端和web端的字體規(guī)范是一致的,同一套字體大小都可以在雙端有好的識(shí)別和視覺(jué)效果。唯一細(xì)微的區(qū)別是瀏覽器支持的最小字體大小是12,所以在web端要摒棄12以下的字號(hào)。實(shí)際上這并不會(huì)增加你的web端設(shè)計(jì)難度,因?yàn)閣eb端的設(shè)計(jì)空間是足夠的。
 
2.長(zhǎng)度
設(shè)計(jì)中往往需要考慮文案長(zhǎng)度的問(wèn)題,移動(dòng)端受到屏幕空間的限制往往更容易遇到問(wèn)題,你需要考慮當(dāng)前文本段是否能在你所預(yù)留的空間放得下,對(duì)此可以參考以下幾種解決辦法:
  • 高度自適應(yīng):也就是換行顯示,大部分的文本段不可能無(wú)限換行,也應(yīng)該有字?jǐn)?shù)限制,所以選擇這一個(gè)解決辦法,正常也需要設(shè)定一個(gè)高度極限值。
  • 超出省略:當(dāng)文本段的完整性不是那么重要,且需要漏出,那么這是一個(gè)不錯(cuò)的方法
  • 字號(hào)自適應(yīng)縮小:這正常用在金融類(lèi)產(chǎn)品的數(shù)字顯示中,比如余額等,當(dāng)小數(shù)點(diǎn)過(guò)多或者金額過(guò)大導(dǎo)致的數(shù)字文本端過(guò)長(zhǎng)時(shí),數(shù)字是無(wú)法換行或省略的,所以你可以選擇字號(hào)自適應(yīng)縮小。
二、屏幕大小
移動(dòng)端和web端最直觀的差異就是屏幕大小的差異,移動(dòng)端小,且各設(shè)備的差異化細(xì)微,web端的空間大,且不同設(shè)備的屏幕差異大,所以就有了幾點(diǎn)主要差異:
 
1. 布局
移動(dòng)端整體上是自上而下的設(shè)計(jì)布局,寬度受限比較嚴(yán)重,所以除了一些左滑手勢(shì)帶來(lái)的橫向空間拓展,布局的變化上不大。
web端因?yàn)榭臻g大,所以就有了更多的布局可能性,例如左右布局,居中布局,左中右布局,或是全屏自適應(yīng)布局。這些布局方式也各有各的優(yōu)缺點(diǎn)。
所以設(shè)計(jì)一個(gè)網(wǎng)站時(shí),往往需要多個(gè)布局配合使用,能讓你的網(wǎng)站視覺(jué)感受更舒適,利用率上更合理。切忌為了美觀或者方便等原因死磕一個(gè)布局方式。當(dāng)然,居中布局是最萬(wàn)能的一個(gè)布局,如果你暫時(shí)沒(méi)辦法掌控多個(gè)布局,那么居中布局是你最佳的選擇。
 
2. 適配
前文說(shuō)了,因?yàn)閣eb端的設(shè)備差異大,所以你需要在設(shè)計(jì)時(shí)考慮小屏筆記本和大屏顯示器的適配問(wèn)題,甚至是用戶(hù)手動(dòng)拉動(dòng)瀏覽器寬度時(shí)所得到的適配反饋也需要考慮其中。
適配不是必須的,因?yàn)檫m配的成本較高,復(fù)雜的頁(yè)面往往需要設(shè)計(jì)出多個(gè)斷點(diǎn)頁(yè)面去讓開(kāi)發(fā)根據(jù)頁(yè)面寬度重新適配內(nèi)容。所以大部分的居中布局的網(wǎng)站,是不做適配的,因?yàn)槟阒恍枰刂颇愕膬?nèi)容寬度能在13寸筆記本完整展示,其他的就是極小部分用戶(hù)的需求了。
web端到移動(dòng)端的適配往往需要重構(gòu),也就是把當(dāng)前網(wǎng)站的內(nèi)容,重新在手機(jī)寬度下做設(shè)計(jì),結(jié)合上文文本部分的內(nèi)容,請(qǐng)不要想當(dāng)然的把字號(hào)縮小。只需要考慮排版和功能是否需要?jiǎng)h減的問(wèn)題。 
 
3. 彈窗
移動(dòng)端受到屏幕限制,彈窗的更多是banner的彈出,提示的作用,或者是個(gè)別簡(jiǎn)單篩選操作,在移動(dòng)端很難在彈窗上放置很多的輸入等復(fù)雜操作
在web端的設(shè)計(jì)中,一定要巧用彈窗,簡(jiǎn)單的編輯或著創(chuàng)建等操作都可以用彈窗代替,不僅可以使操作更聚焦,也可以減少頁(yè)面跳轉(zhuǎn)來(lái)縮短路徑。
 
三、交互手勢(shì)
由于操作媒介的不同,導(dǎo)致移動(dòng)端和web的操作手勢(shì)有很大的區(qū)別,移動(dòng)端是用手指操作,web端是鼠標(biāo)操作,手指操作決定了手勢(shì)的多樣性,鼠標(biāo)的操作決定了點(diǎn)擊的精確,并且由于鼠標(biāo)的操作反饋是分階段的,需要在每個(gè)階段都給予用戶(hù)相應(yīng)的反饋來(lái)打造更好的用戶(hù)體驗(yàn)。
 
1. 狀態(tài)
移動(dòng)端中對(duì)于操作的反饋主要聚焦于手指點(diǎn)擊后的反饋,懸停態(tài)往往被長(zhǎng)按代替。而web端鼠標(biāo)操作存在三個(gè)狀態(tài),一個(gè)是正常狀態(tài),一個(gè)是懸停狀態(tài),一個(gè)是按下?tīng)顟B(tài),這三個(gè)狀態(tài)需要在設(shè)計(jì)師考慮并設(shè)計(jì)來(lái)向開(kāi)發(fā)說(shuō)明。web端中不同元素的常見(jiàn)狀態(tài)(主要為懸停態(tài))區(qū)分方式需要明白:
  • button:用顏色區(qū)分,常見(jiàn)的方式是改變顏色的明度,懸停增加明度,按下降低明度
  • icon:icon的狀態(tài)區(qū)分更多是在懸停狀態(tài)上,常見(jiàn)方式有:改變顏色;改變icon形態(tài)(如線(xiàn)性變面性);為icon添加背景色塊(如圓形灰色背景)。
  • 文字:文字的狀態(tài)區(qū)分除了顏色之外,可以利用文字自帶的屬性,如字重,字體大小,甚至可以在個(gè)別海外產(chǎn)品中看到通過(guò)改變字間距來(lái)表示懸停狀態(tài)。
  • 卡片:卡片的懸停設(shè)計(jì)更加的多樣,如改變填充色;改變描邊顏色;增加投影,比較有趣的有改變卡片大??;輕微改變卡片透視;改變卡片的位置,如懸停時(shí)卡片向上輕微移動(dòng)。
 
由于web端獨(dú)有的懸停手勢(shì),你可以在懸停這個(gè)手勢(shì)大作文章,如果你了解linear風(fēng)格的話(huà),或者經(jīng)常瀏覽國(guó)外產(chǎn)品的話(huà),許多網(wǎng)站會(huì)在鼠標(biāo)懸??ㄆ瑫r(shí)產(chǎn)生動(dòng)效,動(dòng)效不限于卡片元素(插畫(huà)、圖標(biāo)、可視化表格等)的動(dòng)畫(huà);光影描邊的循環(huán)。懸停按鈕時(shí),箭頭的位置變動(dòng),或者其他動(dòng)畫(huà)效果。更酷炫的還有鼠標(biāo)與卡片透視的交互,甚至與鼠標(biāo)與全局頁(yè)面的交互,如水波紋等。
 
2. 操作按鈕
整體來(lái)說(shuō),web端基于屏幕大小的優(yōu)勢(shì)和狀態(tài)的多樣,在操作按鈕漏出數(shù)量和方式上會(huì)更加的多樣。
移動(dòng)端獨(dú)有的是長(zhǎng)按手勢(shì)和左滑右滑手勢(shì),所以移動(dòng)端會(huì)把一些操作放到左滑手勢(shì)中,最常見(jiàn)的如消息列表的置頂、刪除等。長(zhǎng)按手勢(shì)更多的是彈出更多操作,或是產(chǎn)生可拖動(dòng)效果。
web端拿列表舉例,基于屏幕的大小的優(yōu)勢(shì),可以將更多操作直接在列表右側(cè)直接漏出,用戶(hù)的操作路徑更短,觸達(dá)率自然就更高。拿卡片舉例,button的存在有的時(shí)候會(huì)影響到卡片的大小和美觀,所以有些操作往往可以藏到懸停狀態(tài)里,懸停操作不需要學(xué)習(xí),所以用戶(hù)不會(huì)為此感到疑惑,也可以保證功能的完整性。
 
四、設(shè)計(jì)思路
關(guān)于各個(gè)模塊如何設(shè)計(jì)并不在這里展開(kāi),我想表達(dá)是在設(shè)計(jì)稿設(shè)計(jì)時(shí)的一些操作思路,或者說(shuō)是組件的搭建思路。
 
1. 盒子思維
如果你對(duì)前端開(kāi)發(fā)有一定的了解,那么你一定懂得盒子套盒子。設(shè)計(jì)也是如此,需要給你的每個(gè)設(shè)計(jì)模塊建議一塊獨(dú)有的盒子。這是區(qū)別于間距或分割線(xiàn)的區(qū)分模塊的思路的。
舉個(gè)例子,你有圖片,主標(biāo)題,副標(biāo)題三個(gè)元素形成一個(gè)小模塊,那么你在確定好排版之后,你需要一個(gè)盒子將他們裝起來(lái),那么這個(gè)模塊必須有它自己的寬度,高度。換個(gè)角度理解也就是它需要有一定的上下左右間距,在figma中,這個(gè)盒子就是你的frame,高級(jí)一點(diǎn)就是你的自動(dòng)布局。這個(gè)盒子的大小就決定了這個(gè)模塊的操作熱區(qū),這也方便你在設(shè)計(jì)做出你的懸停效果。
這個(gè)設(shè)計(jì)思維適用于web端和移動(dòng)端,且十分重要,所以盡量避免在設(shè)計(jì)圖出現(xiàn)各個(gè)元素分別散落的情況,這不僅不利于你的設(shè)計(jì)稿管理,也不利于開(kāi)發(fā)的查看。
 
2. 新手如何參考
在進(jìn)行web端設(shè)計(jì)時(shí),如果你對(duì)web端設(shè)計(jì)一無(wú)所知,也無(wú)需驚慌。你可以找到合適的參考網(wǎng)站,并且分析它每個(gè)模塊的高度,間距等,去模仿他,并且從中得出規(guī)律。
拿web端的導(dǎo)航欄舉例,假設(shè)你糾結(jié)于web端的導(dǎo)航欄高度設(shè)置多少,你可以找到參考的網(wǎng)站,使用檢查功能(F12)去查看高度,或粗暴的截圖查看高度即可。當(dāng)然,在此之前,你需要確定這個(gè)模塊的高度是不會(huì)隨屏幕大小改變而改變的。
 
3. 自適應(yīng)布局
無(wú)論是web端設(shè)計(jì)還是移動(dòng)端設(shè)計(jì),當(dāng)你在設(shè)計(jì)模塊或搭建組件時(shí),善用自動(dòng)布局,這不僅有利于你設(shè)計(jì)圖高效率修改,也能應(yīng)對(duì)你的web端可能出現(xiàn)的適配情況。這需要考驗(yàn)?zāi)愕膄igma能力,如果大家有興趣,后續(xù)我可以出一些figma基礎(chǔ)、組件、自動(dòng)布局等相關(guān)教程同大家探討。

作者:PONEPENG
來(lái)源:站酷

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專(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。

關(guān)鍵詞:UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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ā)

logo設(shè)計(jì)全流程及案例分析

博博

作者:陽(yáng)陽(yáng)設(shè)計(jì)師
來(lái)源:知乎

一、前期調(diào)研

作為設(shè)計(jì)團(tuán)隊(duì),我們知道一個(gè)品牌的誕生與發(fā)展,每個(gè)公司都投入了巨大的資源和心血。logo設(shè)計(jì)就像父母給孩子起名,被企業(yè)寄予了太多的期待與美好的祝愿,它不僅僅是一個(gè)圖形一串文字,更代表了企業(yè)的形象和深厚的文化。因此我們?cè)谔峁┰O(shè)計(jì)方案時(shí),也同樣肩負(fù)著品牌價(jià)值和品牌責(zé)任傳輸?shù)穆氊?zé),在接到設(shè)計(jì)任務(wù)之后,并不會(huì)漫無(wú)目的的就開(kāi)始投入到logo設(shè)計(jì)之中。而是要對(duì)服務(wù)的公司進(jìn)行充分系統(tǒng)的調(diào)研。

調(diào)研有助于我們對(duì)企業(yè)的文化、核心、價(jià)值觀、產(chǎn)品等方面進(jìn)行全面的了解。根據(jù)企業(yè)客戶(hù)的消費(fèi)行為、喜好,競(jìng)爭(zhēng)品牌進(jìn)行分析總結(jié),有針對(duì)性的制定創(chuàng)意和設(shè)計(jì)方案,避免與其他品牌“撞臉”。

給大家介紹幾個(gè)我經(jīng)常會(huì)遇到的研究方法:

1. 用戶(hù)采訪(fǎng)

通過(guò)對(duì)客戶(hù)的了解,團(tuán)隊(duì)預(yù)先準(zhǔn)備一些問(wèn)題,把那些重要的信息進(jìn)行記錄匯總,這樣可以得到第一手的客戶(hù)需求??蛻?hù)是很愿意跟設(shè)計(jì)師進(jìn)行品牌分享的,但是聊天式的采訪(fǎng)往往達(dá)不到設(shè)計(jì)預(yù)期,因此我們一定要引導(dǎo)客戶(hù)進(jìn)行闡述,一點(diǎn)點(diǎn)把品牌最重要的信息和關(guān)鍵詞梳理出來(lái),這個(gè)過(guò)程對(duì)把握設(shè)計(jì)概念十分重要。

客戶(hù)案例

2. 領(lǐng)域調(diào)研

很多客戶(hù)表示不了解,為啥設(shè)計(jì)師可以設(shè)計(jì)各個(gè)行業(yè)的logo,甚至很多客戶(hù)只找做過(guò)他們這個(gè)行業(yè)設(shè)計(jì)的設(shè)計(jì)師,其實(shí)大可不必這樣,因?yàn)橐粋€(gè)成熟的設(shè)計(jì)團(tuán)隊(duì),做設(shè)計(jì)前都會(huì)對(duì)這個(gè)企業(yè)進(jìn)行系統(tǒng)的領(lǐng)域研究,況且任何一個(gè)團(tuán)隊(duì)也不可能做過(guò)所有行業(yè)的設(shè)計(jì)。所以我們常常通過(guò)調(diào)研系統(tǒng)的了解企業(yè)及其上下游的品牌特征,并對(duì)此進(jìn)行拓展梳理,而設(shè)計(jì)語(yǔ)言與方法是相通的,越成熟的設(shè)計(jì)師越能進(jìn)行精準(zhǔn)的設(shè)計(jì)。

(如該領(lǐng)域的視覺(jué)偏好是什么,對(duì)企業(yè)環(huán)境及產(chǎn)品進(jìn)行實(shí)地考察,其他競(jìng)品的品牌符號(hào)有什么共性和區(qū)別,企業(yè)符號(hào)可以從哪些視覺(jué)方面進(jìn)行表達(dá)等等)

3. 關(guān)鍵詞頭腦風(fēng)暴

以最近給客戶(hù)做的一個(gè)項(xiàng)目“食品加工器械”的logo設(shè)計(jì)為例,針對(duì)這個(gè)關(guān)鍵詞我們可以想到什么?“機(jī)械、科技、食品、高端”等等,根據(jù)這些詞匯,我們?cè)俅温?lián)想,拓展出二級(jí)、三級(jí)的詞語(yǔ),最終找出整個(gè)思維導(dǎo)圖中最具創(chuàng)新性并符合客戶(hù)定位的關(guān)鍵詞。

客戶(hù)案例

4. 其他方式

其實(shí)可用的方法還有很多,如:實(shí)地調(diào)研法、抽樣調(diào)研法、統(tǒng)計(jì)調(diào)查法、文獻(xiàn)調(diào)研法等,在這里就不一一列舉了。

俗話(huà)說(shuō):“知己知彼,百戰(zhàn)不殆”,我們?cè)诹私饪蛻?hù)的基本訴求,深度挖掘企業(yè)核心價(jià)值與內(nèi)涵之后,才能對(duì)企業(yè)進(jìn)行明確的定位?;诖?,產(chǎn)出最能代表企業(yè)的超級(jí)符號(hào)。

5. 案例分享

民宿品牌愛(ài)彼迎在升級(jí)品牌形象時(shí)便做了大量的設(shè)計(jì)調(diào)研,為了更好的理解與傳達(dá)愛(ài)彼迎的經(jīng)營(yíng)理念,設(shè)計(jì)工作室Design Studio橫跨4個(gè)大洲,往返13個(gè)城市,試住了18間房子,并與不同國(guó)家的愛(ài)彼迎員工進(jìn)行交流。甚至深入愛(ài)彼迎公司內(nèi)部,與工程師、設(shè)計(jì)師一同工作,共同交流,只為呈現(xiàn)出更完美的愛(ài)彼迎品牌視覺(jué)。通過(guò)長(zhǎng)達(dá)數(shù)月的工作,最終完成了這一設(shè)計(jì)。

進(jìn)行了大量調(diào)研,我們才有足夠的話(huà)語(yǔ)權(quán)進(jìn)行創(chuàng)作。我們根據(jù)調(diào)研的結(jié)果,找出最能體現(xiàn)品牌價(jià)值的創(chuàng)新點(diǎn),再開(kāi)始進(jìn)入設(shè)計(jì)過(guò)程。

二、繪制草圖

調(diào)研完成后,為得到最適合的設(shè)計(jì)方案,我們常常會(huì)使用頭腦風(fēng)暴的方式獲得設(shè)計(jì)初稿。在一個(gè)集中時(shí)間段內(nèi),將之前的提取的關(guān)鍵詞進(jìn)行草圖創(chuàng)意繪制,使用圖形打散、重組的手法,將抽象思維用圖形語(yǔ)言表達(dá)出來(lái)。要求既符合品牌行業(yè)屬性,又具有創(chuàng)新突破的元素。

草圖繪制完成之后,我們會(huì)對(duì)草圖進(jìn)行篩選,過(guò)濾掉實(shí)施性弱、美觀性差、不夠深刻的創(chuàng)意點(diǎn)。挑選出最適合客戶(hù)需求的方案進(jìn)行深入。大量的創(chuàng)意會(huì)在這一階段經(jīng)歷打破與重塑,推倒與重來(lái),優(yōu)中選優(yōu),只為呈現(xiàn)最好的方案。

挑選最優(yōu)方案后,我們才開(kāi)始進(jìn)行Logo的下一個(gè)階段——成稿制圖,而且會(huì)推進(jìn)幾個(gè)可行性較高的方案,這樣在提案時(shí),方便客戶(hù)進(jìn)行選擇。

三、成稿制圖

成稿制圖通常被甲方理解為logo設(shè)計(jì)的主要部分,因此會(huì)覺(jué)得設(shè)計(jì)只是做圖,卻忽略了設(shè)計(jì)師在前期投入的大量時(shí)間和深度思考,還容易給人產(chǎn)生Logo設(shè)計(jì)十分簡(jiǎn)單的錯(cuò)覺(jué)。我們也經(jīng)常遇到這樣的客戶(hù)“logo不就是做個(gè)圖么,怎么這么貴?”這個(gè)時(shí)候,一定要跟客戶(hù)進(jìn)行溝通,讓他們了解到logo設(shè)計(jì)的全過(guò)程是什么,為什么需要花費(fèi)大量時(shí)間,如果客戶(hù)知道你為此付出了這么多的經(jīng)歷,就會(huì)得到他們的理解。

實(shí)際制圖只是將我們頭腦中的想法表現(xiàn)出來(lái),因此這一步驟僅占設(shè)計(jì)過(guò)程的十分之一。

四、細(xì)節(jié)優(yōu)化與調(diào)整

經(jīng)過(guò)之前的努力,到這時(shí),基本設(shè)計(jì)方案已經(jīng)完成。這一階段主要針對(duì)Logo的細(xì)節(jié)、外形、顏色等方面進(jìn)行調(diào)整。力求設(shè)計(jì)感、藝術(shù)感、實(shí)用性相統(tǒng)一。

案例分析

我們來(lái)看看蘋(píng)果公司是如何做的:蘋(píng)果公司在Logo設(shè)計(jì)時(shí),將圖形定義為一個(gè)蘋(píng)果。但當(dāng)Logo制作出來(lái)以后,圖形的辨識(shí)度并不高。為了增強(qiáng)圖形的識(shí)別性,避免讓消費(fèi)者誤認(rèn)為是“櫻桃”,設(shè)計(jì)師決定在Logo圖形上增加更多的趣味性,于是“被咬了一口的蘋(píng)果”應(yīng)運(yùn)而生,可見(jiàn)細(xì)節(jié)修改至關(guān)重要。

另外,在基本方案完成的基礎(chǔ)上,設(shè)計(jì)師會(huì)制定Logo使用規(guī)范,確保Logo在延展應(yīng)用過(guò)程中能夠保持高度的品牌辨識(shí)度。

以麥當(dāng)勞為例,在品牌升級(jí)前,麥當(dāng)勞長(zhǎng)久以來(lái)并沒(méi)有制定一個(gè)嚴(yán)格統(tǒng)一使用規(guī)范,不同國(guó)家地區(qū)的麥當(dāng)勞Logo也并不相同,這對(duì)于麥當(dāng)勞塑造品牌形象是非常不利的。

因此,麥當(dāng)勞制定了一系列的標(biāo)志應(yīng)用規(guī)范,此后視覺(jué)上,統(tǒng)一規(guī)范的麥當(dāng)勞變得更加具有辨識(shí)度。

為使Logo更具形式美,我們會(huì)對(duì)logo進(jìn)行視覺(jué)優(yōu)化。例如黃金分割比例是我們?cè)谶@一階段比較常用的手法。

為使Logo設(shè)計(jì)更理性、科學(xué)、美觀,我們常常通過(guò)黃金分割比例來(lái)構(gòu)建Logo。當(dāng)事物之間各部分的比例呈現(xiàn)1:0.618的比例時(shí),最能引起視覺(jué)上的美感,這一比例充滿(mǎn)了理性與感性的統(tǒng)一。良好的比例關(guān)系在復(fù)制和傳播的過(guò)程中更加方便快捷,也使后期的加工制造過(guò)程更加精準(zhǔn)。

以上是我對(duì)logo設(shè)計(jì)流程的介紹,而這些其實(shí)也只是logo設(shè)計(jì)過(guò)程中的比較重要的步驟,一些具體的設(shè)計(jì)細(xì)節(jié)會(huì)根據(jù)每個(gè)不同的方案也會(huì)不同和更加深入,這樣大家就明白了,為啥logo設(shè)計(jì)這么貴了吧,可不是單單一個(gè)圖例制作那么簡(jiǎn)單

接下來(lái)再給大家分享一些經(jīng)典的Logo設(shè)計(jì)案例,一起更加深入的理解那些著名的Logo設(shè)計(jì)背后的故事,一定對(duì)你有所啟發(fā)~

五、Logo案例分享

1. 百事可樂(lè)logo

2006年,百事可樂(lè)花費(fèi)100萬(wàn)美元升級(jí)了logo。當(dāng)品牌視覺(jué)手冊(cè)發(fā)布之后,甚至有網(wǎng)友調(diào)侃“看完百事的logo設(shè)計(jì),終于明白logo的設(shè)計(jì)費(fèi)為什么這么貴了。”

新的logo圖形不再對(duì)稱(chēng),字體也去掉邊角變得纖細(xì)。與之前相比,現(xiàn)在的Logo更加扁平,便于記憶。

兩條曲線(xiàn),似是流動(dòng)的液體,也像是微笑著的人。可別小看這簡(jiǎn)單的兩條曲線(xiàn),弧度細(xì)微的變化都會(huì)產(chǎn)生不同的效果。百事可樂(lè)還加入了幾何角度的思考,通過(guò)幾何學(xué)解釋了Logo的原理。

在logo比例關(guān)系的處理上,也融入了對(duì)哲學(xué)問(wèn)題的思考,從古代陰陽(yáng)五行說(shuō)到黃金分割比例,最后到地球能量磁場(chǎng),小小的Logo蘊(yùn)含了太多。

但是,Logo還存在一些不足之處,如:?jiǎn)紊珣?yīng)用時(shí)缺乏辨識(shí)度、需要增加邊框線(xiàn)使用等問(wèn)題,導(dǎo)致Logo在具體使用時(shí),會(huì)有一定的局限性。


2. 蘋(píng)果logo

初代的蘋(píng)果logo描繪了“坐在樹(shù)下看書(shū)的牛頓”這樣一副圖案。相比于追求簡(jiǎn)約、便于記憶的Logo,這個(gè)圖案無(wú)疑太過(guò)復(fù)雜,在傳播上也有很大的劣勢(shì)。可能是意識(shí)到了這一點(diǎn),新logo進(jìn)行了突破性的改變。

除了圖形上創(chuàng)新之外,顏色上也采用了豐富的彩虹色。它標(biāo)志著第一臺(tái)支持彩色電腦的誕生。整個(gè)Logo營(yíng)造出了溫暖、積極的氛圍,為企業(yè)注入了旺盛的生命力。

作為一個(gè)科技公司的logo,極具科技感的藍(lán)色與邊角處高光、陰影等細(xì)節(jié)為L(zhǎng)ogo營(yíng)造出了立體感。

在追求極致簡(jiǎn)約的時(shí)代,純黑的logo更便于識(shí)別記憶。

取代經(jīng)典純黑logo的,是具有光澤感的蘋(píng)果Logo。與之前相比,Logo圖形更為流暢、水潤(rùn)。在保持識(shí)別性的基礎(chǔ)上,整體造型與材質(zhì)也更加飽滿(mǎn)。

隨著iphone的推出,高光版本Logo被鍍鉻效果所取代。

簡(jiǎn)約、易記的logo圖形,也向我們展示了近年標(biāo)志發(fā)展簡(jiǎn)約化的設(shè)計(jì)趨勢(shì)。時(shí)至今日,蘋(píng)果仍延續(xù)這一Logo。

去年,蘋(píng)果公司更是把Logo玩出了花樣,動(dòng)態(tài)的、靜態(tài)的、豐富的材質(zhì),讓蘋(píng)果logo“多到用不完”。

因此一個(gè)好的logo設(shè)計(jì)是一定要給logo預(yù)留足夠多的延展空間的


3. 騰訊logo

在成立20周年之際,騰訊更新了logo。仔細(xì)觀察字體的筆畫(huà),我們會(huì)發(fā)現(xiàn),Logo整體傾斜了。7度太小、9度太大,傾斜8度的騰訊字體自帶科技感與運(yùn)動(dòng)感。

與logo一同發(fā)布的,還有一套定制品牌字體“騰訊字庫(kù)”,這套字體包含了中英日文拉丁文多種類(lèi)別,通過(guò)統(tǒng)一的字體,更好的傳達(dá)了騰訊的企業(yè)個(gè)性,強(qiáng)化了企業(yè)形象的塑造。

由于漢字都是方正的,因此,在漢字的世界中,斜體漢字的概念聞所未聞。由于斜體的漢字很難依靠傳統(tǒng)的字體結(jié)構(gòu)。在文字的正負(fù)形、筆畫(huà)、空間美感方面,設(shè)計(jì)師需要把握平衡與速度之間微妙的制衡。

在字體的筆畫(huà)末端進(jìn)行切角處理。使文字更具力量感與速度感。“騰訊”兩字也做出了細(xì)微的調(diào)整,從筆畫(huà)、間隔到轉(zhuǎn)角弧度都發(fā)生了變化。

騰訊旗下產(chǎn)品眾多,但風(fēng)格形式都各不相同。“騰訊字庫(kù)”有助于這些項(xiàng)目在視覺(jué)形象上的統(tǒng)一。

Logo整體顏色也變成了高明度的藍(lán)色,這個(gè)顏色是與色彩機(jī)構(gòu)潘通合作,定制了品牌標(biāo)準(zhǔn)色。藍(lán)色取自海洋與天空,蘊(yùn)含著極致的理性,體現(xiàn)了對(duì)技術(shù)精益求精的追求。

來(lái)自彩通的國(guó)際色彩大師Leatrice Eiseman,也是騰訊藍(lán)的開(kāi)發(fā)者之一介紹道:“它可以非常好的體現(xiàn)出騰訊的原則和哲學(xué),也就是技術(shù)方面的精益求精對(duì)技術(shù)的追求,以及會(huì)不斷地去追求新的創(chuàng)新。”

由此,還進(jìn)行了一系列應(yīng)用部分的延展。


4. 小米logo

小米斥資200萬(wàn)邀請(qǐng)日本設(shè)計(jì)大師原研哉操刀設(shè)計(jì)新logo。小米logo剛一發(fā)布,便引起了熱烈的討論,只不過(guò)是由方變圓,憑什么值200萬(wàn)?

 

我們知道,品牌Logo的升級(jí)換代,往往要考慮辨識(shí)度對(duì)品牌的影響。一旦失去了辨識(shí)度,相當(dāng)于拋棄了原有幾十年積累的品牌資產(chǎn),相當(dāng)于重新認(rèn)識(shí)品牌。因此,近年來(lái)的品牌重塑,都是在保留了原版Logo的識(shí)別性的基礎(chǔ)上,融入了更具價(jià)值的品牌理念。

作為設(shè)計(jì)行業(yè)的領(lǐng)軍人物。原研哉致力于在設(shè)計(jì)中融入東方美學(xué)的概念,將復(fù)雜的事務(wù)化繁為簡(jiǎn)。深度理解小米“以科技創(chuàng)造美好生活為使命”的品牌理念后,原研哉提出“探索科技與生命的關(guān)系”融入“ALIVE”的概念,即接近生命的形態(tài)。

Logo中融入最具中國(guó)特點(diǎn)的“人情味”,整個(gè)logo歷時(shí)三年,讓小米的Logo具有了煙火氣息,這也符合小米致力于發(fā)展一種高品質(zhì)、常態(tài)化生活的品牌調(diào)性。

不僅如此,這個(gè)外形還運(yùn)用到一個(gè)數(shù)學(xué)公式:|x|^n+|y|^n=1,通過(guò)“n”的變化來(lái)推算Logo進(jìn)行由方至圓的演變,經(jīng)過(guò)多種對(duì)比,最終選擇了當(dāng)n=3時(shí),形成集美感與寓意于一身的Logo圖形,也是最具“ALIVE”內(nèi)涵的代表圖形。

小米logo的英文字體也變得更加靈活圓潤(rùn),而“ALIVE”的理念也貫穿了整個(gè)視覺(jué)系統(tǒng),不論是產(chǎn)品展示還是品牌宣傳,新Logo都變得更加靈活生動(dòng)。(視頻)

在沿用橙色作為品牌標(biāo)準(zhǔn)色的基礎(chǔ)上,融入了具有科技感的黑色與銀色作為輔助色,保持識(shí)別性的同時(shí)也注入了新的活力。

 

5. 麥當(dāng)勞logo

看到這張圖片,第一時(shí)間便能聯(lián)想到麥當(dāng)勞,在消費(fèi)者心中,亮麗的金拱門(mén)早就形成了視覺(jué)符號(hào)。作為一個(gè)餐飲品牌,麥當(dāng)勞的視覺(jué)設(shè)計(jì)也不甘示弱。由于疫情,為鼓勵(lì)公眾用餐衛(wèi)生,麥當(dāng)勞將自己的logo一分為二拆分成了兩個(gè)分開(kāi)的門(mén)。

 

通過(guò)分解Logo的“M”,在品牌延展上,同樣也和其他品牌區(qū)分開(kāi)來(lái),將logo極致符號(hào)化。

明亮積極的“M”提高了麥當(dāng)勞的品牌辨識(shí)度,紅黃配色與字母“M”深入人心,哪怕只是局部,也能被一眼認(rèn)出。這得益于麥當(dāng)勞對(duì)于自身品牌的堅(jiān)持塑造,通過(guò)不斷的品牌價(jià)值輸出,來(lái)影響消費(fèi)者的心理。

時(shí)至今日,麥當(dāng)勞形成了強(qiáng)大的品牌識(shí)別符號(hào)。簡(jiǎn)約的“m”更具記憶點(diǎn)。

 

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專(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。

關(guān)鍵詞:UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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ā)

B端設(shè)計(jì)—常見(jiàn)問(wèn)題&解決方式

博博

一、UI設(shè)計(jì)師在B端產(chǎn)品界面設(shè)計(jì)時(shí),可能會(huì)遇到的問(wèn)題。
 
1.1復(fù)雜的數(shù)據(jù)可視化需求
B端應(yīng)用往往涉及復(fù)雜數(shù)據(jù),設(shè)計(jì)師需要?jiǎng)?chuàng)造清晰且有效的方式來(lái)顯示這些信息。
對(duì)于B端產(chǎn)品設(shè)計(jì)中復(fù)雜的數(shù)據(jù)可視化需求,一個(gè)詳細(xì)的解決方案需要從不同層面進(jìn)行考慮和實(shí)施:
理解用戶(hù)需求:
首先,進(jìn)行深入的用戶(hù)研究以理解不同用戶(hù)的數(shù)據(jù)需求。這可能包括用戶(hù)訪(fǎng)談、觀察和問(wèn)卷調(diào)查,以收集關(guān)于他們?nèi)绾卫斫夂褪褂脭?shù)據(jù)的信息。
選擇合適的圖表類(lèi)型:
根據(jù)數(shù)據(jù)類(lèi)型和用戶(hù)需求選擇最合適的圖表類(lèi)型。例如,時(shí)間序列數(shù)據(jù)適合折線(xiàn)圖,而比較數(shù)據(jù)則可能更適合條形圖或餅圖。同時(shí),對(duì)于更復(fù)雜的數(shù)據(jù)關(guān)系,可能需要使用散點(diǎn)圖、熱圖或樹(shù)狀圖。
簡(jiǎn)化設(shè)計(jì):
避免過(guò)度裝飾的圖表。使用清晰的軸標(biāo)簽、標(biāo)題和圖例,確保用戶(hù)能夠輕松讀懂圖表。選擇合適的顏色方案來(lái)增強(qiáng)可讀性,同時(shí)避免使用令人分心或誤解的顏色組合。
增加交互性:
交互式元素可以大大增強(qiáng)數(shù)據(jù)可視化的效果。例如,當(dāng)用戶(hù)將鼠標(biāo)懸停在圖表的某個(gè)部分時(shí),可以顯示詳細(xì)的數(shù)據(jù)點(diǎn)信息。此外,可以允許用戶(hù)通過(guò)篩選、排序或拖動(dòng)來(lái)自定義視圖。
提供上下文和引導(dǎo):
確保每個(gè)圖表都有足夠的上下文信息,比如引導(dǎo)性文本或簡(jiǎn)短的分析,幫助用戶(hù)理解數(shù)據(jù)背后的故事。這不僅包括圖表本身的解釋?zhuān)€包括如何使用圖表進(jìn)行有效決策的指導(dǎo)。
優(yōu)化性能:
對(duì)于處理大量數(shù)據(jù)的可視化,確保性能優(yōu)化是至關(guān)重要的。這可能涉及后端數(shù)據(jù)處理優(yōu)化、前端渲染優(yōu)化以及合理的數(shù)據(jù)加載策略。
用戶(hù)測(cè)試和反饋:
設(shè)計(jì)完成后,進(jìn)行用戶(hù)測(cè)試以收集反饋。觀察用戶(hù)如何與數(shù)據(jù)可視化交互,并根據(jù)他們的反饋進(jìn)行調(diào)整。這是一個(gè)持續(xù)的過(guò)程,旨在不斷提高可視化工具的有效性和用戶(hù)滿(mǎn)意度。
B端設(shè)計(jì)—常見(jiàn)問(wèn)題&解決方式
可以找到大量的參考選擇適用自己產(chǎn)品風(fēng)格的可視化,之后進(jìn)行修改。
 
1.2深層級(jí)的功能集成
與C端產(chǎn)品相比,B端產(chǎn)品可能有更深層次和復(fù)雜的功能,難以設(shè)計(jì)簡(jiǎn)潔直觀的用戶(hù)界面。
對(duì)于UI設(shè)計(jì)師在進(jìn)行B端產(chǎn)品界面設(shè)計(jì)時(shí)遇到的“深層級(jí)的功能集成”問(wèn)題,一個(gè)詳細(xì)的解決方案需要包括以下幾個(gè)關(guān)鍵策略:
模塊化設(shè)計(jì):
通過(guò)將復(fù)雜功能分解為獨(dú)立、可重用的模塊,可以簡(jiǎn)化界面并提高可維護(hù)性。每個(gè)模塊應(yīng)專(zhuān)注于單一功能或任務(wù),從而使整體系統(tǒng)更加清晰易懂。
清晰的信息架構(gòu):
建立一個(gè)邏輯清晰的信息架構(gòu)是至關(guān)重要的。這包括創(chuàng)建一個(gè)分層的菜單結(jié)構(gòu),將相關(guān)功能組織在一起,并通過(guò)適當(dāng)?shù)拿麃?lái)指導(dǎo)用戶(hù)。
分層的導(dǎo)航系統(tǒng):
為不同層級(jí)的功能提供清晰的導(dǎo)航路徑。這可能包括主導(dǎo)航菜單、次級(jí)導(dǎo)航以及面包屑導(dǎo)航等,幫助用戶(hù)理解他們?cè)趹?yīng)用中的位置以及如何訪(fǎng)問(wèn)特定的功能。
搜索功能:
隨著功能數(shù)量的增加,提供一個(gè)強(qiáng)大的搜索工具變得尤為重要。這可以幫助用戶(hù)快速找到他們需要的特定功能或信息。
自定義和個(gè)性化設(shè)置:
允許用戶(hù)根據(jù)自己的工作流程和偏好來(lái)自定義界面。這包括選擇要顯示的模塊、調(diào)整布局以及設(shè)置快捷方式等。
交互式教程和幫助文檔:
為新用戶(hù)提供交互式教程,幫助他們快速了解如何使用應(yīng)用。同時(shí),提供詳細(xì)的幫助文檔和FAQ,以便用戶(hù)可以自助解決問(wèn)題。
用戶(hù)測(cè)試和反饋:
持續(xù)進(jìn)行用戶(hù)測(cè)試和收集反饋,了解哪些功能集成方式有效,哪些需要改進(jìn)。根據(jù)用戶(hù)的反饋不斷調(diào)整和優(yōu)化界面設(shè)計(jì)。 通過(guò)實(shí)施這些策略,UI設(shè)計(jì)師可以有效解決深層級(jí)功能集成的問(wèn)題,創(chuàng)造出既強(qiáng)大又易于使用的B端產(chǎn)品界面。
B端設(shè)計(jì)—常見(jiàn)問(wèn)題&解決方式
 
1.3用戶(hù)習(xí)慣差異
B端用戶(hù)可能來(lái)自不同行業(yè),具有不同的操作習(xí)慣和偏好,滿(mǎn)足所有用戶(hù)的需求挑戰(zhàn)較大。
針對(duì)B端產(chǎn)品界面設(shè)計(jì)中的“用戶(hù)習(xí)慣差異”問(wèn)題,一個(gè)詳細(xì)的解決方案應(yīng)包括以下幾個(gè)步驟:
深入用戶(hù)研究:
通過(guò)訪(fǎng)談、問(wèn)卷調(diào)查、用戶(hù)觀察和分析用戶(hù)數(shù)據(jù)來(lái)理解不同用戶(hù)群體的習(xí)慣和需求。這些研究幫助揭示不同行業(yè)、角色和經(jīng)驗(yàn)水平的用戶(hù)如何與產(chǎn)品互動(dòng)。
多樣化的設(shè)計(jì)解決方案:
根據(jù)研究結(jié)果,設(shè)計(jì)可以適應(yīng)不同用戶(hù)需求的界面。這可能涉及提供多種布局、導(dǎo)航樣式和交互方式供用戶(hù)選擇。
個(gè)性化和定制功能:
允許用戶(hù)根據(jù)個(gè)人偏好調(diào)整界面,包括主題、布局、快捷方式和默認(rèn)設(shè)置等。
清晰的指導(dǎo)和幫助:
為了幫助用戶(hù)理解如何使用產(chǎn)品,提供詳細(xì)的幫助文檔、FAQ和交互式教程。
持續(xù)的反饋循環(huán):
設(shè)立機(jī)制收集用戶(hù)反饋,定期進(jìn)行用戶(hù)測(cè)試,并根據(jù)反饋迭代優(yōu)化產(chǎn)品。
通過(guò)這些策略,UI設(shè)計(jì)師可以更好地應(yīng)對(duì)用戶(hù)習(xí)慣的差異,創(chuàng)造出既滿(mǎn)足用戶(hù)需求又易于使用的B端產(chǎn)品界面。
 
1.4訪(fǎng)問(wèn)權(quán)限管理
需要設(shè)計(jì)復(fù)雜的權(quán)限設(shè)置界面,確保不同級(jí)別的用戶(hù)只能訪(fǎng)問(wèn)特定信息。
針對(duì)B端產(chǎn)品界面設(shè)計(jì)中的“訪(fǎng)問(wèn)權(quán)限管理”問(wèn)題,一個(gè)詳細(xì)的解決方案應(yīng)該包括以下幾個(gè)關(guān)鍵策略:
深入理解不同角色的需求:
與產(chǎn)品的各種用戶(hù)群體(如管理者、普通用戶(hù)、審計(jì)員等)進(jìn)行交流,了解他們對(duì)權(quán)限管理的需求和期望。
設(shè)計(jì)靈活的權(quán)限框架:
創(chuàng)建一個(gè)可以靈活適應(yīng)不同用戶(hù)和角色需求的權(quán)限系統(tǒng)。這包括定義不同級(jí)別的權(quán)限,如查看、編輯、管理等,并允許細(xì)粒度的控制。
直觀的權(quán)限配置界面:
為管理員設(shè)計(jì)一個(gè)清晰、直觀的界面,讓他們可以輕松分配和調(diào)整權(quán)限。提供明確的指示和反饋,確保管理員理解每種權(quán)限的含義。
透明的用戶(hù)權(quán)限指引:
向用戶(hù)清晰顯示他們的權(quán)限等級(jí)和可以訪(fǎng)問(wèn)的內(nèi)容。當(dāng)用戶(hù)嘗試進(jìn)行超出權(quán)限的操作時(shí),提供友好的錯(cuò)誤消息和指引。
權(quán)限變更的審計(jì)和記錄:
記錄所有權(quán)限的更改歷史,以便于追蹤和審計(jì)。這對(duì)于保障系統(tǒng)安全和滿(mǎn)足合規(guī)要求非常關(guān)鍵。
持續(xù)的測(cè)試和反饋:
定期進(jìn)行權(quán)限系統(tǒng)的用戶(hù)測(cè)試,收集反饋并根據(jù)反饋調(diào)整和優(yōu)化設(shè)計(jì)。
通過(guò)實(shí)施這些策略,可以構(gòu)建一個(gè)既強(qiáng)大又易于管理的訪(fǎng)問(wèn)權(quán)限系統(tǒng),從而提升B端產(chǎn)品的安全性、靈活性和用戶(hù)滿(mǎn)意度。
 
1.5多設(shè)備兼容
必須確保界面在各種設(shè)備和屏幕尺寸上均表現(xiàn)良好,
尤其是需要在寬為1440px和1920px下有效運(yùn)行。
針對(duì)B端產(chǎn)品界面設(shè)計(jì)中的“多設(shè)備兼容性”問(wèn)題,一個(gè)詳細(xì)的解決方案涉及多個(gè)層面。
首先,采用響應(yīng)式設(shè)計(jì)原則
,確保界面元素和布局能夠根據(jù)不同的屏幕尺寸和分辨率自動(dòng)調(diào)整。
其次,對(duì)于關(guān)鍵功能,進(jìn)行徹底的跨平臺(tái)測(cè)試,包括不同操作系統(tǒng)、瀏覽器和設(shè)備類(lèi)型,確保功能的一致性和穩(wěn)定性。
另外,考慮到觸控和非觸控設(shè)備的交互差異
,設(shè)計(jì)時(shí)應(yīng)確保按鈕和其他控件大小適中,易于操作。
通過(guò)這些綜合策略,可以有效解決多設(shè)備兼容性問(wèn)題,提升用戶(hù)的整體體驗(yàn)。
 
1.6專(zhuān)業(yè)術(shù)語(yǔ)和內(nèi)容
針對(duì)B端產(chǎn)品界面設(shè)計(jì)中的“專(zhuān)業(yè)術(shù)語(yǔ)和內(nèi)容”問(wèn)題,一個(gè)詳細(xì)的解決方案包括深入行業(yè)研究,確保使用對(duì)目標(biāo)用戶(hù)群來(lái)說(shuō)準(zhǔn)確、相關(guān)的術(shù)語(yǔ)。
與此同時(shí),與行業(yè)專(zhuān)家合作,以驗(yàn)證內(nèi)容的準(zhǔn)確性和適用性,確保信息傳達(dá)清晰無(wú)誤。
設(shè)計(jì)時(shí),考慮到不同用戶(hù)的知識(shí)背景,提供容易理解的解釋或工具提示,對(duì)復(fù)雜術(shù)語(yǔ)進(jìn)行簡(jiǎn)化。此外,創(chuàng)建全面的幫助文檔和在線(xiàn)教育資源,幫助用戶(hù)深入理解專(zhuān)業(yè)內(nèi)容。
定期更新內(nèi)容,確保與行業(yè)發(fā)展保持同步,同時(shí)收集用戶(hù)反饋,不斷優(yōu)化和調(diào)整術(shù)語(yǔ)和內(nèi)容的使用。通過(guò)這些方法,UI設(shè)計(jì)師可以在確保專(zhuān)業(yè)準(zhǔn)確性的同時(shí),提升用戶(hù)的理解和操作效率
 
1.7交互復(fù)雜性
了解用戶(hù):
深入理解B端用戶(hù)的工作流程和任務(wù)需求。B端用戶(hù)往往更關(guān)注效率和功能,因此設(shè)計(jì)師需要明確用戶(hù)的專(zhuān)業(yè)性和任務(wù)目標(biāo)。
簡(jiǎn)化流程:
盡管B端應(yīng)用可能功能復(fù)雜,但設(shè)計(jì)師應(yīng)努力簡(jiǎn)化用戶(hù)流程。這包括創(chuàng)建直觀的導(dǎo)航系統(tǒng),減少不必要的步驟,以及提供清晰的指引。
模塊化設(shè)計(jì):
將復(fù)雜功能拆分成獨(dú)立的模塊或組件。每個(gè)模塊專(zhuān)注于一個(gè)具體任務(wù)或功能,用戶(hù)可以根據(jù)需要組合使用它們。
定制化和個(gè)性化:
允許用戶(hù)根據(jù)自己的需求和偏好定制界面和功能。例如,提供可定制的儀表板,讓用戶(hù)可以選擇對(duì)他們最重要的信息和工具。
清晰的視覺(jué)層級(jí):
通過(guò)顏色、大小和布局等視覺(jué)元素創(chuàng)建清晰的層級(jí),幫助用戶(hù)理解信息的重要性和操作的先后順序。
 
二、不同的B端產(chǎn)品所面對(duì)的問(wèn)題也不一樣
 
不同B端產(chǎn)品可能面臨的問(wèn)題包括用戶(hù)角色多樣化、數(shù)據(jù)密集、嚴(yán)格的安全要求、高度定制的工作流程和快速變化的行業(yè)規(guī)范。在B端產(chǎn)品設(shè)計(jì)中,UI設(shè)計(jì)師可能面臨的問(wèn)題和注意事項(xiàng)舉例:
ERP系統(tǒng):
可能出現(xiàn)的問(wèn)題包括復(fù)雜的數(shù)據(jù)集成和大量的用戶(hù)角色。設(shè)計(jì)時(shí)應(yīng)注重清晰的數(shù)據(jù)可視化和靈活的權(quán)限設(shè)置。
醫(yī)療保健平臺(tái):
面臨嚴(yán)格的合規(guī)和隱私要求。設(shè)計(jì)應(yīng)確保數(shù)據(jù)安全性,同時(shí)提供易于理解的導(dǎo)航和專(zhuān)業(yè)術(shù)語(yǔ)解釋。
金融管理軟件:
需要處理復(fù)雜的交易和報(bào)告。應(yīng)關(guān)注于精確的數(shù)據(jù)展示和高效的任務(wù)流程設(shè)計(jì)。
CRM系統(tǒng):
需管理大量客戶(hù)數(shù)據(jù)和銷(xiāo)售流程,可能面臨數(shù)據(jù)整合和用戶(hù)個(gè)性化需求的問(wèn)題。設(shè)計(jì)時(shí)應(yīng)側(cè)重于清晰的數(shù)據(jù)組織和自定義視圖。
供應(yīng)鏈管理軟件:
可能面臨復(fù)雜的物流數(shù)據(jù)和多級(jí)用戶(hù)訪(fǎng)問(wèn)問(wèn)題。解決方案包括強(qiáng)大的數(shù)據(jù)過(guò)濾功能和靈活的權(quán)限設(shè)置。
項(xiàng)目管理工具:
需處理不同項(xiàng)目和任務(wù)的組織,可能面臨用戶(hù)協(xié)作和進(jìn)度追蹤的挑戰(zhàn)。設(shè)計(jì)應(yīng)側(cè)重于簡(jiǎn)化的任務(wù)管理界面和實(shí)時(shí)更新功能。
財(cái)務(wù)報(bào)告系統(tǒng):
可能遇到的問(wèn)題包括復(fù)雜的財(cái)務(wù)數(shù)據(jù)展示和各種報(bào)告格式的需求。設(shè)計(jì)時(shí)應(yīng)注重靈活的報(bào)告工具和定制的數(shù)據(jù)儀表板。
教育管理平臺(tái):
面臨多樣化的用戶(hù)群體和教育內(nèi)容的問(wèn)題。設(shè)計(jì)應(yīng)提供清晰的課程導(dǎo)航和易于訪(fǎng)問(wèn)的教學(xué)資源。
工業(yè)監(jiān)控系統(tǒng):
可能面臨實(shí)時(shí)數(shù)據(jù)流和高級(jí)監(jiān)控功能的需求。設(shè)計(jì)時(shí)應(yīng)重視數(shù)據(jù)實(shí)時(shí)更新和高效的警報(bào)系統(tǒng)。
作者:張陽(yáng)光Designer
來(lái)源:站酷

 

 

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專(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。

關(guān)鍵詞:UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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ā)

 

AIGC產(chǎn)品的設(shè)計(jì)原則

博博

一、AI產(chǎn)品形態(tài)介紹

不同的產(chǎn)品所具備的AI能力以及用戶(hù)的使用方式都是截然不同的。從產(chǎn)品功能的角度,產(chǎn)品大致可以分為三類(lèi):輔助駕駛型、內(nèi)容生產(chǎn)型、自主決策型。

輔助駕駛型

Copilot 輔助駕駛型如其名,更強(qiáng)調(diào)AI的輔助性。AI會(huì)針對(duì)某個(gè)模塊輔助用戶(hù)做出決策,或者基于用戶(hù)的操作而操作,從而幫助用戶(hù)實(shí)現(xiàn)自己靈感的落地,類(lèi)似在成熟軟件中的插件功能。微軟的Microsoft 365 Copilot 結(jié)合在已有的Word、Excel工具當(dāng)中,用戶(hù)仍然可以自己書(shū)寫(xiě)文章或表格,但也能隨時(shí)喚起AI工具進(jìn)行編輯,對(duì)于已有的文件進(jìn)行匯總、擴(kuò)寫(xiě)等編輯操作。

內(nèi)容生產(chǎn)型

內(nèi)容生產(chǎn)型是需要調(diào)用LLM的API來(lái)實(shí)現(xiàn)某一具體內(nèi)容的功能性產(chǎn)品。用戶(hù)需要針對(duì)具體場(chǎng)景下達(dá)相對(duì)詳細(xì)、明確的指令后,AI會(huì)生成內(nèi)容結(jié)果的反饋。比如大家熟悉的midjourney,用戶(hù)下達(dá)具體的內(nèi)容場(chǎng)景描述,midhourney會(huì)返回圖片生成的結(jié)果。

自主決策型

AI Agent可以進(jìn)行自主決策和執(zhí)行任務(wù),它可以通過(guò)獨(dú)立思考和調(diào)用工具逐步完成給定的目標(biāo),無(wú)需人類(lèi)去指定每一步的操作。比如,告訴 AI Agent 幫忙下單一份外賣(mài),它就可以直接調(diào)用 APP 選擇外賣(mài),再調(diào)用支付程序下單支付,無(wú)需用戶(hù)去指定每一步的操作。

二、AIGC產(chǎn)品設(shè)計(jì)原則

在AI產(chǎn)品的設(shè)計(jì)過(guò)程當(dāng)中,針對(duì)不同的產(chǎn)品形態(tài)、用戶(hù)場(chǎng)景、用戶(hù)心智需要明確其設(shè)計(jì)原則。當(dāng)前用戶(hù)對(duì)于AI工具的預(yù)期是:高性能、快速、高效和可靠。從用戶(hù)體驗(yàn)上來(lái)說(shuō),用戶(hù)與AI產(chǎn)品的交互方式、對(duì)于AI產(chǎn)品的信任程度都有別于其他軟件。我們需要在各個(gè)環(huán)節(jié)上,制定好AI產(chǎn)品的能力范疇,管理好用戶(hù)對(duì)產(chǎn)品的預(yù)期,為AI產(chǎn)品提供一個(gè)友好、可拓展的交互架構(gòu)。

原則1:讓用戶(hù)明確知道產(chǎn)品的能力范圍

在產(chǎn)品推出之前,清晰地定義產(chǎn)品的能力和限制。不要過(guò)度夸大產(chǎn)品的功能或過(guò)度承諾,而是誠(chéng)實(shí)地描述產(chǎn)品的真實(shí)能力。給予用戶(hù)在使用產(chǎn)品前充足的心理預(yù)期,用戶(hù)可以清晰的了解產(chǎn)品的能力范圍。更好地管控用戶(hù)心理預(yù)期的同時(shí),也可以向用戶(hù)傳遞產(chǎn)品的能力點(diǎn)。
 
如小庫(kù)科技詳細(xì)描述了產(chǎn)品可以應(yīng)用的功能場(chǎng)景,用戶(hù)對(duì)于場(chǎng)景化的詞語(yǔ)可以有更好的關(guān)聯(lián)聯(lián)想,對(duì)于產(chǎn)品的能力也有更好的邊界認(rèn)知。
 
科大訊飛也通過(guò)具體的場(chǎng)景化進(jìn)行產(chǎn)品功能的傳遞
 
在Liblib的模型廣場(chǎng)中,會(huì)將用戶(hù)生產(chǎn)的結(jié)果、模型以社區(qū)成果的形式進(jìn)行展示,用戶(hù)可以查看詳細(xì)的生成參數(shù)進(jìn)行嘗試,對(duì)于新手用戶(hù)也可以起到很好的內(nèi)容引導(dǎo)。

原則2:讓用戶(hù)可預(yù)期結(jié)果

人工智能決策的透明度對(duì)用戶(hù)至關(guān)重要,使用可視化工具、交互或解釋性語(yǔ)言讓用戶(hù)能夠理解AI是如何做出決策。如小庫(kù)AI,在“描述詞”的提示文案中告知用戶(hù)輸入詞的限定以及預(yù)期的生成結(jié)果,并可以通過(guò)詞庫(kù)告知用戶(hù)可以輸入哪些類(lèi)型的詞。
 
如酷家樂(lè)AI,用戶(hù)在首次使用AI工具,沒(méi)有靈感或想法的時(shí)候,引導(dǎo)并提示用戶(hù)可上傳的素材類(lèi)型,讓用戶(hù)可以有更好的目標(biāo)預(yù)期。

原則3:建立與用戶(hù)共建產(chǎn)品的機(jī)制

積極邀請(qǐng)用戶(hù)參與產(chǎn)品的設(shè)計(jì)和改進(jìn)過(guò)程,通過(guò)用戶(hù)調(diào)研、用戶(hù)測(cè)試和用戶(hù)反饋機(jī)制,了解用戶(hù)的期望和需求,并將其納入到產(chǎn)品的迭代和改進(jìn)中。如在Discord社區(qū)當(dāng)中,用戶(hù)可以在官網(wǎng)的反饋入口找到期望反饋的內(nèi)容板塊,可以進(jìn)行問(wèn)題帖子的反饋,所有的用戶(hù)群體可以對(duì)帖子的內(nèi)容進(jìn)行投票支持和評(píng)論。也就是相當(dāng)于以社區(qū)共建的形式,讓所有的用戶(hù)都可以對(duì)產(chǎn)品進(jìn)行共建維護(hù)。如果是產(chǎn)品功能本身的問(wèn)題,開(kāi)發(fā)人員可以及時(shí)響應(yīng);如果是用戶(hù)自身對(duì)產(chǎn)品的認(rèn)知問(wèn)題,社區(qū)的小伙伴也可以進(jìn)行很好的解答。

原則4:減輕用戶(hù)對(duì)數(shù)據(jù)隱私安全的顧慮

在AI盛行的當(dāng)下,數(shù)據(jù)隱私安全可以說(shuō)是非常敏感的話(huà)題了,AI泄漏數(shù)據(jù)隱私的事件也在不斷曝光。妙鴨相機(jī)的爆紅事件給我們的警示是在產(chǎn)品設(shè)計(jì)的過(guò)程中,除了思考如何利用新技術(shù)產(chǎn)出新的創(chuàng)意,對(duì)用戶(hù)數(shù)據(jù)隱私安全的保護(hù)同樣重要,它是產(chǎn)品獲得用戶(hù)信任,得以被持續(xù)使用的原因之一。
數(shù)據(jù)隱私安全涵蓋的范圍是非常廣泛的。從產(chǎn)品設(shè)計(jì)的角度來(lái)看對(duì)于數(shù)據(jù)隱私安全的保護(hù)可以從以下幾點(diǎn)考慮:

1、政策和規(guī)范的跟進(jìn)和了解

遵守?cái)?shù)據(jù)隱私和安全相關(guān)的法律法規(guī)和標(biāo)準(zhǔn)對(duì)于產(chǎn)品和應(yīng)用是最基礎(chǔ)的。在國(guó)內(nèi),7月網(wǎng)信辦等7部委聯(lián)合公布了《生成式人工智能服務(wù)管理暫行辦法》,生成式人工智能服務(wù)管理辦法的正式落地為我國(guó)AI發(fā)展打下了基礎(chǔ)。

2、積極告知,將決策權(quán)還給用戶(hù)

積極告知用戶(hù)產(chǎn)品如何保護(hù)數(shù)據(jù)隱私安全也是規(guī)避風(fēng)險(xiǎn)的一種方法。比如用戶(hù)協(xié)議中對(duì)于用戶(hù)隱私的處理,比起直接提供給用戶(hù)大段的文案讓他們?nèi)ブ鹱植榭矗诓僮髁鞒讨姓f(shuō)明產(chǎn)品對(duì)于用戶(hù)隱私的使用,并讓用戶(hù)進(jìn)行手動(dòng)確認(rèn)會(huì)明顯提高用戶(hù)對(duì)于產(chǎn)品的信任程度。蘋(píng)果在數(shù)據(jù)隱私安全方面始終站在了用戶(hù)這一邊,無(wú)論是安裝應(yīng)用時(shí)詢(xún)問(wèn)權(quán)限還是每次出現(xiàn)的“是否允許粘貼”,其對(duì)于隱私保護(hù)的方法與措施都值得我們學(xué)習(xí)。

3、本地存儲(chǔ)也是一種選擇

Rewind工具可以自動(dòng)存儲(chǔ)用戶(hù)在自己電腦和手機(jī)上看到的所有內(nèi)容,通過(guò)引入“私人助理”的角色,方便用戶(hù)基于AI進(jìn)行內(nèi)容的搜索和瀏覽整合。工具對(duì)于用戶(hù)隱私的處理也非常值得參考,其主要通過(guò)本地存儲(chǔ)、內(nèi)容隨時(shí)可刪除等方法,讓隱私優(yōu)先的原則貫穿在產(chǎn)品的定位和功能設(shè)計(jì)之中,也是這款工具能夠獲得好評(píng)的原因之一。

三、結(jié)語(yǔ)

總的來(lái)說(shuō),AI技術(shù)的推廣目前仍面臨相當(dāng)大的挑戰(zhàn),對(duì)于大眾而言也有一定的使用門(mén)檻。作為設(shè)計(jì)師,比起強(qiáng)調(diào)產(chǎn)品能力的升級(jí),我們更應(yīng)該注重對(duì)用戶(hù)的關(guān)懷,一款好的AI產(chǎn)品必定是智能化且人性化的。AI技術(shù)下的人機(jī)交互應(yīng)用已經(jīng)成為UX設(shè)計(jì)的趨勢(shì),我們需要注意平衡技術(shù)和用戶(hù)體驗(yàn)之間的關(guān)系,以確保我們的設(shè)計(jì)在滿(mǎn)足用戶(hù)需求的基礎(chǔ)之上,能夠助力產(chǎn)品在商業(yè)市場(chǎng)上的成功。

 

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專(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。

關(guān)鍵詞:UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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ā)

自然語(yǔ)言界面:開(kāi)啟人機(jī)交互的全新篇章

博博

作者:山中

人機(jī)交互界面經(jīng)過(guò)幾十年的發(fā)展,人與機(jī)器間的交互變得越來(lái)越容易,隨著ChatGPT等大語(yǔ)言模型的出現(xiàn),一種我們既熟悉又陌生的交互方式再次進(jìn)入大眾視野,它就是自然語(yǔ)言界面(NLI)。

那么什么是自然語(yǔ)言界面,它又會(huì)為人機(jī)交互帶來(lái)哪些新的變化,它會(huì)成為下一代主流的用戶(hù)界面嗎?本文將從計(jì)算機(jī)UI的發(fā)展簡(jiǎn)史出發(fā),對(duì)比自然語(yǔ)言界面與傳統(tǒng)圖形界面的差異,帶你了解自然語(yǔ)言界面的應(yīng)用場(chǎng)景和發(fā)展方向。

一、計(jì)算機(jī)UI發(fā)展簡(jiǎn)史

首先讓我們回顧一下過(guò)去幾十年計(jì)算機(jī)UI的發(fā)展階段。

1、穿孔紙帶(Punched tape)

1940-1960年代,早期的計(jì)算機(jī)通過(guò)穿孔紙向計(jì)算機(jī)輸入指令,帶孔為1,無(wú)孔為0,經(jīng)過(guò)光電輸入機(jī)將數(shù)據(jù)輸入計(jì)算機(jī)。由于需要輸入二進(jìn)制的機(jī)器語(yǔ)言,計(jì)算機(jī)在這個(gè)階段只被少數(shù)專(zhuān)家應(yīng)用于專(zhuān)業(yè)領(lǐng)域。

 

2、命令行界面(CLI)

20世紀(jì)60年代中期,命令行界面( CLI )作為穿孔紙帶的友好替代方案出現(xiàn)在計(jì)算機(jī)上。命令行界面是一種通過(guò)輸入被稱(chēng)為命令行的文本行與計(jì)算機(jī)程序交互的方法,雖然它與人類(lèi)語(yǔ)言有較大差異,但還是大幅降低了計(jì)算機(jī)的使用門(mén)檻,個(gè)人計(jì)算機(jī)(PC)隨之出現(xiàn)。

 

3、圖形用戶(hù)界面(GUI)

命令行界面通常需要用戶(hù)記憶操作的命令,這對(duì)于普通用戶(hù)仍然是很困難的。GUI的出現(xiàn)正是為了解決這個(gè)問(wèn)題:既然人類(lèi)很難記住各種命令,那就讓機(jī)器提供可能的選項(xiàng),人類(lèi)只需要通過(guò)圖形元素進(jìn)行選擇。最早的圖像界面出現(xiàn)在1970年代,隨后蘋(píng)果和微軟讓GUI普及,短短二三十年,使用GUI交互的計(jì)算機(jī)和各類(lèi)消費(fèi)電子產(chǎn)品已經(jīng)成為我們工作生活中不可缺少的一部分。

 

 

二、自然語(yǔ)言界面(NLI)的爆發(fā)

什么是自然語(yǔ)言界面?

W3C是這樣定義的:自然語(yǔ)言界面是用戶(hù)與系統(tǒng)通過(guò)自然語(yǔ)言進(jìn)行通信的用戶(hù)界面。用戶(hù)通過(guò)語(yǔ)音或某種其他方法提供輸入,并且系統(tǒng)以通過(guò)語(yǔ)音、文本或某種其他方法傳遞的話(huà)語(yǔ)的形式生成響應(yīng)。

自然語(yǔ)言界面是什么時(shí)候出現(xiàn)的?

最早的自然語(yǔ)言界面可以追溯到 20 世紀(jì) 60 年代。ELIZA是一個(gè)早期的自然語(yǔ)言處理計(jì)算機(jī)程序,由麻省理工學(xué)院的Joseph Weizenbaum教授于1964 年至 1967 年開(kāi)發(fā),旨在探索人類(lèi)和機(jī)器之間的溝通方法。ELIZA 通過(guò)模式匹配和替換來(lái)模擬對(duì)話(huà),也就是說(shuō)它通過(guò)檢測(cè)用戶(hù)輸入的內(nèi)容中是否包含某些關(guān)鍵詞來(lái)做出響應(yīng),雖然它能做出的反應(yīng)有限,更不能真正理解人類(lèi)的語(yǔ)言,但這是人類(lèi)第一次嘗試通過(guò)自然語(yǔ)言進(jìn)行人機(jī)交互,也是后續(xù)自然語(yǔ)言處理(NLP)技術(shù)研究的一個(gè)里程碑

 

語(yǔ)音用戶(hù)界面(VUI)

自然語(yǔ)言處理(NLP)技術(shù)經(jīng)過(guò)幾十年的發(fā)展,終于在2010年代迎來(lái)第一波應(yīng)用爆發(fā)。2011年 Siri 作為 iOS 功能由 Apple 發(fā)布,隨后各家手機(jī)語(yǔ)音助手、智能音箱等VUI產(chǎn)品紛紛出現(xiàn)。但隨之出現(xiàn)了一個(gè)新的網(wǎng)絡(luò)名詞-“人工智障”。雖然 Siri 相比 ELIZA 能做的事情更多了,但它們?cè)隗w驗(yàn)上仍沒(méi)有本質(zhì)區(qū)別,Siri等產(chǎn)品依然需要用戶(hù)遵循特定的表述方式才能做出正確響應(yīng),可能換一個(gè)表述方式它們就聽(tīng)不懂了,所以這個(gè)階段的自然語(yǔ)言界面更多是作為一種輔助交互方式。

 

大語(yǔ)言模型(LLM)

ChatGPT 于2022年底開(kāi)放測(cè)試,不到一年時(shí)間大語(yǔ)言模型(LLM)與AIGC應(yīng)用已經(jīng)遍地開(kāi)花。大語(yǔ)言模型實(shí)現(xiàn)了NLP技術(shù)的階段性跨越,AI對(duì)自然語(yǔ)言的理解能力大幅提升,不僅能模仿人類(lèi)對(duì)話(huà),還具備文案寫(xiě)作和問(wèn)題分析等能力,并且這些能力還在飛速進(jìn)步中,相信自然語(yǔ)言界面即將迎來(lái)第二次應(yīng)用爆發(fā)。

 

三、自然語(yǔ)言界面的優(yōu)勢(shì)

那么,自然語(yǔ)言界面相比傳統(tǒng)圖形界面又有什么優(yōu)勢(shì)呢?

1、低門(mén)檻

刻在我們DNA里的交互方式

語(yǔ)言是我們與他人交互的主要“界面”,智人的言語(yǔ)出現(xiàn)于 50,000 至 200 萬(wàn)年前,所以說(shuō)這是刻在我們DNA里的交互方式。我們從小就學(xué)習(xí)閱讀、寫(xiě)作和說(shuō)話(huà),因此通過(guò)自然語(yǔ)言界面與計(jì)算機(jī)交互幾乎不需要學(xué)習(xí)。

 

2、高效率

GUI的思路是機(jī)器提供可能的選項(xiàng),讓人類(lèi)進(jìn)行選擇。但復(fù)雜產(chǎn)品可能有幾百上千個(gè)選項(xiàng),即便設(shè)計(jì)師努力按照最合理的邏輯整理、收納這些選項(xiàng),用戶(hù)仍需要花大量時(shí)間精力尋找、理解、記憶這些選項(xiàng)。

酷家樂(lè)用戶(hù)問(wèn)題

酷家樂(lè)用戶(hù)聯(lián)系客服的問(wèn)題中較多是工具使用問(wèn)題:怎么添加門(mén)把手、怎么把門(mén)翻轉(zhuǎn)、怎么顯示柜體尺寸。在幾十上百個(gè)功能中找到那一個(gè)功能都如此困難,對(duì)于需要用到多個(gè)“選項(xiàng)”組合操作才能實(shí)現(xiàn)的效果,那確實(shí)難以要求普通用戶(hù)做到。

 

但如果酷家樂(lè)支持自然語(yǔ)言交互,我只需要告訴它我們的訴求:“添加門(mén)把手”、“把門(mén)翻轉(zhuǎn)”、”顯示柜體尺寸“,軟件便會(huì)直接實(shí)現(xiàn)這些的效果。

通過(guò)自然語(yǔ)言輸入,用戶(hù)便可以忘記各家軟件各種復(fù)雜的交互邏輯,設(shè)計(jì)師也無(wú)需煞費(fèi)苦心設(shè)計(jì)復(fù)雜的用戶(hù)引導(dǎo)和幫助系統(tǒng),隨之客服人力成本也將大幅降低。

Tome

目前已經(jīng)有一些產(chǎn)品在這么做了,Tome是一款制作提案PPT的產(chǎn)品,它可以通過(guò)自然語(yǔ)言輸入實(shí)現(xiàn)大部分操作,并且支持AI直接生成內(nèi)容。

 

3、不設(shè)限

早期計(jì)算機(jī)的輸入輸出完全靠機(jī)器語(yǔ)言,門(mén)檻很高。后來(lái),普通用戶(hù)借助圖形界面和開(kāi)發(fā)好的程序,也能輕松使用計(jì)算機(jī),但同時(shí)我們也被其限制了。

美間站點(diǎn)

以”美間“為例,美間站點(diǎn)有大量的海報(bào)模板,可以按用途、風(fēng)格維度進(jìn)行篩選,但用戶(hù)也只能按這兩個(gè)維度篩選。如果我想找出10月份用戶(hù)點(diǎn)擊最高的10個(gè)節(jié)氣海報(bào)模板,那對(duì)不起,辦不到,不是因?yàn)槲覀儧](méi)有這個(gè)數(shù)據(jù),而是我們沒(méi)有提供個(gè)“選項(xiàng)”,通過(guò)SQL或者其他語(yǔ)言查詢(xún)數(shù)據(jù)庫(kù)就可以獲取到。

 

但如果美間的數(shù)據(jù)庫(kù)接入了大語(yǔ)言模型,那么直接問(wèn)它,就能得到任何數(shù)據(jù)庫(kù)能提供的內(nèi)容,因?yàn)楝F(xiàn)在LLM已經(jīng)會(huì)自己寫(xiě)代碼做數(shù)據(jù)分析工作了。通過(guò)自然語(yǔ)言界面,我們可以最大程度發(fā)揮計(jì)算機(jī)和數(shù)據(jù)庫(kù)的價(jià)值。

 

四、自然語(yǔ)言會(huì)不會(huì)取代圖形界面?

自然語(yǔ)言界面這么強(qiáng)大,那它會(huì)不會(huì)取代圖形界面呢?答案是不會(huì),受限于AI能力發(fā)展現(xiàn)狀和自然語(yǔ)言自身的局限性,自然語(yǔ)言界面有其適用范圍。

1、AI能力仍有限

理想情況是AI能完全理解我們的訴求、且能力能夠覆蓋,但現(xiàn)在還做不到。用戶(hù)隨便輸入一個(gè)需求,產(chǎn)品很可能做不到,這就需要我們通過(guò)GUI進(jìn)行提示和引導(dǎo)。

 

2、額外的處理時(shí)間

相比通過(guò)GUI直接對(duì)程序發(fā)出指令,用戶(hù)輸入自然語(yǔ)言L(fǎng)LM普遍需要幾秒鐘的處理時(shí)間,帶來(lái)更高的試錯(cuò)成本,某些場(chǎng)景下我們使用GUI操作更加快捷。

 

3、自然語(yǔ)言表達(dá)不夠精準(zhǔn)

人與人的交流也常常存在歧義,更別說(shuō)跟機(jī)器交流了,所以自然語(yǔ)言界面不適合做非常精細(xì)的操作。 

美間提案PPT

以美間提案PPT為例,如果我通過(guò)自然語(yǔ)言輸入:“把標(biāo)題改成紅色”,那AI可能會(huì)反問(wèn):”哪個(gè)標(biāo)題?哪種紅色?“。試想一下,如果要通過(guò)自然語(yǔ)言描述這些信息,是不是還不如通過(guò)鼠標(biāo)選擇來(lái)的簡(jiǎn)單。

 

4、自然語(yǔ)言輸入也存在成本

自然語(yǔ)言輸入,用戶(hù)需要把需求組織成語(yǔ)言,然后打字或講出。也就是說(shuō)用戶(hù)需要?jiǎng)幽X子,這顯然與我們追求的”Dot let me think“原則相違背。

美間海報(bào)

以美間海報(bào)場(chǎng)景為例,美間支持”AI生成“和”模板再創(chuàng)作“兩種海報(bào)創(chuàng)作方式。這兩種方式分別有各自的使用場(chǎng)景。如果用戶(hù)需要一張?jiān)┳8:?bào),對(duì)于目標(biāo)明確的用戶(hù),他可以通過(guò)詳細(xì)描述畫(huà)面需求,生成個(gè)性化的海報(bào)方案。例如:”生成一張?jiān)┕?jié)日海報(bào),主題為:群核科技祝您元旦快樂(lè),畫(huà)面要喜慶,插畫(huà)風(fēng)格,包含煙花、燈籠、熱鬧的人群等元素“

 

但對(duì)于更多用戶(hù)來(lái)說(shuō),描述一個(gè)海報(bào)畫(huà)面是困難的,大部分用戶(hù)只需要一個(gè)通用的模板改改字就足夠了,這樣不但更輕松,而且得到的海報(bào)質(zhì)量也更高。

 

五、NLI與GUI融合互補(bǔ)

所以,自然語(yǔ)言界面不會(huì)取代圖形界面,它們更多會(huì)融合互補(bǔ),在各自的擅長(zhǎng)領(lǐng)域發(fā)光發(fā)熱。

 

未來(lái)常見(jiàn)的用戶(hù)工作流將會(huì)是:NLI發(fā)散-GUI收斂,先使用NLI得到一個(gè)大概結(jié)果,再通過(guò)GUI完成確認(rèn)或調(diào)整。

美間AI海報(bào)

美間AI海報(bào)就是這樣的設(shè)計(jì)思路:基于自然語(yǔ)言輸入生成若干結(jié)果,選擇一個(gè)滿(mǎn)意的方案再二次編輯。

 

六、NLI還有哪些應(yīng)用場(chǎng)景?

自然語(yǔ)言界面還有哪些應(yīng)用場(chǎng)景?微軟表示:萬(wàn)物皆可“Copilot”。

Copilot是微軟發(fā)布的依托于大語(yǔ)音模型的AI助手(AI Agent)。11月15日的微軟Ignite大會(huì)上,CEO納德拉向我們展示了Copilot最新的形態(tài):一個(gè)入口連接無(wú)限可能。

Copilot可以連接各種應(yīng)用和數(shù)據(jù)源,用戶(hù)只需要把需求告訴Copilot,Copilot就能自動(dòng)完成全部應(yīng)用和數(shù)據(jù)操作,甚至是跨應(yīng)用和跨數(shù)據(jù)源的。

Copilot Studio

Copilot Studio是微軟面向B端用戶(hù)推出的AI助手,支持用戶(hù)自定義專(zhuān)屬的Copilot,以滿(mǎn)足行業(yè)、部門(mén)、角色等內(nèi)外部場(chǎng)景的定制化需求。讓Copilot鏈接企業(yè)財(cái)務(wù)系統(tǒng),你可以隨時(shí)問(wèn)它各類(lèi)財(cái)務(wù)預(yù)算的開(kāi)支和剩余情況;Copilot還能雙向打通CRM、ERP等SAAS產(chǎn)品,自動(dòng)化執(zhí)行復(fù)雜的業(yè)務(wù)流程,比如辦理新員工入職、費(fèi)用報(bào)銷(xiāo)等。

 

數(shù)據(jù)分析

Excel擁有強(qiáng)大的數(shù)據(jù)分析能力,但我們大部分人只用過(guò)Excel來(lái)制作表格,因?yàn)楦唠A的函數(shù)、宏等功能對(duì)于普通用戶(hù)來(lái)說(shuō)學(xué)習(xí)成本太高?,F(xiàn)在,Copilot與Excel結(jié)合,便可以實(shí)現(xiàn)通過(guò)自然語(yǔ)言寫(xiě)代碼執(zhí)行復(fù)雜的數(shù)據(jù)分析工作。

 

AIGC

AIGC是當(dāng)前最熱門(mén)的AI應(yīng)用領(lǐng)域之一,除了常見(jiàn)的文案生成、圖片生成,傳統(tǒng)的內(nèi)容創(chuàng)作軟件結(jié)合AIGC能力也可以發(fā)揮出巨大的潛力。Copilot加持下的PPT,只需一句話(huà),Copilot將自動(dòng)幫你完成PPT的文案、配圖、排版等工作。

 

七、展望

未來(lái)自然語(yǔ)言界面將重塑現(xiàn)有產(chǎn)品的交互方式, 但自然語(yǔ)言也只是一種交互方式,未來(lái)隨著AI能力和硬件技術(shù)的發(fā)展,人類(lèi)與機(jī)器間的交互成本還將進(jìn)一步降低。

微軟在Ignite大會(huì)上演示了未來(lái) AI+MR 設(shè)備的應(yīng)用場(chǎng)景,借助MR設(shè)備AI可以看到、聽(tīng)到、解釋、理解我們的意圖和我們周?chē)氖澜?,我們只需要極少的輸入就能得到需要的結(jié)果。以現(xiàn)在AI技術(shù)的發(fā)展速度,相信這些看似科幻電影中的場(chǎng)景用不了多久便會(huì)成為現(xiàn)實(shí)。

藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專(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。

關(guān)鍵詞:UI咨詢(xún)、UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶(hù)體驗(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ā)

 

小小的細(xì)節(jié)大大的體驗(yàn)

博博

小小的細(xì)節(jié)大大的體驗(yàn)

高端網(wǎng)站設(shè)計(jì)公司藍(lán)藍(lán)設(shè)計(jì):關(guān)注并改善殘疾人用戶(hù)體驗(yàn)

博博

在醫(yī)療行業(yè)中,殘疾人用戶(hù)面臨著許多挑戰(zhàn),例如身體不便、視覺(jué)障礙、聽(tīng)力障礙等等。為了讓他們能夠更加方便地使用醫(yī)療服務(wù),UI設(shè)計(jì)師需要考慮到各種不同的因素,并采取相應(yīng)的措施來(lái)提高用戶(hù)體驗(yàn)。

日歷

鏈接

個(gè)人資料

存檔