首頁

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

博博

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

留白分割≧線性分割≧卡片分割

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

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

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

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

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

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

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

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

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

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

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

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

小結(jié):

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

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


作者:是一顆李子
來源:站酷

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)的軟件開發(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開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)

 

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

博博

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


作者:黑馬青年
來源:站酷

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

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

博博

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

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

輔助駕駛型

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

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

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

自主決策型

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

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

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

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

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

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

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

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

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

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

在AI盛行的當(dāng)下,數(shù)據(jù)隱私安全可以說是非常敏感的話題了,AI泄漏數(shù)據(jù)隱私的事件也在不斷曝光。妙鴨相機(jī)的爆紅事件給我們的警示是在產(chǎn)品設(shè)計(jì)的過程中,除了思考如何利用新技術(shù)產(chǎn)出新的創(chuàng)意,對(duì)用戶數(shù)據(jù)隱私安全的保護(hù)同樣重要,它是產(chǎn)品獲得用戶信任,得以被持續(xù)使用的原因之一。
數(shù)據(jù)隱私安全涵蓋的范圍是非常廣泛的。從產(chǎn)品設(shè)計(jì)的角度來看對(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ǔ)的。在國內(nèi),7月網(wǎng)信辦等7部委聯(lián)合公布了《生成式人工智能服務(wù)管理暫行辦法》,生成式人工智能服務(wù)管理辦法的正式落地為我國AI發(fā)展打下了基礎(chǔ)。

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

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

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

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

三、結(jié)語

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

 

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

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

博博

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

高端網(wǎng)站設(shè)計(jì)公司藍(lán)藍(lán)設(shè)計(jì):如何將創(chuàng)新技術(shù)融入醫(yī)療界面設(shè)計(jì)

博博

隨著科技的不斷發(fā)展,醫(yī)療界面設(shè)計(jì)也正面臨著新的挑戰(zhàn)和機(jī)遇。本文將介紹一些將創(chuàng)新技術(shù)融入醫(yī)療界面設(shè)計(jì)的技巧和實(shí)例,幫助大家把握未來醫(yī)療界面設(shè)計(jì)的趨勢(shì)。

高端網(wǎng)站設(shè)計(jì)公司藍(lán)藍(lán)設(shè)計(jì):如何運(yùn)用色彩提升界面吸引力

博博

在界面設(shè)計(jì)中,色彩搭配是至關(guān)重要的一環(huán)。合適的色彩搭配能夠讓界面更加吸引人,提高用戶體驗(yàn)。本文將介紹一些色彩搭配技巧,幫助你提升界面吸引力。

高端網(wǎng)站設(shè)計(jì)公司藍(lán)藍(lán)設(shè)計(jì):引領(lǐng)未來的交互設(shè)計(jì)

博博

在飛速發(fā)展的數(shù)字時(shí)代,用戶界面(UI)設(shè)計(jì)已經(jīng)成為一項(xiàng)至關(guān)重要的任務(wù)。。本文將帶你探討UI設(shè)計(jì)的最新趨勢(shì),如何引領(lǐng)未來的交互設(shè)計(jì),創(chuàng)造更加自然、直觀且吸引人的用戶體驗(yàn)。無論你是UI設(shè)計(jì)師、開發(fā)人員,還是產(chǎn)品經(jīng)理,都能從中獲得啟發(fā)和靈感。

 

UI咨詢公司-藍(lán)藍(lán)設(shè)計(jì):頂級(jí)秘籍:提升UI設(shè)計(jì)吸引力的3大絕招

博博

想要讓你的UI設(shè)計(jì)在海量應(yīng)用中脫穎而出,吸引用戶眼球嗎?如果你正在尋找提升UI設(shè)計(jì)吸引力的絕妙方法,那么你絕對(duì)不能錯(cuò)過本文!我們將為你揭示頂級(jí)UI設(shè)計(jì)師都不會(huì)告訴你的3大絕招,讓你輕松掌握提升UI設(shè)計(jì)吸引力的關(guān)鍵技巧,讓你的設(shè)計(jì)在競(jìng)爭(zhēng)激烈的市場(chǎng)中獨(dú)樹一幟!

體驗(yàn)設(shè)計(jì)思維養(yǎng)成 — 如何在中規(guī)中矩的常規(guī)項(xiàng)目中鍛煉設(shè)計(jì)思維提高自身價(jià)值

ui設(shè)計(jì)分享達(dá)人

先聊一個(gè)我發(fā)現(xiàn)的當(dāng)下普遍存在的問題,眾所周知道,現(xiàn)在“大環(huán)境”不好,很多設(shè)計(jì)師在求職中會(huì)遇到兩個(gè)比較尷尬的事兒,第一個(gè)就是在中小型公司工作幾年,由于公司在發(fā)展階段,所以更多的是在高強(qiáng)度的上需求加功能,所以做的需求更多是“實(shí)現(xiàn)產(chǎn)品功能”而沒有機(jī)會(huì)像頭部廠商一樣去做大的改版升級(jí),去突出“設(shè)計(jì)呈現(xiàn)”,最后就只能從中規(guī)中矩的頁面中尋求數(shù)據(jù)上的設(shè)計(jì)價(jià)值;第二個(gè)就是人手不足,每個(gè)項(xiàng)目的項(xiàng)目周期自然比較緊張,到最后的結(jié)果就是 —— 留給設(shè)計(jì)研發(fā)的時(shí)間有限,在設(shè)計(jì)階段的不得不將設(shè)計(jì)精度大打折扣,即使是這樣在進(jìn)入研發(fā)后,由于研發(fā)周期的原因,在研發(fā)還原度上還要再砍一刀,導(dǎo)致最后的呈現(xiàn)往往和自己的預(yù)期差距較大,結(jié)論:如此往復(fù)設(shè)計(jì)呈現(xiàn)拿不出什么,思維也會(huì)慢慢固化,最后成為無情的“圖狗”甚至不知道什么該做什么不該做,最后換工作的時(shí)候一臉懵逼。那怎么辦?

先說結(jié)論,我認(rèn)得這種情況下個(gè)人有兩個(gè)直接的辦法給到大家參考:第一個(gè),尋找新的機(jī)會(huì),作為設(shè)計(jì)者項(xiàng)目周期是改變不了,而且我也認(rèn)為常規(guī)設(shè)計(jì)者在產(chǎn)品孵化的流程中應(yīng)該是一個(gè)在已經(jīng)決定好的事上“推一把”的角色,所以很多時(shí)候我們無法產(chǎn)能不足帶來的影響,那最好的辦法就是再找一個(gè)你中意的公司。如果你因?yàn)榉N種原因,個(gè)人能力不足也好,房貸壓力也好,無法跑路,那這時(shí)候我們就會(huì)面臨一個(gè)問題,也是我認(rèn)為的第二種方法:如何在中規(guī)中矩的常規(guī)項(xiàng)目中鍛煉設(shè)計(jì)思維提高自身價(jià)值

我們平常在接到一個(gè)體驗(yàn)升級(jí)任務(wù)或者日常自發(fā)審視產(chǎn)品問題時(shí),如果比較完善頁面去尋找問題時(shí)常常會(huì)發(fā)現(xiàn),找一圈回來發(fā)現(xiàn)頁面哪哪好像都合理,感覺分析一波下來他好像就應(yīng)該長(zhǎng)這個(gè)樣子。不排除他確實(shí)暫時(shí)沒有改動(dòng)空間的可能性,但是更多時(shí)候產(chǎn)品自身還是不可避免的有一些缺陷的,那應(yīng)該如何發(fā)現(xiàn)這些潛在問題呢?這里隨便找一個(gè)我在行業(yè)大廠的頁面,來看看即使是我沒做過的一個(gè)陌生產(chǎn)品和頁面,在有部分行業(yè)經(jīng)驗(yàn)的前提下,我都會(huì)做些什么來合理的發(fā)現(xiàn)問題解決問題的。

這里找一個(gè)我做的出行行業(yè)的頭部廠商“百度地圖”中的“打車業(yè)務(wù)”位例。

一個(gè)沒做過的頁面,有些同學(xué)會(huì)習(xí)慣先把頁面拉到畫板上,然后一頓分析,最后還是變成了前面說的“頁面好像和我想的一樣”,然后無從下手,暗自emo,這里和大家分享下我個(gè)人的小方法,自認(rèn)為解決這個(gè)問題還是蠻有效果的。

首先,我不會(huì)先把頁面放上來,我第一步往往是先確定思路,不管是有項(xiàng)目背景改版,還是自發(fā)審視產(chǎn)品問題的階段,我會(huì)先確定目標(biāo),根據(jù)目標(biāo)確定整個(gè)事情的大方向,這一步是為了保證你整體做的事兒不會(huì)偏離最基本的軌道。

 

 

 

 

在確定好了我這次要干一個(gè)什么事兒之后,,我第二步往往做的是思考 — 產(chǎn)品形態(tài)應(yīng)該是什么樣子的?先弄清楚了他應(yīng)該是什么樣子的,你才能發(fā)現(xiàn)和你預(yù)期中差異的點(diǎn),然后去探究問題產(chǎn)生的原因或做相關(guān)調(diào)整。這里來說為什么我不提倡先把頁面放過來直接找問題,因?yàn)槿绻敲锤傻脑捄苋菀拙蜁?huì)變成“你來給頁面設(shè)計(jì)者為什么這么做找理由”然后就會(huì)發(fā)現(xiàn)看著看著自己就被洗腦了。

但是在這一步的時(shí)候有一個(gè)需要注意的問題,用戶要的是更好的產(chǎn)品,不管這個(gè)“更好”是指的什么,但是公司做產(chǎn)品最根本的是想賺錢,這按理說是一個(gè)完全沖突的事情。不過在產(chǎn)品的不同階段,側(cè)重是不一樣的,我們首先要做的就是結(jié)合產(chǎn)品階段與具體頁面所在的節(jié)點(diǎn),權(quán)衡產(chǎn)品側(cè)重,就能在你心里建立起一個(gè)最基本的產(chǎn)品形態(tài)預(yù)期,這樣在你下一步真正開始分析頁面現(xiàn)狀的時(shí)候就能幫助你一些發(fā)現(xiàn)功能的可優(yōu)化點(diǎn)。

 

 

 

通過上面的推導(dǎo)可知,至少在當(dāng)前產(chǎn)品的當(dāng)前業(yè)務(wù)線來說,工具類產(chǎn)品公司關(guān)心的節(jié)點(diǎn)轉(zhuǎn)化,還是要依賴于用戶使用的滿意程度,也就是說,兩者沖突時(shí),優(yōu)先服務(wù)于用戶體驗(yàn)。這里要注意下在真正的工作過程中,有些產(chǎn)品的階段導(dǎo)致產(chǎn)品要優(yōu)先服務(wù)于轉(zhuǎn)化,也就是營(yíng)收,這是很正常的事兒,要根據(jù)不同階段來權(quán)衡設(shè)計(jì)中心,不要被“設(shè)計(jì)師就是站在用戶這邊的”這種話誤導(dǎo),具體場(chǎng)景具體分析。

接下來第三步就可以正式的進(jìn)入到頁面現(xiàn)狀分析了。

 

 

 

 

主要分為三大點(diǎn),第一個(gè)框架現(xiàn)狀,首先得知道現(xiàn)在的框架是怎樣的,這一步主要是看頁面的功能區(qū),找出他們并講他們的層級(jí)用一維分析法列出,方便之后的對(duì)比。第二是合理性驗(yàn)證,將找出的模塊用“十字交叉分析”畫出坐標(biāo)軸,這里我是根據(jù)“對(duì)用戶的重要程度”和“盈利能力”來代表X軸與Y軸(XY軸并不是一直固定代表什么,可根據(jù)第二步你的產(chǎn)品重心來決定XY軸),決定好XY軸之后,結(jié)合產(chǎn)品側(cè)重把剛才找出的大模塊定位在坐標(biāo)軸相關(guān)的位置上,這么做的目的是,你可以根據(jù)坐標(biāo)軸的定位,來對(duì)比剛才一維分析法列出的模塊層級(jí)是否合理;最后第三步根據(jù)分析結(jié)果,得出相關(guān)結(jié)論,用來指導(dǎo)你之后具體設(shè)計(jì),將影響用戶行為與體驗(yàn)的點(diǎn)進(jìn)行改進(jìn),暫無問題的點(diǎn)根據(jù)時(shí)間成本選擇暫時(shí)不動(dòng)或在不影響產(chǎn)品功能和研發(fā)成本的基礎(chǔ)上進(jìn)行視覺升級(jí)。這一步往往能夠解決設(shè)計(jì)者工作中遇到的一個(gè)最基本的問題: 項(xiàng)目周期不夠,什么做什么可以放棄。

功能區(qū)的問題解決之后,就可以進(jìn)行第四步,也就是我們最熟悉的工作了,小模塊的優(yōu)化,也是最考驗(yàn)設(shè)計(jì)師細(xì)節(jié)打磨能力的地方,這一步要做的就是根據(jù)你自己的經(jīng)驗(yàn)與方法論,找出模塊的設(shè)計(jì)目標(biāo),并且根據(jù)自己的方法論與經(jīng)驗(yàn)積累,用你覺得達(dá)成這個(gè)設(shè)計(jì)目標(biāo)最合適的設(shè)計(jì)方法。方法論這東西就很宏大了,主要是知識(shí)積累,然后自己拆分與結(jié)合,其實(shí)多定理之類的說的都是一個(gè)事兒,網(wǎng)上文章一大堆,所以就不過多描述了。

 

 

 

在做完這一步后,通常你就可以根據(jù)時(shí)間成本選擇交付研發(fā)了,然后等待上線后一個(gè)周期后進(jìn)行數(shù)據(jù)驗(yàn)證來驗(yàn)證設(shè)計(jì)的正確性。

但是如果你還有時(shí)間,你可以選擇在不影響產(chǎn)品功能和研發(fā)成本的基礎(chǔ)上進(jìn)行視覺升級(jí)。這來引入一個(gè)新的技術(shù)來幫助高效進(jìn)行設(shè)計(jì)產(chǎn)出,也就是當(dāng)下大熱的AIGC技術(shù)。這時(shí)候就有些人可能會(huì)說AIGC的產(chǎn)出不可控等問題,現(xiàn)在通常的解決方法是通過mj或手繪或拼接出你心中的畫面,然后放進(jìn)SD里進(jìn)行邊緣描摹,并通過openpose等插件產(chǎn)出你心儀的視覺效果,如果你沒有訓(xùn)練有素的模型也可以之后再扔進(jìn)MJ里進(jìn)行畫面細(xì)化。

什么?SD配置太麻煩?是不是就搞不了了?其實(shí)不是的,AIGC的發(fā)展如此迅猛,每天都在以我們想象不到的速度進(jìn)化這,其實(shí)面對(duì)我們工作中一些不復(fù)用的視覺素材,MJ已經(jīng)能夠快速的產(chǎn)出構(gòu)圖相差無幾的畫面了,要求不高的話能夠大大的減小設(shè)計(jì)者的成本。下面我們就以現(xiàn)在頁面的一些視覺為例,讓我們看看AIGC能夠幫助我們做到什么程度。

 

 

 

相信大家不難看出,在我們心中已經(jīng)有了一個(gè)合適的樣子或者有了一個(gè)合適的參考之后,再通過合理的prompt描述方式,AIGC能夠通過較小的時(shí)間成本幫助我們產(chǎn)出較高質(zhì)量的圖片,這樣我們就能夠選擇性的把時(shí)間分配到更多的地方產(chǎn)出更為精致的設(shè)計(jì)呈現(xiàn)。

 

 



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

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)的軟件開發(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開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

UI咨詢公司-藍(lán)藍(lán)設(shè)計(jì):為企業(yè)打造卓越的信息化UI界面設(shè)計(jì)"

博博

UI設(shè)計(jì)公司-藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司)是一家在企業(yè)信息化UI界面設(shè)計(jì)領(lǐng)域擁有豐富經(jīng)驗(yàn)的專業(yè)團(tuán)隊(duì)。我們深知企業(yè)信息化的需求,了解企業(yè)用戶的使用習(xí)慣和期望。我們的設(shè)計(jì)師們具備深厚的設(shè)計(jì)背景和專業(yè)知識(shí),能夠?qū)⑵髽I(yè)的品牌形象和用戶需求融入到UI界面設(shè)計(jì)中。

日歷

鏈接

個(gè)人資料

存檔