91成人精品,神马影院东京干,国产一级做a爰片久久 亚洲日韩欧美一区二区三区_国产AV无码专区亚洲AV

首頁(yè)

常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)

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

B 端產(chǎn)品的業(yè)務(wù)場(chǎng)景通常比 C 端更為復(fù)雜,因此在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)對(duì)信息的處理方式也需要根據(jù)不同的業(yè)務(wù)場(chǎng)景進(jìn)行設(shè)計(jì)。今天主要聊一下 B 端產(chǎn)品設(shè)計(jì)中彈窗設(shè)計(jì)。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
彈窗的定義
彈窗是展現(xiàn)在用戶操作界面之上的容器,在 X 軸和 Y 軸的平行空間之上擴(kuò)展了頁(yè)面的高度。是系統(tǒng)與用戶之間建立聯(lián)系非常重要的組成部分。它通常在用戶進(jìn)行特定操作或訪問(wèn)特定頁(yè)面功能時(shí)彈出,目的是向用戶展示某些信息、提供選擇或執(zhí)行某些操作。
 
彈窗使用場(chǎng)景
  1.  
    需要呈現(xiàn)的內(nèi)容篇幅相對(duì)較少。
  2.  
    常用于針對(duì)某些內(nèi)容進(jìn)行補(bǔ)充說(shuō)明、需要用戶處理關(guān)鍵信息、重要的警告提示等。
  3.  
    通常是由系統(tǒng)觸發(fā)(用戶被動(dòng)接受)。
  4.  
    彈窗整體高度和寬度不做絕對(duì)的標(biāo)準(zhǔn)或規(guī)定,可以根據(jù)內(nèi)容篇幅的多少和視覺(jué)的平衡度來(lái)確定,整體規(guī)范保持一致即可。
 
總體概括為簡(jiǎn)單和復(fù)雜兩個(gè)場(chǎng)景。
 
一、場(chǎng)景簡(jiǎn)單
場(chǎng)景簡(jiǎn)單包括:全局提示、氣泡確認(rèn)框、警告提示、通知提醒框,通常是操作確認(rèn)和系統(tǒng)內(nèi)部自動(dòng)觸發(fā)性提示時(shí)使用。
 
1. 全局提示
以 toast 提示居多,通常在頁(yè)面中間偏上的位置。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
2. 氣泡提示
用于解釋難理解的功能名詞或者由于版面限制文字展示不完,利用氣泡來(lái)展示。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
3. 警告提示
用于重點(diǎn)內(nèi)容的警告提醒,降低用戶犯錯(cuò)概率,提升用戶的使用體驗(yàn)。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
4. 提示性通知彈窗:
位置相對(duì)固定,通常出現(xiàn)在需要介紹說(shuō)明的功能旁邊或者居頁(yè)面中間展示。
例如,當(dāng)系統(tǒng)發(fā)生重要更新維護(hù)或者重點(diǎn)功能引導(dǎo)時(shí),可以顯示一個(gè)提示性通知彈窗,告知用戶當(dāng)前狀態(tài)。
類(lèi)型主要包括以下三種:
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
舉例:
有贊后臺(tái)頁(yè)面
有贊后臺(tái)頁(yè)面
 
 
 
二、場(chǎng)景復(fù)雜
1. 場(chǎng)景復(fù)雜|全屏彈窗
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
新開(kāi)頁(yè)簽(瀏覽器)
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
為什么是全屏彈窗,而不是頁(yè)簽?
全屏彈窗功能和頁(yè)面相似,之所以使用全屏彈窗作為頁(yè)面載體,原因就是對(duì)原觸發(fā)頁(yè)面的使用和關(guān)注并沒(méi)有結(jié)束,編輯完成后需要快速關(guān)閉當(dāng)前窗口并返回到原來(lái)的頁(yè)面中去,數(shù)據(jù)可以做到實(shí)時(shí)同步。如果用新頁(yè)簽打開(kāi),則會(huì)對(duì)數(shù)據(jù)同步造成隔斷,需要二次打開(kāi)頁(yè)面。頁(yè)簽是瀏覽器新開(kāi)窗口,通常用于不同功能的展示。
 
 
2. 場(chǎng)景復(fù)雜|非全屏彈窗
①中間彈窗·純文本
確認(rèn)彈窗:用于向用戶確認(rèn)某個(gè)操作或決策,通常包含確認(rèn)和取消兩個(gè)按鈕。例如,當(dāng)用戶點(diǎn)擊刪除按鈕時(shí),可以顯示一個(gè)確認(rèn)彈窗,詢問(wèn)用戶是否確定刪除。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
②中間彈窗·下拉框
下拉框:后臺(tái)將全部數(shù)據(jù)返回,下拉展示全部?jī)?nèi)容,方便用戶快捷查詢。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
③中間彈窗·文本輸入
文本輸入:通常用于備注等說(shuō)明性內(nèi)容的填寫(xiě)。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
④中間彈窗·選擇器
包括單選和復(fù)選兩種類(lèi)型,下圖以單選框舉例。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑤中間彈窗·步驟條
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑥中間彈窗·多內(nèi)容組合
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑦中間彈窗·左右穿梭框
穿梭框左側(cè)通常會(huì)有分頁(yè),為了防止用戶對(duì)已選內(nèi)容造成遺忘,右側(cè)框展示已選內(nèi)容進(jìn)行二次核對(duì)。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
⑧中間彈窗·上下穿梭框
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
舉例:
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
3. 場(chǎng)景復(fù)雜|抽屜
抽屜呈現(xiàn)的內(nèi)容篇幅介于彈窗和頁(yè)面之間,通常居右側(cè)展示。
 
①抽屜·純文本
通常展示較大篇幅的說(shuō)明性內(nèi)容。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
②抽屜·橫向 tab
通常展示同一大類(lèi)下,不同分類(lèi)的信息內(nèi)容。比如全部消息、已讀、未讀等。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
③抽屜·縱向 tab
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
④抽屜·多內(nèi)容結(jié)合
多類(lèi)型內(nèi)容的聚合展示。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
 
三、其他情況
①?gòu)?qiáng)制性提示
為了更好的了解用戶特征,提供更加優(yōu)質(zhì)的服務(wù),有的系統(tǒng)在用戶首次使用時(shí),會(huì)出現(xiàn)強(qiáng)制性彈窗,執(zhí)行必要操作后,才可進(jìn)入系統(tǒng)使用。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
四、彈窗使用規(guī)范
上下左右間距大小固定,彈窗大小根據(jù)內(nèi)容的多少來(lái)自動(dòng)調(diào)整。
 
①中間彈窗
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
②側(cè)邊彈窗
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
以上就是全部?jī)?nèi)容,謝謝。

藍(lán)藍(lán)設(shè)計(jì)(www.b186.net )是一家專(zhuān)注而深入的界面設(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ā)



作者:西城門(mén)設(shè)計(jì)
鏈接:https://www.zcool.com.cn/article/ZMTYyMDI5Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

層級(jí)思維解構(gòu)圖標(biāo)分類(lèi)體系

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

近年來(lái),Ul設(shè)計(jì)行業(yè)蓬勃發(fā)展,圖標(biāo)設(shè)計(jì)風(fēng)格更是呈現(xiàn)出多元化的特點(diǎn),各種新穎、創(chuàng)意的設(shè)計(jì)風(fēng)格層出不窮。圖標(biāo)樣式早已從潺潺溪水變成汪洋大海,通過(guò)系統(tǒng)歸納和整理各類(lèi)常用的面性圖標(biāo)設(shè)計(jì)類(lèi)型與風(fēng)格,我們構(gòu)建了一套體系化的記憶框架,使得在日常工作中能夠迅速且準(zhǔn)確地作出圖標(biāo)樣式的決策,從而有效提升設(shè)計(jì)效率與質(zhì)量。本文章主要討論近年UI界面中會(huì)經(jīng)常使用的圖標(biāo)風(fēng)格,線性圖標(biāo)樣式組成一般過(guò)于簡(jiǎn)單,在此不做討論。
 
本文在探討圖標(biāo)的分類(lèi)思維時(shí),巧妙地運(yùn)用了層級(jí)理念,
并特別關(guān)注層級(jí)是否穿透這一關(guān)鍵因素來(lái)區(qū)分不同類(lèi)型的圖標(biāo)。這種分類(lèi)思維不僅使圖標(biāo)的辨識(shí)變得更為便捷,還有助于人們更輕松地形成深刻的記憶印象。通過(guò)這種創(chuàng)新性的分類(lèi)方法,我們得以更清晰地理解圖標(biāo)的本質(zhì)與特點(diǎn),進(jìn)一步提升我們對(duì)常用圖標(biāo)的認(rèn)知水平和應(yīng)用

B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)

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

1、
內(nèi)容總結(jié)
因?yàn)樵趯?xiě)這個(gè)系列的文章時(shí)我加入了很多擴(kuò)展知識(shí)。希望告訴你更多。這里我會(huì)把主要的這個(gè)系列的知識(shí)總結(jié)一下讓你盡量一次看完。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
1.1、登陸頁(yè)面
 
最近就在做我們系統(tǒng)的登陸頁(yè)面優(yōu)化?;仡^我會(huì)寫(xiě)一個(gè)項(xiàng)目總結(jié)給你們看。這里介紹一下B端登陸頁(yè)面該怎么去做。其實(shí)還挺簡(jiǎn)單了。因?yàn)楝F(xiàn)在主流的布局就那幾個(gè)。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
登陸頁(yè)面:布局分為三種;居左、居右、居中
頁(yè)面元素:導(dǎo)航、登錄框、背景(裝飾元素)、互聯(lián)網(wǎng)信息。
導(dǎo)航
高度:68px或48px、文字大?。?4(大部分)16(也可以)
登錄框
大?。捍笮〕叽绮唤y(tǒng)一、沒(méi)有固定的尺寸。可以根據(jù)自己和領(lǐng)導(dǎo)的喜好決定。對(duì)還有要承載的內(nèi)容多少。
登錄方式:掃碼、手機(jī)號(hào)、賬號(hào)、第三方
標(biāo)題切換字號(hào):我喜歡用26px(也要其他的16、/18、/20)
輸入框高度:48px
按鈕文字和高度:16px、和輸入框高度一直就行。
背景
可以是配的插畫(huà)(這種最簡(jiǎn)單)、一般都是科技風(fēng)
底部
要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個(gè)就不多說(shuō)了正常排版就行。
 
1.2、篩選
 
篩選相對(duì)是很簡(jiǎn)單的部分把、因?yàn)槟阒苯佑靡?guī)范里的組件。雖然不會(huì)很優(yōu)秀、但是剛重要的是不會(huì)出什么錯(cuò)誤。主要是就大廠規(guī)范能夠快速的幫你解決問(wèn)題。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
篩選的意義:定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類(lèi)
 
篩選類(lèi)型:基礎(chǔ)篩選組件(就是我們常見(jiàn)的頁(yè)面頂部的篩選)、高級(jí)篩選(就是那些需要你定義想一想的篩選部分)
 
篩選布局:頂部和左側(cè)
 
篩選樣式:平鋪;折疊;Tab篩選;單側(cè)選擇;表頭;綜合
 
1.3、柵格
 
這里其實(shí)還簡(jiǎn)單的、首先你要明白柵格在我們的設(shè)計(jì)里面很重要。你不用當(dāng)然也可以呀。但是你想要做的更好那就用起來(lái)你會(huì)有意外的收獲。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
怎么用:直接看ant design、TDesign、阿科desing的規(guī)范就行、寫(xiě)的很清楚。
 
注意點(diǎn):不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
 
1.4、顏色
 
這部分相對(duì)來(lái)說(shuō)是我自己的弱項(xiàng)、在寫(xiě)當(dāng)時(shí)的文章的時(shí)候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設(shè)計(jì)規(guī)范的。也清楚了自己應(yīng)該怎么去規(guī)定自己的設(shè)計(jì)規(guī)范。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
主色確定:常見(jiàn)的方法、1、用自己品牌logo的顏色;2、用行業(yè)色
 
配色確定:我一般是找競(jìng)品、或者優(yōu)秀的配色方案、來(lái)確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
 
大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定??梢匀タ纯?。我在自己的工作中色彩的應(yīng)用就參考了ant Design的色彩應(yīng)用方式定制的。
 
1.5、字體
 
字體部分我覺(jué)得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來(lái)。還有就是如何去設(shè)計(jì)一款自己的字體。還有后臺(tái)字體規(guī)范的制定
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
中國(guó)文字:這里中國(guó)文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當(dāng)做你喝酒吹水的談資。
 
字體規(guī)范:我們大部分的字體會(huì)采用黑體、可讀性強(qiáng)、親和、現(xiàn)代、清晰。
 
字號(hào):最新的字體12px、正文、14px、通過(guò)+2, +4,+8,+12,+16 的步數(shù)增長(zhǎng)規(guī)律
 
行高:通過(guò)邏輯得到這樣一個(gè)公式:「 行高 = 字號(hào) + n 」,8 作為變量正好同時(shí)滿足與 1.5 倍的「 14px & 16px 」常用字號(hào)行高保持一致,總體文字間隙穩(wěn)定呼吸,行高空間較一致得出計(jì)算公式:「line-height = font size+8」
 
字重(就是字粗):建議使用兩種常規(guī)和加粗(在前端里一般就是400和500)
 
顏色:我是主張帶有色彩傾向的顏色應(yīng)用的。根據(jù)字體樣式的設(shè)計(jì)原則,制定了簡(jiǎn)易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結(jié)合,文字顯示色彩對(duì)比滿足至少1:4.5( AA級(jí)別)。且驗(yàn)證了其中的實(shí)用性,共分為亮暗兩種模式,4 個(gè)色階。
 
1.6、ICON(圖標(biāo))
 
你要統(tǒng)一風(fēng)格成套的去找參考和應(yīng)用。在我們的系統(tǒng)里我是自己畫(huà)icon的然后傳到阿里巴巴矢量圖庫(kù)讓開(kāi)發(fā)直接引用。這個(gè)是自己累點(diǎn)、但是可以保障實(shí)現(xiàn)效果。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
設(shè)計(jì)原則:準(zhǔn)確、簡(jiǎn)單、節(jié)奏、愉悅。
 
設(shè)計(jì)實(shí)戰(zhàn):采用柵格
我是用的阿里巴巴矢量圖庫(kù)的設(shè)計(jì)規(guī)范、因?yàn)槲乙獋鞯竭@個(gè)平臺(tái)應(yīng)用
 
ICON分類(lèi):交互性圖標(biāo)、裝飾性圖標(biāo)、說(shuō)明性圖標(biāo)
 
1.7、按鈕
 
按鈕我覺(jué)得這部分是相對(duì)簡(jiǎn)單的、也是要做到風(fēng)格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺(tái)的風(fēng)格、不如圓角的大小其他的倒是沒(méi)什么了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
常規(guī)按鈕:次要按鈕、主要按鈕、文字按鈕、圖標(biāo)按鈕
 
按鈕狀態(tài):可用、禁用、加載、懸浮
 
尺寸:把按鈕分成:迷你、小、中、大,四種尺寸。高度分別為:24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」。
 
樣式:各個(gè)規(guī)范對(duì)按鈕形狀的規(guī)范基本都一樣。提供長(zhǎng)方形、正方形、圓角長(zhǎng)方形、圓形四種形狀。
 
 
布局:這里分享了兩個(gè)概念、古登堡法則、費(fèi)茨定律、告訴你我們?yōu)槭裁催@么排版。對(duì)產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺(tái)彈窗是一個(gè)很復(fù)雜的內(nèi)容、但是也是一個(gè)相對(duì)很好處理的部分。只要你做好規(guī)范這部分、簡(jiǎn)直就是一點(diǎn)開(kāi)胃小菜。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
彈窗是一個(gè)我頭痛的問(wèn)題因?yàn)椴惶靡?guī)范。但是我還是把這個(gè)彈窗系統(tǒng)、在我們的體系中形成了一個(gè)小的規(guī)范。感謝領(lǐng)導(dǎo)、感謝前段端的龍哥。
 
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務(wù)里我們會(huì)采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
 
1.9、表單
 
什么是表單:我理解表單就是系統(tǒng)為和用戶進(jìn)行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺(tái)產(chǎn)品中對(duì)我們數(shù)據(jù)做的增、刪、改、查、驗(yàn)都可以通過(guò)表單完成。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
我們?cè)诤笈_(tái)系統(tǒng)中、大部分的場(chǎng)景都會(huì)使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設(shè)計(jì)時(shí)要遵循的原則、簡(jiǎn)潔明了、清晰高效、適應(yīng)業(yè)務(wù)、即時(shí)反饋。
 
表單的構(gòu)成結(jié)構(gòu)、基本都是由、標(biāo)簽、域、提示、操作按鈕這四個(gè)部分構(gòu)成的。
 
表單布局在表單中我們采用多種布局方式。信息分組、內(nèi)容列表、標(biāo)簽頁(yè)、分步驟。
 
1.10、表格
 
B端設(shè)計(jì)中,對(duì)數(shù)據(jù)瀏覽、操作、過(guò)濾、展示是最高效的。這你就不用質(zhì)疑了。因?yàn)榻Y(jié)構(gòu)簡(jiǎn)單、精準(zhǔn)高效、數(shù)據(jù)形式豐富。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
表格是用來(lái)收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中,內(nèi)部包含表頭、表體、底欄等。外部包含標(biāo)題、篩選區(qū)、操作按鈕區(qū)等。
 
表格的類(lèi)型:基礎(chǔ)表格、樹(shù)形、子表格、交叉表格、圖表表格、卡片表格
 
表格的樣式:網(wǎng)格型、水平線型、斑馬紋、自由形式
 
進(jìn)階的一些知識(shí)就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識(shí)了。想了解去看更詳細(xì)的我的文章11表格設(shè)計(jì)和12表格優(yōu)化項(xiàng)目實(shí)戰(zhàn)。
 
1.11、大廠規(guī)范
 
如果你是一個(gè)小廠B端設(shè)計(jì)師、剛好沒(méi)有自己平臺(tái)的設(shè)計(jì)規(guī)范。那就去直接用的場(chǎng)的設(shè)計(jì)規(guī)范。去用沒(méi)問(wèn)題的。大廠那么多的牛逼設(shè)計(jì)給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
在使用大廠的設(shè)計(jì)規(guī)范時(shí)然后慢慢的積累自己平臺(tái)的設(shè)計(jì)規(guī)范。逐漸的你就會(huì)形成一個(gè)屬于你們自己平臺(tái)業(yè)務(wù)的高質(zhì)量設(shè)計(jì)規(guī)范了。
 
2、計(jì)劃
 
這個(gè)基礎(chǔ)系列的文章就這樣寫(xiě)結(jié)束掉吧、希望可以對(duì)你的B端設(shè)計(jì)有所幫助。之后我會(huì)寫(xiě)二個(gè)系列的文章、去分享我理解的B端設(shè)計(jì)。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計(jì)知識(shí)
 
 
第一個(gè)系列是B端基礎(chǔ)設(shè)計(jì)的加強(qiáng)版、B端高手。B端高手是會(huì)寫(xiě)我的實(shí)戰(zhàn)里是怎么去做的。其實(shí)就是我的設(shè)計(jì)項(xiàng)目復(fù)盤(pán)。
 
第二個(gè)系列就隨便的去分享一些設(shè)計(jì)知識(shí)。比如哪些什么什么原理呀、什么什么法則呀、在設(shè)計(jì)里的應(yīng)用。而且會(huì)提出和討論一些設(shè)計(jì)問(wèn)題。

藍(lán)藍(lán)設(shè)計(jì)(www.b186.net )是一家專(zhuān)注而深入的界面設(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ā)

 
 
 


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

設(shè)計(jì)原則之一致性

前端達(dá)人

一、什么是一致性呢?
二、  為什么一致性很重要呢?
三、  生活中一致性的案例
四、  UI設(shè)計(jì)一致性的體現(xiàn)
五、  交互設(shè)計(jì)一致性的體現(xiàn)
六、  總結(jié)
設(shè)計(jì)原則之一致性
 
 
一、什么是一致性呢?
一致性的字面意思和使用的場(chǎng)景不同代表的含義也會(huì)有區(qū)別,這里主要使用在UI/UX設(shè)計(jì)中。
UI/UX設(shè)計(jì)中一致性是指在整個(gè)應(yīng)用程序或網(wǎng)站中使用相同的設(shè)計(jì)元素和模式。它涉及在所有頁(yè)面和屏幕上使用相同的視覺(jué)語(yǔ)言、布局和交互,以創(chuàng)造一致且直觀的用戶體驗(yàn)。一致性有助于用戶了解如何瀏覽應(yīng)用程序或網(wǎng)站,消除困惑和沮喪,并使他們更容易學(xué)習(xí)和記住如何使用產(chǎn)品。
設(shè)計(jì)并非孤立的實(shí)踐。它與其他領(lǐng)域交織在一起,其中之一就是心理學(xué)。在設(shè)計(jì)中發(fā)揮根本作用的心理學(xué)原理是重復(fù)定律。
這一定律的起源可以追溯到 20 世紀(jì)早期,當(dāng)時(shí)德國(guó)心理學(xué)家赫爾曼·艾賓浩斯進(jìn)行了開(kāi)創(chuàng)性的研究。他的工作對(duì)理解人類(lèi)記憶具有革命性意義。艾賓浩斯最著名的貢獻(xiàn)是“遺忘曲線”,它表明如果不嘗試保留信息,信息會(huì)隨著時(shí)間的推移而丟失。然而,他還發(fā)現(xiàn),反復(fù)接觸信息會(huì)極大地影響我們記憶信息的能力。從本質(zhì)上講,重復(fù)可以強(qiáng)化回憶。
 
設(shè)計(jì)原則之一致性
 
 
艾賓浩斯的重復(fù)實(shí)驗(yàn)主要關(guān)注學(xué)習(xí)和記憶的過(guò)程,但其影響遠(yuǎn)不止于此。這讓人們認(rèn)識(shí)到,重復(fù)的元素更容易被記住,從而引導(dǎo)觀眾的注意力和焦點(diǎn)。很明顯,重復(fù)可以用來(lái)引導(dǎo)行為和理解。
通過(guò)重復(fù)顏色、形狀和圖案等特定元素,設(shè)計(jì)師可以創(chuàng)造一種統(tǒng)一感和節(jié)奏感。這種重復(fù)還使設(shè)計(jì)師能夠強(qiáng)調(diào)基本元素或信息。
重復(fù)不僅僅是一種設(shè)計(jì)原則,更是生活的一個(gè)基本方面。在自然界中,重復(fù)以各種方式體現(xiàn),從雪花的對(duì)稱(chēng)性到海浪拍打海岸的韻律圖案,從貝殼的螺旋到一年四季的循環(huán)。這種自然的重復(fù)帶來(lái)了節(jié)奏、結(jié)構(gòu)和可預(yù)測(cè)性,創(chuàng)造了一種舒適和熟悉的感覺(jué)。
人類(lèi)是自然的一部分,天生就能夠識(shí)別和響應(yīng)這些模式。我們的大腦是出色的模式識(shí)別機(jī)器,我們傾向于認(rèn)為重復(fù)的模式令人感到舒適和熟悉。這種認(rèn)知特征解釋了為什么設(shè)計(jì)中的重復(fù)模式(無(wú)論是在數(shù)字界面、實(shí)體產(chǎn)品、建筑還是營(yíng)銷(xiāo)中)會(huì)引起我們的共鳴。
設(shè)計(jì)原則之一致性
 
 
二、  為什么一致性很重要?
在 iOS 的設(shè)計(jì)指南中,一致性被視為讓設(shè)計(jì)融入 iOS 生態(tài)的關(guān)鍵,它幫助用戶在不同應(yīng)用間建立起一種熟悉感。遵循規(guī)范的一致性可以「help your design feel at home in iOS」,保持一致性是為用戶帶來(lái)產(chǎn)品愉悅感的重要方式。
在經(jīng)典交互設(shè)計(jì)原則中,「一致性」一直是重要的設(shè)計(jì)準(zhǔn)則。在幾乎可以稱(chēng)為「設(shè)計(jì)師必讀」的雅各布·尼爾森的十條可用性原則中,一致性(Consistency and standards)位列第四,原則建議設(shè)計(jì)者在界面和交互上遵循既定的規(guī)則,無(wú)論是在應(yīng)用內(nèi)部還是跨平臺(tái)之間。
在具體的執(zhí)行中,內(nèi)部一致性通常指應(yīng)用內(nèi)應(yīng)當(dāng)使用統(tǒng)一的視覺(jué)風(fēng)格和交互語(yǔ)言,相同的功能和操作應(yīng)該在體驗(yàn)上保持一致。而外部一致性則更強(qiáng)調(diào)用戶應(yīng)該遵循平臺(tái)和系統(tǒng)的設(shè)計(jì)規(guī)范,保持用戶在同一平臺(tái)不同應(yīng)用間體驗(yàn)的相似性。
一致性在UI/UX(用戶界面/用戶體驗(yàn))中非常重要,因?yàn)樗鼘?duì)于提供良好的用戶體驗(yàn)和用戶界面的可用性至關(guān)重要。下面詳細(xì)說(shuō)明一致性的幾個(gè)重要原因:
 
設(shè)計(jì)原則之一致性
 
 
1、  用戶學(xué)習(xí)曲線:
一致的UI/UX設(shè)計(jì)可以降低用戶的學(xué)習(xí)曲線。當(dāng)用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時(shí),他們可以快速理解并準(zhǔn)確預(yù)測(cè)如何與界面進(jìn)行交互。這減少了用戶的混淆和困惑,提高了他們的效率和滿意度。
2、  提升可用性:
一致性使用戶界面更加易于使用。當(dāng)用戶在不同的頁(yè)面或功能之間找到相似的設(shè)計(jì)元素和交互模式時(shí),他們可以輕松地將已有的知識(shí)和經(jīng)驗(yàn)應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù),減少錯(cuò)誤和迷失,提供更好的導(dǎo)航和流暢的體驗(yàn)。
3、  品牌認(rèn)可度:
一致的UI/UX設(shè)計(jì)有助于樹(shù)立品牌形象和增強(qiáng)品牌認(rèn)可度。通過(guò)在不同的渠道和平臺(tái)上保持一致的設(shè)計(jì)元素、標(biāo)識(shí)和視覺(jué)風(fēng)格,品牌可以建立起獨(dú)特而可識(shí)別的形象。用戶在不同的觸點(diǎn)上都能感受到品牌的一致性,從而增加品牌的信任和忠誠(chéng)度。
4、  用戶滿意度:
一致性直接影響用戶的滿意度。當(dāng)用戶在使用應(yīng)用程序或網(wǎng)站時(shí)感受到一致的設(shè)計(jì)和交互方式時(shí),他們會(huì)感到更加舒適和自信。一致性傳遞了專(zhuān)業(yè)和質(zhì)量的信號(hào),讓用戶感到被關(guān)注和重視。這種積極的用戶體驗(yàn)有助于提升用戶滿意度,并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。
 
三、  生活中一致性的案例
設(shè)計(jì)原則之一致性
 
 
生活中的案例保持一致性的有很多,
a、例如紅綠燈,在學(xué)習(xí)駕照或老師教學(xué)時(shí)會(huì)統(tǒng)一講解紅燈停,綠燈行。
b、向左向右箭頭符號(hào)的使用,在日常生活中都會(huì)保持一致。
c、我們乘坐地鐵時(shí),地鐵的線路圖也會(huì)保持一致性,每個(gè)站的點(diǎn)大小,文字,到站和未到站以及行駛過(guò)的站點(diǎn)都有清晰統(tǒng)一的設(shè)計(jì)和交互操作。
 
四、  UI設(shè)計(jì)一致性的體現(xiàn)
 
設(shè)計(jì)原則之一致性
 
 
1、  顏色
顏色是一種物理現(xiàn)象和感官體驗(yàn),是光波在人眼視網(wǎng)膜上的反射或吸收所形成的視覺(jué)效果。
設(shè)計(jì)中的顏色選擇代表了一個(gè)項(xiàng)目的品牌,例如常見(jiàn)的餓了么藍(lán),美團(tuán)的黃,京東的紅等等,顏色的一致性有助于營(yíng)造良好的視覺(jué)體驗(yàn),強(qiáng)化品牌形象,提升可用性和無(wú)障礙性,最終改善用戶的整體交互感受。這對(duì)于產(chǎn)品的成功至關(guān)重要。在設(shè)計(jì)時(shí)顏色(品牌色)會(huì)延續(xù)到按鈕,圖標(biāo),字體、標(biāo)簽,背景,banner等模塊使用。
設(shè)計(jì)原則之一致性
 
 
2、  字體
字體是一種特定的文字樣式,它描述了文字的形狀、大小、粗細(xì)、間距等視覺(jué)特征。
字體是設(shè)計(jì)中非常重要的元素之一,不同類(lèi)型的字體,字體的粗細(xì),有襯線字體和有襯線字體,字體的字重等,這些不一致會(huì)造成頁(yè)面混亂,字體的選擇和使用會(huì)對(duì)用戶的視覺(jué)體驗(yàn)、信息感知、品牌聯(lián)系和情感體驗(yàn)產(chǎn)生重要影響。
開(kāi)發(fā)實(shí)現(xiàn)上如果字體使用較多,會(huì)影響加載速度,沒(méi)有統(tǒng)一的字體制定規(guī)則后期更新迭代也會(huì)比較繁瑣,造成資源浪費(fèi)。
 
設(shè)計(jì)原則之一致性
 
 
3、  圖標(biāo)
圖標(biāo)是一種簡(jiǎn)化的、具有視覺(jué)表現(xiàn)力的符號(hào)圖形,在用戶界面設(shè)計(jì)、信息傳達(dá)等領(lǐng)域廣泛應(yīng)用。
在眾多APP中,常使用APP的你肯定可以感受到,圖標(biāo)除了準(zhǔn)確的表達(dá)某個(gè)含義,還需要在設(shè)計(jì)時(shí)保持一致性,圖標(biāo)的大小,設(shè)計(jì)的風(fēng)格例如線型圖標(biāo)、填充圖標(biāo)、簡(jiǎn)約圖標(biāo)、立體圖標(biāo)、卡通圖標(biāo)等,如果這些圖標(biāo)風(fēng)格進(jìn)行混合使用就會(huì)造成混亂,影響用戶體驗(yàn),看起來(lái)很不專(zhuān)業(yè)也會(huì)影響用戶使用時(shí)對(duì)于安全性的擔(dān)憂。
設(shè)計(jì)原則之一致性
 
 
4、  按鈕樣式
按鈕是一種常見(jiàn)的交互界面元素,用于觸發(fā)某種操作或功能。
設(shè)計(jì)中的按鈕有很多樣式,因?yàn)轫?xiàng)目類(lèi)型的不同按鈕樣式也不同,按鈕的樣式有圓形按鈕,矩形按鈕,圓角矩形按鈕,菱形按鈕等,同一個(gè)項(xiàng)目中建議使用統(tǒng)一的按鈕樣式,除了可以體現(xiàn)專(zhuān)業(yè)性,還可以讓用戶增加信任度,按鈕樣式使用很多,用戶除了使用體驗(yàn)不友好,還會(huì)覺(jué)得是不是跳出了這個(gè)產(chǎn)品去到了另一個(gè)地方。
 
設(shè)計(jì)原則之一致性
 
 
5、  排版
排版是指在印刷或數(shù)字媒體中,對(duì)文本、圖像等內(nèi)容進(jìn)行有規(guī)則的布局和格式化的過(guò)程。
設(shè)計(jì)中排版的一致性,使用戶能夠快速適應(yīng)和理解界面的結(jié)構(gòu),降低學(xué)習(xí)成本,用戶對(duì)于熟悉的排版模式產(chǎn)生更強(qiáng)烈的歸屬感和安全感,使內(nèi)容更易讀,用戶可以依照熟悉的視覺(jué)動(dòng)線快速找到所需信息,提高信息獲取效率。
五、  交互設(shè)計(jì)一致性的體現(xiàn)
 
設(shè)計(jì)原則之一致性
 
 
1、  操作一致
根據(jù)文字意思就是用戶才操作時(shí)候的流程保持一致,操作保持一致,例如大家常見(jiàn)的下單購(gòu)買(mǎi)商品流程,
用戶在購(gòu)買(mǎi)商品時(shí):點(diǎn)擊商品——商品詳情——付款購(gòu)買(mǎi),其他商品也應(yīng)該是這樣流程,
如果每個(gè)商品流程不同就會(huì)很亂,例如:
點(diǎn)擊A商品————商品詳情——付款購(gòu)買(mǎi);
點(diǎn)擊B商品——付款購(gòu)買(mǎi)——查看商品詳情;
點(diǎn)擊C商品——同類(lèi)商品列表——商品詳情——付款購(gòu)買(mǎi),
這樣就會(huì)很亂,用戶不知道點(diǎn)擊下一個(gè)商品會(huì)是什么樣子。
例如:
設(shè)計(jì)原則之一致性
 
 
1、APP中的視頻瀏覽是上下滑動(dòng),進(jìn)入新的模塊后視頻瀏覽變成了左右滑動(dòng)。
2、需要確認(rèn)某些操作時(shí),確認(rèn)按鈕一會(huì)在右側(cè),一會(huì)確認(rèn)又在左側(cè)。
用戶在操作時(shí)會(huì)除了體驗(yàn)很亂,也很難培養(yǎng)用戶習(xí)慣。
設(shè)計(jì)原則之一致性
 
 
2、  文案符號(hào)一致
文案和標(biāo)點(diǎn)符號(hào)的一致比較好理解,例如常見(jiàn)的輸入框,“請(qǐng)您輸入帳號(hào)”,“請(qǐng)輸入你的密碼”,同一頁(yè)面場(chǎng)景下文案和稱(chēng)呼不統(tǒng)一,會(huì)造成用戶操作遲疑,是不是這個(gè)不重要才用了“你”,重要的才用“您”,為了避免用戶進(jìn)行不必要的思考文案保持一致,符號(hào)亦是如此。
設(shè)計(jì)原則之一致性
 
 
3、  反饋一致
當(dāng)我們看到下一步按鈕時(shí),有些地方交互是進(jìn)入了新的頁(yè)面,有的是分步式使用。建議使用一種保持統(tǒng)一,避免用戶產(chǎn)生誤導(dǎo)。
操作反饋后的彈窗,相同功能反饋的彈窗樣式不一致:一會(huì)是圖文彈窗,一會(huì)純文字提示,用戶也會(huì)很亂,包括交互時(shí)出現(xiàn)的樣式也需要保持一致,劇中或從下向上彈出。
六、  總結(jié)
一致性在UI/UX中的重要性在于提供清晰、高效、易用和令人愉悅的用戶體驗(yàn)。通過(guò)保持設(shè)計(jì)元素、布局和交互方式的一致性,可以降低用戶的認(rèn)知負(fù)荷,提高用戶的學(xué)習(xí)效率,增強(qiáng)品牌形象,提升用戶滿意度,并最終實(shí)現(xiàn)更好的業(yè)務(wù)成果,詳細(xì)分為以下七點(diǎn):
設(shè)計(jì)原則之一致性
 


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

常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)

前端達(dá)人

B 端產(chǎn)品的業(yè)務(wù)場(chǎng)景通常比 C 端更為復(fù)雜,因此在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)對(duì)信息的處理方式也需要根據(jù)不同的業(yè)務(wù)場(chǎng)景進(jìn)行設(shè)計(jì)。今天主要聊一下 B 端產(chǎn)品設(shè)計(jì)中彈窗設(shè)計(jì)。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
彈窗的定義
彈窗是展現(xiàn)在用戶操作界面之上的容器,在 X 軸和 Y 軸的平行空間之上擴(kuò)展了頁(yè)面的高度。是系統(tǒng)與用戶之間建立聯(lián)系非常重要的組成部分。它通常在用戶進(jìn)行特定操作或訪問(wèn)特定頁(yè)面功能時(shí)彈出,目的是向用戶展示某些信息、提供選擇或執(zhí)行某些操作。
 
彈窗使用場(chǎng)景
  1.  
    需要呈現(xiàn)的內(nèi)容篇幅相對(duì)較少。
  2.  
    常用于針對(duì)某些內(nèi)容進(jìn)行補(bǔ)充說(shuō)明、需要用戶處理關(guān)鍵信息、重要的警告提示等。
  3.  
    通常是由系統(tǒng)觸發(fā)(用戶被動(dòng)接受)。
  4.  
    彈窗整體高度和寬度不做絕對(duì)的標(biāo)準(zhǔn)或規(guī)定,可以根據(jù)內(nèi)容篇幅的多少和視覺(jué)的平衡度來(lái)確定,整體規(guī)范保持一致即可。
 
總體概括為簡(jiǎn)單和復(fù)雜兩個(gè)場(chǎng)景。
 
一、場(chǎng)景簡(jiǎn)單
場(chǎng)景簡(jiǎn)單包括:全局提示、氣泡確認(rèn)框、警告提示、通知提醒框,通常是操作確認(rèn)和系統(tǒng)內(nèi)部自動(dòng)觸發(fā)性提示時(shí)使用。
 
1. 全局提示
以 toast 提示居多,通常在頁(yè)面中間偏上的位置。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
2. 氣泡提示
用于解釋難理解的功能名詞或者由于版面限制文字展示不完,利用氣泡來(lái)展示。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
3. 警告提示
用于重點(diǎn)內(nèi)容的警告提醒,降低用戶犯錯(cuò)概率,提升用戶的使用體驗(yàn)。
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
4. 提示性通知彈窗:
位置相對(duì)固定,通常出現(xiàn)在需要介紹說(shuō)明的功能旁邊或者居頁(yè)面中間展示。
例如,當(dāng)系統(tǒng)發(fā)生重要更新維護(hù)或者重點(diǎn)功能引導(dǎo)時(shí),可以顯示一個(gè)提示性通知彈窗,告知用戶當(dāng)前狀態(tài)。
類(lèi)型主要包括以下三種:
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
舉例:
有贊后臺(tái)頁(yè)面
有贊后臺(tái)頁(yè)面
 
 
 
二、場(chǎng)景復(fù)雜
1. 場(chǎng)景復(fù)雜|全屏彈窗
常見(jiàn)的B端彈窗樣式設(shè)計(jì)總結(jié)
 
 
 
新開(kāi)頁(yè)簽(瀏覽器
 

藍(lán)藍(lán)設(shè)計(jì)(www.b186.net )是一家專(zhuān)注而深入的界面設(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ā)



作者:西城門(mén)設(shè)計(jì)
鏈接:https://www.zcool.com.cn/article/ZMTYyMDI5Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

比GIF更好用的Lottie動(dòng)畫(huà)是什么?

前端達(dá)人

   不知道大家有沒(méi)有這樣的困擾,每次制作GIF圖的時(shí)候,難免會(huì)出現(xiàn)邊緣鋸齒,就算加上白邊之后,在夜晚模式的時(shí)候鋸齒就更明顯了。除此之外,GIF圖對(duì)于漸變填充的呈現(xiàn)也很糟糕,會(huì)出現(xiàn)漸變斷層的情況,看起來(lái)很不自然。
最讓人難以接受的情況是:
        稍微把動(dòng)畫(huà)做流暢一些,GIF的文件大小就變得巨大無(wú)比。
        在2017年的時(shí)候,一款比GIF動(dòng)畫(huà)更好用的動(dòng)畫(huà)圖片格式誕生了!?。?/div>
        那就是我們今天將要介紹的Lottie動(dòng)畫(huà)。
     
        什么是Lottie動(dòng)畫(huà)?
       Lottie動(dòng)畫(huà)是一種基于 JSON 的動(dòng)畫(huà)文件格式,允許在任何平臺(tái)上發(fā)送動(dòng)畫(huà),就像發(fā)送圖片一樣輕松。Lottie是可在任何設(shè)備上運(yùn)行的小文件,并且可以放大或縮小而不會(huì)出現(xiàn)鋸齒的一種動(dòng)畫(huà)格式。
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
 
相較于其他動(dòng)圖格式,Lottie有哪些優(yōu)點(diǎn)?
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
①文件大小
和GIF、Apng 或 MP4 等其他格式相比,Lottie 動(dòng)畫(huà)要小得多,同時(shí)保持相同的動(dòng)畫(huà)表現(xiàn),甚至更流暢。
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
②無(wú)線擴(kuò)展
Lottie動(dòng)畫(huà)是基于矢量設(shè)計(jì)制作的,這意味著可以隨意放大或縮小它們,而不必?fù)?dān)心分辨率的大小導(dǎo)致的鋸齒問(wèn)題。放大無(wú)數(shù)倍也是清晰如初。
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
③支持多平臺(tái)
對(duì)于所有開(kāi)發(fā)人員來(lái)說(shuō),Lottie動(dòng)畫(huà)的交接非常簡(jiǎn)單?,F(xiàn)在我們可以在 iOS、Android、Web 和 React Native 上使用 Lottie 動(dòng)畫(huà),也不需要修改。使用和調(diào)用都非常方便。
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
④可交互
在 Lottie 動(dòng)畫(huà)中,動(dòng)畫(huà)元素可以設(shè)計(jì)為可交互組件,用戶可以操縱它們進(jìn)行交互,實(shí)現(xiàn)滾動(dòng)、單擊和懸停等交互效果。這是GIF、Apng和MP4等動(dòng)畫(huà)文件都沒(méi)辦法做到的。
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
  怎么設(shè)計(jì)制作Lottie動(dòng)畫(huà)呢?
       目前,Lottie官網(wǎng)提供了很多動(dòng)效設(shè)計(jì)軟件的插件供大家使用和下載。目前下面這些設(shè)計(jì)軟件可以在官網(wǎng)下載到Lottie動(dòng)畫(huà)的導(dǎo)出插件。
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
其中,Lottie Creator是Lottie官方的網(wǎng)頁(yè)版動(dòng)畫(huà)制作工具,登錄官網(wǎng)就可以使用。
Lottie官網(wǎng)地址 
 https://lottiefiles.com
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
       說(shuō)了這么多Lottie的優(yōu)點(diǎn),其實(shí)Lottie也是有短板的。比如說(shuō),AE里面的fx效果,Lottie就全部不支持,另外復(fù)合路徑動(dòng)畫(huà)等等動(dòng)效效果也不支持。
       為了方便大家快速上手Lottie動(dòng)畫(huà),作者把Lottie支持的效果整理歸類(lèi)成了幾張圖片,方便大家制作的時(shí)候快速查閱。
 
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 
比GIF更好用的Lottie動(dòng)畫(huà)是什么?
 
 

藍(lán)藍(lán)設(shè)計(jì)(www.b186.net )是一家專(zhuān)注而深入的界面設(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ā)



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

B端后臺(tái)管理界面設(shè)計(jì)欣賞

前端達(dá)人

在現(xiàn)代企業(yè)中,B端后臺(tái)管理界面設(shè)計(jì)是提升工作效率和用戶體驗(yàn)的關(guān)鍵因素。本文將通過(guò)UI設(shè)計(jì)公司提供的優(yōu)秀案例,探討如何優(yōu)化后臺(tái)管理界面的設(shè)計(jì),提升用戶的使用體驗(yàn)。

 

1. 界面簡(jiǎn)潔,功能齊全

一個(gè)優(yōu)秀的B端后臺(tái)管理界面,首先應(yīng)具備簡(jiǎn)潔明了的設(shè)計(jì)風(fēng)格。UI設(shè)計(jì)公司在設(shè)計(jì)過(guò)程中,通常會(huì)通過(guò)簡(jiǎn)潔的布局和清晰的導(dǎo)航,幫助用戶快速找到所需功能。例如,藍(lán)藍(lán)設(shè)計(jì)公司就采用了極簡(jiǎn)設(shè)計(jì)原則,在保持美觀的同時(shí),確保用戶能夠高效操作。

 

2. 交互設(shè)計(jì)人性化

人性化的交互設(shè)計(jì)是提升用戶體驗(yàn)的關(guān)鍵。UI設(shè)計(jì)公司會(huì)根據(jù)用戶的使用習(xí)慣和需求,設(shè)計(jì)直觀的操作流程和反饋機(jī)制。例如,通過(guò)在重要操作后提供即時(shí)反饋,減少用戶操作的疑惑和錯(cuò)誤。

 

3. 數(shù)據(jù)可視化

對(duì)于后臺(tái)管理界面來(lái)說(shuō),數(shù)據(jù)可視化是不可或缺的一部分。通過(guò)圖表、儀表盤(pán)等可視化工具,用戶可以直觀地了解業(yè)務(wù)數(shù)據(jù),從而做出更好的決策。UI設(shè)計(jì)公司通常會(huì)使用最新的數(shù)據(jù)可視化技術(shù),幫助用戶快速理解復(fù)雜的數(shù)據(jù)。

 

4. 響應(yīng)式設(shè)計(jì)

隨著移動(dòng)設(shè)備的普及,響應(yīng)式設(shè)計(jì)變得尤為重要。優(yōu)秀的B端后臺(tái)管理界面應(yīng)能夠在不同設(shè)備和屏幕尺寸下保持良好的使用體驗(yàn)。UI設(shè)計(jì)公司會(huì)在設(shè)計(jì)時(shí)考慮多種終端的兼容性,確保界面在手機(jī)、平板和電腦上都能流暢運(yùn)行。

 

5. 安全性與穩(wěn)定性

后臺(tái)管理界面涉及大量敏感數(shù)據(jù),安全性和穩(wěn)定性是設(shè)計(jì)過(guò)程中不可忽視的因素。UI設(shè)計(jì)公司在設(shè)計(jì)時(shí)會(huì)采用多層次的安全措施,保障數(shù)據(jù)的安全,同時(shí)通過(guò)優(yōu)化代碼和服務(wù)器配置,確保系統(tǒng)的穩(wěn)定性和高效性。

通過(guò)以上幾個(gè)方面的優(yōu)化,UI設(shè)計(jì)公司能夠打造出高效、美觀、易用的B端后臺(tái)管理界面,助力企業(yè)提升管理水平和工作效率。希望這些優(yōu)秀案例能為你的設(shè)計(jì)工作提供一些啟發(fā)和參考。

 

藍(lán)藍(lán)設(shè)計(jì)(www.b186.net )是一家專(zhuān)注而深入的界面設(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ā)

PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端

前端達(dá)人

電商boss系統(tǒng)采購(gòu)訂單頁(yè)面在移動(dòng)端呈現(xiàn),我做了哪些思考?
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
在B端UI/UX設(shè)計(jì)領(lǐng)域,我們常常會(huì)遇到類(lèi)似的需求:隨著業(yè)務(wù)的發(fā)展,需要將復(fù)雜系統(tǒng)中的核心功能摘出來(lái),并在小程序或移動(dòng)應(yīng)用上呈現(xiàn),以便客戶能夠便捷地使用和操作,從而提升工作效率。然而,實(shí)際操作中我們會(huì)發(fā)現(xiàn),盡管對(duì)這些功能很熟悉,但是落地過(guò)程中卻會(huì)遇到一系列問(wèn)題。
 
本文中,將分享我在將復(fù)雜電商BOSS系統(tǒng)的訂單頁(yè)面呈現(xiàn)在移動(dòng)端的設(shè)計(jì)過(guò)程,希望對(duì)大家有所幫助。通過(guò)本文,您將了解到以下內(nèi)容:
1、如何在設(shè)計(jì)過(guò)程中充分考慮電腦端和移動(dòng)端用戶的需求和使用習(xí)慣;
2、如何將復(fù)雜的訂單頁(yè)面優(yōu)化為簡(jiǎn)潔、易用的移動(dòng)端界面;
3、針對(duì)移動(dòng)端的限制和挑戰(zhàn),如何進(jìn)行設(shè)計(jì)決策和權(quán)衡;
4、使用哪些有效的UX技巧來(lái)提升用戶體驗(yàn)和工作效率。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
 
一、深入分析業(yè)務(wù)背景和使用場(chǎng)景
1、業(yè)務(wù)背景關(guān)系梳理
選款的零售商客戶通過(guò)衫海精選款下單后,訂單信息和訂單狀態(tài)會(huì)傳到BOSS后臺(tái),相關(guān)負(fù)責(zé)人可隨時(shí)查看并處理。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
2、為什么需要在移動(dòng)端呈現(xiàn)?
為了確保平臺(tái)高效履約,需要市場(chǎng)部同事隨時(shí)掌握訂單狀態(tài),特別是
發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)和攬收已超時(shí)
的訂單,以便及時(shí)通知上下游。但是由于工作性質(zhì),他們無(wú)法隨時(shí)坐在電腦面前,所以需要在小程序上呈現(xiàn)訂單信息,可以讓市場(chǎng)部同事隨時(shí)查看并處理訂單,避免出現(xiàn)訂單超時(shí),客戶投訴的情況。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
 
二、功能拆解
1、將電腦端訂單內(nèi)容拆分重組,信息歸類(lèi)
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
 
2、訂單功能拆分后,主要分為以下四個(gè)部分
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
1)訂單狀態(tài)
訂單狀態(tài)包括:全部、待付款、備貨中、待收貨、已完成、已關(guān)閉。全部狀態(tài)下
新訂單、售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)
的訂單類(lèi)型需要重點(diǎn)露出,方便快速查詢。
  •  
    設(shè)計(jì)差異:
1、訂單狀態(tài):電腦端大屏橫向可以全部平鋪展示;移動(dòng)端則是橫向滑動(dòng)。
2、售后中、發(fā)貨即將超時(shí)、攬收即將超時(shí)、發(fā)貨已超時(shí)、攬收已超時(shí)的訂單快捷入口,電腦端大屏可以全部平鋪展示;移動(dòng)端則需要換行,這里不做橫向滑動(dòng)是因?yàn)闀?huì)影響用戶的操作效率
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
2)訂單查詢條件
訂單查詢條件包括:訂單編號(hào)、時(shí)間排序、商品名稱(chēng)、供應(yīng)商名稱(chēng)、下單時(shí)間、訂單狀態(tài)、履約方、SKU編碼、商品ID、是否缺貨、所屬云倉(cāng)等等。
  •  
    設(shè)計(jì)思考:
分析用戶日常的使用習(xí)慣,對(duì)高頻操作的篩選項(xiàng)進(jìn)行提煉在移動(dòng)端展示,提升使用效率。低頻操作則不在移動(dòng)端展示。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
經(jīng)過(guò)與業(yè)務(wù)方溝通,訂單編號(hào)、時(shí)間排序、商品名稱(chēng)、供應(yīng)商名稱(chēng)、下單時(shí)間、訂單狀態(tài)、履約方的使用頻次相對(duì)較多,
訂單編號(hào)、時(shí)間排序
使用頻次最高。
 
a、訂單編號(hào)/排序時(shí)間
  •  
    設(shè)計(jì)差異:
1、訂單編號(hào)查詢:電腦端和移動(dòng)端都是直接輸入,但是電腦端支持批量查詢,單次查詢內(nèi)容會(huì)更多。
2、下單時(shí)間排序:電腦端采用input框的樣式,下拉篩選;移動(dòng)端是通過(guò)點(diǎn)擊切換排序方式,操作會(huì)更便捷。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
 
b、商品/供應(yīng)商查詢
  •  
    設(shè)計(jì)思考:
1、商品查詢:電腦端、移動(dòng)端都是直接輸入;
2、供應(yīng)商查詢:電腦端采用input框的樣式,下拉篩選;移動(dòng)端則是進(jìn)入新的頁(yè)面進(jìn)行選擇;兩者都支持關(guān)鍵字搜索;
移動(dòng)端不直接展開(kāi)的原因是:供應(yīng)商數(shù)量多,在當(dāng)前頁(yè)面展示篇幅較長(zhǎng),還涉及到分頁(yè),會(huì)影響用戶的操作體驗(yàn)。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
 
c、時(shí)間查詢
  •  
    設(shè)計(jì)差異:
電腦端點(diǎn)擊出現(xiàn)時(shí)間選擇器,支持快捷查詢;移動(dòng)端點(diǎn)擊選擇跳轉(zhuǎn)到新頁(yè)面,時(shí)間全部鋪開(kāi)展示;兩者都支持滑動(dòng)鼠標(biāo)(手指)連續(xù)選擇時(shí)間段。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
d、訂單狀態(tài)查詢
  •  
    設(shè)計(jì)差異:
電腦端采用input框,下拉選中;移動(dòng)端則是全部展示出來(lái),采用勾選的方式進(jìn)行選擇。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
3)批量操作
小程序不做批量操作功能。
 
4)訂單內(nèi)容
訂單內(nèi)容包括訂單編號(hào)、下單時(shí)間、零售商、商品信息、數(shù)量、發(fā)貨方式、買(mǎi)家信息、訂單狀態(tài)、實(shí)收款、訂單詳情、查看物流。這些內(nèi)容可以歸納為3類(lèi):
a、訂單信息 b、商品信息 c、操作。
 
a、訂單信息
訂單信息包括:訂單編號(hào)、下單時(shí)間、零售商、、發(fā)貨方式、買(mǎi)家信息、訂單狀態(tài)、實(shí)收款
  •  
    設(shè)計(jì)差異:
電腦端面積大,內(nèi)容需要散開(kāi)排列;移動(dòng)端面積小,內(nèi)容需要集中排列。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
b、商品信息
商品信息包括:商品名稱(chēng)、圖片、價(jià)格、貨號(hào)、規(guī)格、SKU編碼、供應(yīng)商、下單數(shù)量、拿貨數(shù)量、倉(cāng)內(nèi)現(xiàn)貨、缺貨原因
  •  
    設(shè)計(jì)差異:
同樣的內(nèi)容,移動(dòng)端更加聚焦,但是商品數(shù)量展示也偏少。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
c、操作
操作包括:訂單詳情、查看物流
  •  
    設(shè)計(jì)差異:
交互方式相同,都是跳轉(zhuǎn)到新頁(yè)面。
PC端的頁(yè)面設(shè)計(jì),如何優(yōu)雅呈現(xiàn)在移動(dòng)端?
 
 
 
三、總結(jié)
由于屏幕大小和分辨率的不同,電腦端和移動(dòng)端頁(yè)面在功能的布局和信息展示上也會(huì)有所不同。
電腦端使用鼠標(biāo)操作,包含滑動(dòng)、左擊、右擊、雙擊等,相對(duì)來(lái)說(shuō)單一,交互效果較少。而對(duì)于手機(jī)端來(lái)說(shuō),由于屏幕大小的限制,操作方式需要更加的豐富,通過(guò)這些豐富的操作來(lái)實(shí)現(xiàn)頁(yè)面和功能之間的交互。所以電腦端和移動(dòng)端相同功能的操作方式也會(huì)不同,組件也有所差異。在做設(shè)計(jì)時(shí),盡量使用成熟的組件,給用戶良好的使用體驗(yàn)。
遇到復(fù)雜的設(shè)計(jì)需求,不要慌張,
核心都是看透事物的本質(zhì),拆解為基礎(chǔ)的組件,再?gòu)母旧辖鉀Q問(wèn)題。
謝謝!
 

藍(lán)藍(lán)設(shè)計(jì)(www.b186.net )是一家專(zhuān)注而深入的界面設(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ā)



作者:西城門(mén)設(shè)計(jì)
鏈接:https://www.zcool.com.cn/article/ZMTYxOTQxMg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

原創(chuàng)作品案例:光譜油氣檢測(cè)軟件界面設(shè)計(jì)

前端達(dá)人

 

 

西派特(北京)科技有限公司是研發(fā)和制造科學(xué)儀器和智能工業(yè)儀表的國(guó)家高新技術(shù)企業(yè),公司總部位于北京經(jīng)濟(jì)技術(shù)開(kāi)發(fā)區(qū)。產(chǎn)品是將光譜與物質(zhì)物化性質(zhì)全息智能分析技術(shù)相結(jié)合,開(kāi)發(fā)制造的快檢設(shè)備,可快速檢測(cè)液體、固體、氣體物料的多種性質(zhì)指標(biāo)。適用于煉油、化工、煤炭、電力、生物發(fā)酵等領(lǐng)域。

 

該軟件由北京西派特科技有限公司委托藍(lán)藍(lán)設(shè)計(jì)負(fù)責(zé)界面視覺(jué)設(shè)計(jì)、交互設(shè)計(jì)。藍(lán)藍(lán)設(shè)計(jì)人員通過(guò)前期詳細(xì)溝通,參考大量相關(guān)競(jìng)品,為其提供四種方案視覺(jué)設(shè)計(jì)。最終雙方確定方案一設(shè)計(jì)風(fēng)格,后續(xù)根據(jù)客戶提供的原型圖及需求完成其他頁(yè)面設(shè)計(jì)。

image.png

藍(lán)藍(lán)設(shè)計(jì)(www.b186.net )是一家專(zhuān)注而深入的界面設(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ā)

為極端情況而設(shè)計(jì)

前端達(dá)人

前言
為極端情況而設(shè)計(jì)
 
 
當(dāng)我們?cè)谶M(jìn)行產(chǎn)品設(shè)計(jì)的時(shí)候,設(shè)計(jì)師會(huì)優(yōu)先考慮理想狀況下的各種場(chǎng)景,而理想的用戶流程是沒(méi)有任何問(wèn)題和障礙的。但是人們很少按照我們期望的方式使用我們的產(chǎn)品。超出預(yù)期之外的情況,就是我們通常所說(shuō)的「邊緣情況」,或者說(shuō)「極端情況」。
事實(shí)上,針對(duì)不太理想的情況進(jìn)行設(shè)計(jì)同樣重要。如果沒(méi)有計(jì)劃界面如何處理異常情況,整個(gè)體驗(yàn)可能很快就會(huì)令人崩潰。
作為一名職場(chǎng)中合格的用戶體驗(yàn)設(shè)計(jì)師,避免在工作中遺漏各種邊緣情況的考慮,與規(guī)避在方案評(píng)審的時(shí)候會(huì)遭到評(píng)審會(huì)中其他同學(xué)的各種diss的尷尬,有時(shí)候業(yè)內(nèi)也會(huì)將“解決邊緣情況問(wèn)題”的能力作為一個(gè)產(chǎn)品經(jīng)理或交互設(shè)計(jì)師是否有經(jīng)驗(yàn)是否資深的一個(gè)評(píng)判標(biāo)準(zhǔn)。。
所以,
設(shè)計(jì)方案的完整程度需要看是否有對(duì)邊緣情況的對(duì)應(yīng)處理方案。
產(chǎn)品設(shè)計(jì)其實(shí)是“向好避壞”并行的設(shè)計(jì)過(guò)程
,向好設(shè)計(jì)是要追求絕對(duì)的好,結(jié)合實(shí)際情況盡可能保證產(chǎn)品體驗(yàn)的舒適和驚喜,這是產(chǎn)品設(shè)計(jì)一定要為用戶的極致體驗(yàn)需要負(fù)責(zé)的;避壞設(shè)計(jì)是相對(duì)的壞,結(jié)合實(shí)際情況盡可能為一些低頻場(chǎng)景的極端情況做好容錯(cuò)方案和機(jī)制,這就是產(chǎn)品設(shè)計(jì)中常常提到的邊緣情況處理設(shè)計(jì)。
為極端情況而設(shè)計(jì)
 
 
為什么要重視極端情況?
針對(duì)用戶體驗(yàn)中的邊緣情況進(jìn)行設(shè)計(jì)至關(guān)重要,
因?yàn)檫@些特殊場(chǎng)景雖然不太常見(jiàn),但可能會(huì)對(duì)用戶體驗(yàn)產(chǎn)生重大影響。
通過(guò)解決邊緣情況,可以確保產(chǎn)品設(shè)計(jì)能夠滿足更廣泛的用戶需求和情況,從而提高可用性、可訪問(wèn)性和用戶滿意度。主要有以下幾個(gè)方面的好處:
  1.  
    提高產(chǎn)品質(zhì)量和可靠性
    : 考慮邊界情況可以幫助發(fā)現(xiàn)并解決潛在的問(wèn)題和漏洞,從而提高產(chǎn)品的質(zhì)量和可靠性。通過(guò)深入挖掘極端情況,可以發(fā)現(xiàn)在正常使用中可能不會(huì)遇到的問(wèn)題。
  2.  
    增強(qiáng)用戶體驗(yàn)
    : 處理邊界情況可以確保產(chǎn)品在各種情況下都能提供良好的用戶體驗(yàn)。當(dāng)用戶遇到邊界情況時(shí),如果產(chǎn)品能夠正確處理并給予合適的反饋,用戶將感到滿意,并且對(duì)產(chǎn)品的信任感會(huì)增強(qiáng)。
  3.  
    降低風(fēng)險(xiǎn)
    : 不考慮邊界情況可能會(huì)導(dǎo)致嚴(yán)重的問(wèn)題,甚至是安全漏洞。通過(guò)在設(shè)計(jì)和開(kāi)發(fā)過(guò)程中考慮邊界情況,可以降低產(chǎn)品出現(xiàn)故障或安全漏洞的風(fēng)險(xiǎn),從而減少潛在的損失和責(zé)任。
  4.  
    滿足法律和標(biāo)準(zhǔn)要求
    : 在某些行業(yè)中,產(chǎn)品必須符合特定的法律法規(guī)或行業(yè)標(biāo)準(zhǔn)。考慮到邊界情況是滿足這些要求的一部分,因?yàn)樗鼈兺ǔR螽a(chǎn)品能夠在各種情況下都能夠安全可靠地運(yùn)行。
  5.  
    增強(qiáng)產(chǎn)品競(jìng)爭(zhēng)力
    : 在當(dāng)今競(jìng)爭(zhēng)激烈的市場(chǎng)環(huán)境中,提供穩(wěn)健、可靠的產(chǎn)品可以幫助企業(yè)贏得用戶信任并提升競(jìng)爭(zhēng)力??紤]到邊界情況可以幫助企業(yè)開(kāi)發(fā)出更具有吸引力和競(jìng)爭(zhēng)力的產(chǎn)品。
所以考慮邊界情況對(duì)于確保產(chǎn)品的質(zhì)量、用戶體驗(yàn)和安全性至關(guān)重要,并且有助于降低風(fēng)險(xiǎn)并提高產(chǎn)品競(jìng)爭(zhēng)力
 
常見(jiàn)的極端情況有哪些
一、文本極限值
處理文本極限值在 UI 設(shè)計(jì)中是一個(gè)重要的考慮因素,特別是當(dāng)設(shè)計(jì)涉及到文本輸入框、文本區(qū)域或文本標(biāo)簽等元素時(shí)。以下是一些處理文本極限值的常見(jiàn)方法:
1、限制輸入長(zhǎng)度。
對(duì)于文本輸入框,可以設(shè)置最大字符數(shù)限制,以確保用戶輸入的文本不會(huì)超過(guò)預(yù)期的長(zhǎng)度。這可以通過(guò)前端或后端驗(yàn)證來(lái)實(shí)現(xiàn),避免用戶輸入過(guò)長(zhǎng)的文本。
2、提供字符計(jì)數(shù)器。
在文本輸入框旁邊或下方顯示一個(gè)字符計(jì)數(shù)器,實(shí)時(shí)顯示用戶已輸入的字符數(shù)和允許的最大字符數(shù)。這可以幫助用戶了解他們輸入的文本長(zhǎng)度,并且知道何時(shí)達(dá)到了極限值。
3、友好的錯(cuò)誤提示。
當(dāng)用戶輸入超過(guò)最大字符數(shù)限制時(shí),及時(shí)向用戶提供友好的錯(cuò)誤提示,說(shuō)明他們已經(jīng)超出了文本長(zhǎng)度限制,并且指導(dǎo)他們?nèi)绾芜M(jìn)行修正。
4、自動(dòng)修剪或截?cái)辔谋尽?/div>
對(duì)于一些 UI 元素,可以自動(dòng)修剪或截?cái)喑鱿拗频奈谋?。例如,可以在顯示文本的區(qū)域中截?cái)喑鱿拗频淖址⒃谀┪蔡砑邮÷蕴?hào)。
5、動(dòng)態(tài)調(diào)整輸入框大小。
對(duì)于可調(diào)整大小的文本輸入框,可以根據(jù)用戶輸入的文本長(zhǎng)度動(dòng)態(tài)調(diào)整輸入框的大小,以確保用戶能夠看到他們輸入的所有內(nèi)容。
6、提供預(yù)覽功能。
在用戶輸入長(zhǎng)文本時(shí),提供一個(gè)預(yù)覽功能,讓用戶可以在輸入之前查看他們輸入的文本在 UI 中的最終顯示效果,從而避免超過(guò)極限值。
7、
多行文本框。
如果用戶需要輸入大段文本,可以提供一個(gè)多行文本輸入框,允許用戶自由輸入任意長(zhǎng)度的文本,但也需要在適當(dāng)?shù)臅r(shí)候提醒用戶輸入的文本長(zhǎng)度限制。
綜上所述,處理文本極限值需要綜合考慮用戶體驗(yàn)和界面美觀性,通過(guò)設(shè)置限制、提供實(shí)時(shí)反饋、自動(dòng)修剪或截?cái)辔谋镜确绞?,以確保用戶能夠方便地輸入和管理文本內(nèi)容。
為極端情況而設(shè)計(jì)
 
 
二、空狀態(tài)
處理空狀態(tài)是指在應(yīng)用程序或網(wǎng)站中,當(dāng)沒(méi)有數(shù)據(jù)或內(nèi)容可顯示時(shí)所呈現(xiàn)的界面狀態(tài)。這種情況下,用戶可能會(huì)感到困惑或失望,因此設(shè)計(jì)空狀態(tài)界面非常重要,以提供清晰的信息和引導(dǎo)。
以下是常見(jiàn)的空狀態(tài)使用場(chǎng)景以及處理建議:
1、
用戶主動(dòng)觸發(fā)
主要分為「內(nèi)容被清空/已完成」和「搜索結(jié)果為空」兩種情況。
1.1、內(nèi)容被清空/已完成
這種空狀態(tài)是用戶自主刪除所有數(shù)據(jù)或完成了所有任務(wù)的情況。一般此類(lèi)場(chǎng)景不需要進(jìn)行操作引導(dǎo),只需要用「插圖+正文」或「僅正文」的形式說(shuō)明情況即可
為極端情況而設(shè)計(jì)
 
 
1.2、搜索結(jié)果為空
當(dāng)用戶搜索關(guān)鍵字后沒(méi)有對(duì)應(yīng)的結(jié)果顯示時(shí)出現(xiàn)的空狀態(tài)。此場(chǎng)景需要用「插圖+正文」的形式說(shuō)明情況,并視情況增加行動(dòng)連接引導(dǎo)用戶進(jìn)行下一步操作,例如:添加、查看等
友好的提示信息: 當(dāng)搜索結(jié)果為空時(shí),向用戶顯示友好的提示信息,說(shuō)明搜索未返回任何結(jié)果,并且可能提供一些建議或建議用戶修改搜索條件。
相關(guān)建議或推薦: 在搜索結(jié)果為空時(shí),向用戶提供一些相關(guān)的建議或推薦,以幫助他們找到他們感興趣的內(nèi)容。這可以是熱門(mén)搜索、相關(guān)主題、或類(lèi)似內(nèi)容的推薦。
為極端情況而設(shè)計(jì)
 
 
2、
用戶被動(dòng)接受
主要分為「暫無(wú)消息/內(nèi)容/權(quán)限」、「初始狀態(tài)(新手指引)」兩種情況。
2.1、
暫無(wú)內(nèi)容/消息/權(quán)限
這種情況表示頁(yè)面暫時(shí)無(wú)數(shù)據(jù)的狀態(tài),一般情況下使用「插圖+正文」的形式,必要時(shí)可增加行動(dòng)連接來(lái)引導(dǎo)用戶進(jìn)行下一步操作
為極端情況而設(shè)計(jì)
 
 
為極端情況而設(shè)計(jì)
 
 
2.2、
初始狀態(tài)(新手指引)
對(duì)于首次使用復(fù)雜流程功能的用戶來(lái)說(shuō),一個(gè)新手指引可以幫助用戶快速上手,也可以填充原本為空的界面。
除了空狀態(tài)之外,向用戶提供有關(guān)如何開(kāi)始的說(shuō)明非常有幫助。
教程是讓人們輕松了解應(yīng)用程序功能的好方法。在普通用戶界面中使用微妙的動(dòng)畫(huà)或提示可以讓用戶開(kāi)始執(zhí)行一些關(guān)鍵任務(wù)。
最好的教程是不引人注目的。與其展示超長(zhǎng)的視頻或幻燈片說(shuō)明,不如將提示置于體驗(yàn)本身的背景中,這可能非常有效。這有助于用戶邊做邊學(xué),而不是被動(dòng)地接受大量信息。
僅在必要時(shí)才應(yīng)使用教程。如果您的界面是不言自明的,則可能不需要它。是否包含教程是您需要考慮的設(shè)計(jì)因素。另一種方法是引導(dǎo)用戶直接進(jìn)入他們的第一個(gè)任務(wù),讓他們“邊做邊學(xué)”。
為極端情況而設(shè)計(jì)
 
 
多鄰國(guó)的這個(gè)很棒的示例展示了如何將教程構(gòu)建到應(yīng)用程序體驗(yàn)中。它有助于指導(dǎo)用戶設(shè)置應(yīng)用程序,并直接進(jìn)入使用過(guò)程。
 
三、
用戶和系統(tǒng)的錯(cuò)誤
1、用戶操作錯(cuò)誤
每當(dāng)發(fā)生某種用戶輸入時(shí),通常都有可能出現(xiàn)錯(cuò)誤??紤]一下輸入長(zhǎng)表單的時(shí)候。這些是潛在用戶錯(cuò)誤的雷區(qū)。
即使我們盡力讓事情變得直觀,也很難完全消除發(fā)生錯(cuò)誤的可能性,這些都需要在設(shè)計(jì)階段進(jìn)行規(guī)劃。
有許多不同類(lèi)型的錯(cuò)誤值得我們思考。
驗(yàn)證。
用戶沒(méi)有按照系統(tǒng)期望的方式輸入信息。
提交。
出現(xiàn)的問(wèn)題不是用戶的錯(cuò),但我們需要讓他們知道。
內(nèi)容。
用戶請(qǐng)求了我們無(wú)法提供的東西。
在設(shè)計(jì)產(chǎn)品時(shí),您需要考慮可能發(fā)生錯(cuò)誤的每種情況。然后,您應(yīng)該為其設(shè)計(jì)一個(gè)狀態(tài),以確保系統(tǒng)正常處理該錯(cuò)誤。
這可能很耗時(shí),但正是對(duì)細(xì)節(jié)的關(guān)注才造就了設(shè)計(jì)精良的產(chǎn)品。
這里有一些不同的事情需要考慮......
錯(cuò)誤是如何出現(xiàn)的。
我們應(yīng)該使用動(dòng)畫(huà)或?qū)Ρ榷葋?lái)吸引用戶的注意力。
樣式和位置。
錯(cuò)誤通知應(yīng)直觀地鏈接到問(wèn)題發(fā)生的位置。
語(yǔ)言。
錯(cuò)誤應(yīng)該以清晰、用戶友好且品牌化的方式編寫(xiě)。不惜一切代價(jià)避免“技術(shù)演講”。
明確的解決方案。
在通知用戶錯(cuò)誤之后,我們還應(yīng)該提及解決方案。這可能是一條說(shuō)明,或者是其他可能對(duì)他們有幫助的內(nèi)容的鏈接。
為極端情況而設(shè)計(jì)
 
 
輸入錯(cuò)誤的密碼后,該字段會(huì)左右輕微晃動(dòng)(就像有人搖頭一樣)。這會(huì)引起用戶對(duì)問(wèn)題的注意,但不會(huì)顯得突兀
2、系統(tǒng)錯(cuò)誤
服務(wù)器異常、無(wú)訪問(wèn)權(quán)限、 網(wǎng)絡(luò)異常(斷網(wǎng)、網(wǎng)速過(guò)慢、加載失敗、網(wǎng)絡(luò)連接失?。?、瀏覽器異常、數(shù)據(jù)出錯(cuò);
異常狀態(tài)用來(lái)提醒用戶發(fā)生了未指定的系統(tǒng)錯(cuò)誤,需要用戶了解此情況,并且提供下一步引導(dǎo)或解決建議,為用戶解釋異常狀態(tài)的原因,解決困惑,提供解決辦法,引導(dǎo)用戶繼續(xù)產(chǎn)品流程而不是關(guān)閉窗口離開(kāi)
為極端情況而設(shè)計(jì)
 
 
四、
頁(yè)面內(nèi)容過(guò)多時(shí)的加載方式
還有一種情況就是頁(yè)面內(nèi)容過(guò)多的情況,這里我們不考慮頁(yè)面展示只考慮進(jìn)入頁(yè)面的加載,大家平時(shí)估計(jì)遇到過(guò)點(diǎn)開(kāi)一個(gè)列表頁(yè)面,就一直在觀看“菊花轉(zhuǎn)”(頁(yè)面內(nèi)容加載狀態(tài)),等的時(shí)間如果超過(guò)5秒可能就會(huì)產(chǎn)生焦慮了,再多點(diǎn)時(shí)間直接就和產(chǎn)品說(shuō)拜拜了,那么這種極端情況一般怎么處理呢?
1、
骨架屏
骨架屏是一個(gè)可選方案,也就是說(shuō)不一定要有,有了會(huì)更好。
骨架屏適合頁(yè)面布局固定的頁(yè)面,目前很多APP都會(huì)使用骨架屏,常用的頁(yè)面有列表頁(yè)、詳情頁(yè)等。
一般骨架屏由開(kāi)發(fā)寫(xiě),如果我們要做骨架屏,需要定義好骨架屏的樣式,讓開(kāi)發(fā)照著寫(xiě),骨架屏實(shí)現(xiàn)難度我也跟開(kāi)發(fā)同學(xué)咨詢過(guò),很簡(jiǎn)單,所以可以放心大膽用。
2、
占位圖
占位圖應(yīng)該是許多新人容易忽視的地方,提及占位圖就不得不提到加載,為了減少用戶感知加載時(shí)間,應(yīng)用加載一般會(huì)先加載文字后加載圖片,可以緩解用戶等待的焦慮情緒。
如果這么做就涉及到一個(gè)問(wèn)題:原本放圖片的位置拿什么來(lái)占位?
所以就出現(xiàn)了占位圖這個(gè)東西,當(dāng)圖片還沒(méi)有加載出來(lái)的時(shí)候,使用一個(gè)占位圖進(jìn)行占位,讓用戶知道這里是有東西的
占位圖一般有帶logo的圖片和純色圖,如果是加載視頻,一般還會(huì)在圖片上做一個(gè)視頻的圖標(biāo),讓用戶知道這里是視頻。
為極端情況而設(shè)計(jì)
 
 
五、頁(yè)面上滑處理
當(dāng)一個(gè)頁(yè)面向上滾動(dòng)時(shí),頁(yè)面的元素會(huì)發(fā)生什么變化,場(chǎng)景的變化有導(dǎo)航欄置頂、標(biāo)簽欄置頂?shù)?,這些都是我們需要提前定義好的。
處理頁(yè)面上滑的交互是指當(dāng)用戶向上滑動(dòng)頁(yè)面時(shí)所觸發(fā)的交互效果或行為。這種交互可以增強(qiáng)用戶體驗(yàn),并使用戶更輕松地瀏覽頁(yè)面內(nèi)容。以下是一些處理頁(yè)面上滑交互的方法:
1、導(dǎo)航欄
1.1、固定導(dǎo)航欄
即將導(dǎo)航欄固定在頂部,其余內(nèi)容上滑,我個(gè)人比較傾向于這種方式,當(dāng)頁(yè)面比較長(zhǎng)的時(shí)候可以讓用戶隨時(shí)可以看到導(dǎo)航欄,不僅僅是給習(xí)慣了導(dǎo)航欄的用戶增添一份安全感,更是因?yàn)楫?dāng)導(dǎo)航欄有功能入口(比如設(shè)置)的時(shí)候,用戶可以隨時(shí)看到并隨時(shí)點(diǎn)擊
1.2、內(nèi)容遷移
這就是一種內(nèi)容遷移到導(dǎo)航欄區(qū)域的情況,這種交互方式不僅能提升用戶的操作體驗(yàn),也能提升產(chǎn)品的數(shù)據(jù),比如當(dāng)關(guān)注入口曝光更多,點(diǎn)擊關(guān)注的概率就會(huì)有一定上升。
為極端情況而設(shè)計(jì)
 
 
2、篩選欄
篩選欄的固定方式也極為常見(jiàn),很多地方為了用戶可以方便做切換,都會(huì)把篩選欄固定在頂部,那么這時(shí)候就需要我們對(duì)交互進(jìn)行詳細(xì)的定義。
2.1、第一種是篩選欄本身就在頂部
當(dāng)篩選欄在頁(yè)面頂部時(shí):
如果此時(shí)我們需要讓篩選欄固定在頂部,那么可以這么說(shuō)明:
頁(yè)面上滑時(shí),導(dǎo)航欄和篩選欄固定在頂部,其余內(nèi)容向上滑動(dòng)。
2.2、第二種是篩選欄在頁(yè)面中間
這時(shí)候有兩種情況,一種是篩選欄隨頁(yè)面一起上滑不做固定,另一種是篩選欄需要做固定。具體使用哪種需要視具體場(chǎng)景來(lái)定,下面說(shuō)一下當(dāng)篩選欄需要固定時(shí)我們?cè)撊绾蚊枋鼋换ァ?/div>
我們可以以篩選欄為基準(zhǔn)
① 當(dāng)篩選欄位置未到達(dá)頂部時(shí)
頁(yè)面整體上滑(一般情況下導(dǎo)航欄當(dāng)然始終固定在頂部)
② 當(dāng)篩選欄的位置到達(dá)導(dǎo)航欄下方時(shí)
篩選欄固定,篩選欄下方內(nèi)容繼續(xù)向上滑動(dòng)
為極端情況而設(shè)計(jì)
 
 
如何找到極端情況
有些設(shè)計(jì)師認(rèn)為,極端情況往往是意料之外的情況,但是實(shí)際上,絕大多數(shù)的極端情況是可以提前預(yù)測(cè)的。有兩種方法可以幫你找到極端情況:
1、
設(shè)計(jì)評(píng)審。
為了創(chuàng)造出色的設(shè)計(jì),你應(yīng)當(dāng)主動(dòng)尋找極端情況。設(shè)計(jì)評(píng)審是一個(gè)非常有用的環(huán)節(jié),它可以幫助產(chǎn)品團(tuán)隊(duì)找到許多潛在的優(yōu)勢(shì)案例。在產(chǎn)品設(shè)計(jì)的早期,就應(yīng)該進(jìn)行設(shè)計(jì)評(píng)審。為了獲得更好的結(jié)果,最好邀請(qǐng)開(kāi)發(fā)人員和其他的團(tuán)隊(duì)成員參與此類(lèi)會(huì)議。
2、
使用真實(shí)用戶測(cè)試。
盡早在其他的團(tuán)隊(duì)成員的幫助下尋找極端情況是一種很好的辦法,但是它不能保證你會(huì)發(fā)現(xiàn)所有的問(wèn)題來(lái)源。只有在真正的用戶進(jìn)行測(cè)試的時(shí)候,才能幫你了解用戶使用你的產(chǎn)品的時(shí)候所面臨的問(wèn)題。同時(shí),值得一提的是,嚴(yán)格且有節(jié)制的可用性測(cè)試,用戶可能會(huì)因?yàn)榻?jīng)常被指示要做什么而很難暴露極端情況的存在。所以,最好創(chuàng)建一個(gè)讓用戶可以嘗試和探索的體系,在靈活的測(cè)試和充足的時(shí)間下,更容易找到問(wèn)題。
 
結(jié)語(yǔ)
為各種可能發(fā)生的情況進(jìn)行設(shè)計(jì)
好的設(shè)計(jì)就是注重細(xì)節(jié)。
正是這種針對(duì)每種場(chǎng)景進(jìn)行設(shè)計(jì)的承諾,才使出色的體驗(yàn)與普通體驗(yàn)區(qū)分開(kāi)來(lái)。作為設(shè)計(jì)師,你有責(zé)任針對(duì)這些邊緣情況進(jìn)行規(guī)劃。無(wú)論您是否為它們進(jìn)行設(shè)計(jì),它們都會(huì)發(fā)生,所以最好做好準(zhǔn)備!
以上僅僅舉了幾個(gè)極端情況的例子,實(shí)際上還會(huì)有很多,若想盡量覆蓋全極端情況,在設(shè)計(jì)時(shí)可以多多思考,將自己切換成“找茬兒模式”,也可以尋求QA同學(xué)的幫助,因?yàn)樗麄冊(cè)趯?xiě)用例時(shí)會(huì)考慮的更多。即使努力去想可能發(fā)生的極端情況,但是有些極端情況還是可能會(huì)遺漏,到真正遇到了才知道,不過(guò)其實(shí)也說(shuō)明了那些想不到的極端情況可能發(fā)生的概率更小。
總之,有些極端情況一定要處理,盡量做到給用戶一個(gè)好的體驗(yàn),但是有些情況其實(shí)并不需要投入過(guò)多精力去思考該如何提升體驗(yàn),因?yàn)楸旧砭筒皇钦5漠a(chǎn)品使用場(chǎng)景,只要在發(fā)生的時(shí)候保證產(chǎn)品可用性即可,因?yàn)檫€有更重要的產(chǎn)品主線體驗(yàn)需要不斷去迭代提升。
 


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

藍(lán)藍(lán)設(shè)計(jì)(www.b186.net )是一家專(zhuān)注而深入的界面設(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ā)

日歷

鏈接

個(gè)人資料

存檔