亚洲欧美香蕉在线日韩精选_www在线观看美女视频_娇妻的呻吟大团结内裤奇缘_免费a漫禁漫h漫在线

首頁(yè)

用戶(hù)故事——UI設(shè)計(jì)的基礎(chǔ)

藍(lán)藍(lán)設(shè)計(jì)的小編

這篇文章很好,提供了一種“以用戶(hù)為中心”把自己和項(xiàng)目組成員隨時(shí)假定為一個(gè)用戶(hù)的身份,去思考,提出一系列問(wèn)題,把這些問(wèn)題編號(hào),去一一解決,注重用戶(hù)體驗(yàn),以此為基本框架,嚴(yán)格遵守,一旦設(shè)立不增加臨時(shí)的多余的功能,不把沒(méi)有用戶(hù)故事的界面元素放在界面上,保證了精簡(jiǎn)的內(nèi)容圍繞確立的框架中,井井有條。這篇文章值得看十遍。

UI設(shè)計(jì)原則,看看,有沒(méi)有你知道的!

藍(lán)藍(lán)設(shè)計(jì)的小編

(圖片來(lái)源于圖蟲(chóng)創(chuàng)意)

1、了解你的用戶(hù)

因?yàn)槟愕挠脩?hù)是最終評(píng)判用戶(hù)界面好壞的人,所以用戶(hù)即是你的終極目標(biāo),不了解用戶(hù)需求,即使你的界面做得再好,也不是用戶(hù)想要的產(chǎn)品。了解用戶(hù)的需求是你開(kāi)始做界面的前提,試著沉下心來(lái)仔細(xì)觀察用戶(hù)的喜好,并了解他們的技能水平和體驗(yàn)觀察他們?cè)诮缑嬷腥绾尾僮鳌2灰詰儆谧分鹪O(shè)計(jì)趨勢(shì)的更新,或是不斷添加新的功能,始終記住,首要的任務(wù)是關(guān)注你的用戶(hù),這樣才能創(chuàng)造出一個(gè)能讓用戶(hù)達(dá)成目標(biāo)的界面。

2、重視UI模型

在軟件中,用戶(hù)的大部分時(shí)間都消耗在界面操作中,比如數(shù)據(jù)錄入、數(shù)據(jù)修改、數(shù)據(jù)查閱等等,這點(diǎn)與瀏覽為主的網(wǎng)站類(lèi)頁(yè)面的用戶(hù)操作是完全不同的,所以我們無(wú)需畫(huà)蛇添足。用戶(hù)希望在新創(chuàng)造的界面中看到那些已有的、相似功能的或遵循基本操作方式的軟件界面,即可利用已成慣例的UI模型,使用戶(hù)產(chǎn)生親切感。

3、保持一致

用戶(hù)需要知道一旦他們學(xué)會(huì)做某項(xiàng)操作,那么下次也同樣可行。語(yǔ)言、布局和設(shè)計(jì)是需要保持一致性的幾個(gè)界面元素。一致性的界面可以讓用戶(hù)對(duì)于如何操作有更好的理解,從而提升效率。

4、清晰的視覺(jué)層次

設(shè)計(jì)時(shí),要讓用戶(hù)把注意力放在最重要的地方。每一個(gè)元素的尺寸、顏色還有位置,它們?yōu)槔斫饨缑婀餐该髁说缆贰G逦膶蛹?jí)關(guān)系將對(duì)降低外觀的復(fù)雜性起到重要作用。

(圖片來(lái)源于圖蟲(chóng)創(chuàng)意)

5、提供反饋

界面要始終保持和用戶(hù)的溝通,不管是他們的行為對(duì)錯(cuò)與否。隨時(shí)提示用戶(hù)的行為:狀態(tài)更改、出現(xiàn)錯(cuò)誤或者異常信息。視覺(jué)提示或是簡(jiǎn)單文字提醒都能告訴用戶(hù),他們的行為是否能夠達(dá)到預(yù)期的結(jié)果。

6、容錯(cuò)機(jī)制

無(wú)論你的設(shè)計(jì)多么的清晰明了,用戶(hù)都會(huì)犯錯(cuò)。你的界面應(yīng)當(dāng)允許并要為用戶(hù)提供可以撤銷(xiāo)行為的方式,并且對(duì)五花八門(mén)的輸入數(shù)據(jù)盡量寬容(沒(méi)人愿意只是因?yàn)樘铄e(cuò)了生日的格式而重頭再來(lái))。同樣,如果用戶(hù)的行為引起了一個(gè)錯(cuò)誤,在恰當(dāng)?shù)臅r(shí)機(jī)運(yùn)用信息顯示什么行為是錯(cuò)誤的,并確保用戶(hù)明白如何防止這種錯(cuò)誤的再次發(fā)生。

7、鼓勵(lì)用戶(hù)

一旦用戶(hù)在完成了關(guān)鍵操作,可以通過(guò)彈出對(duì)話(huà)框等方式及時(shí)告知用戶(hù)。值得注意的是,把一個(gè)復(fù)雜的流程任務(wù)分解為若干簡(jiǎn)單步驟,將會(huì)更顯繁復(fù)和讓人精力分散。所以無(wú)論正在執(zhí)行的任務(wù)有多么復(fù)雜和漫長(zhǎng),在界面上要保持流程的不間斷性。

8、語(yǔ)言有親和力

所有的界面或多或少都有文字在其上,讓文稿盡量口語(yǔ)化,而不是華美辭藻的堆砌。為行為提供清晰、簡(jiǎn)明的標(biāo)簽,保持簡(jiǎn)樸的文字?jǐn)⑹觥!?

9、保持簡(jiǎn)潔

最好的用戶(hù)界面就是沒(méi)有界面。優(yōu)秀的軟件界面中,你看不到華而不實(shí)的UI修飾,更看不到那些用不到的設(shè)計(jì)元素。所以當(dāng)想著是否要在界面上加一個(gè)新功能或是新元素的時(shí)候,再思考一下:用戶(hù)或者界面中真的需要這些么?為什么用戶(hù)想要在這里當(dāng)這個(gè)小巧的動(dòng)態(tài)圖標(biāo)?是否只是因?yàn)槌鲇谧晕蚁埠煤晚?yè)面的漂亮而去添加這些元素??jī)?yōu)秀的UI工程師做出來(lái)的軟件界面不會(huì)十分華麗,界面中沒(méi)有任何分散用戶(hù)注意力打攪用戶(hù)操作的元素。甚至應(yīng)該達(dá)到在用戶(hù)使用系統(tǒng)的時(shí)候完全注意不到頁(yè)面和操作復(fù)雜的問(wèn)題,一切都應(yīng)該是順理成章的。


(圖片來(lái)源于圖蟲(chóng)創(chuàng)意)

文章來(lái)源:快資訊 作者:德方科技


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

                                                            微信圖片_20210513163802.png

 

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)axecq.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)




精進(jìn)自己、正面思考、調(diào)整情緒的三個(gè)小方法

藍(lán)藍(lán)設(shè)計(jì)的小編

 西藏有一個(gè)六時(shí)書(shū)修行方法,確定要改進(jìn)的一兩個(gè)弱點(diǎn)(比如懶惰,拖延),每天分六個(gè)時(shí)辰反省自己(間隔兩三個(gè)小時(shí)的樣子),在每個(gè)時(shí)間段有好的,不好的念頭或者行為都記下來(lái)反省總結(jié),以便在下一個(gè)時(shí)間去調(diào)整)和鼓勵(lì)自己。這個(gè)弱點(diǎn)改的差不多了,就繼續(xù)下一個(gè)弱點(diǎn)作為目標(biāo)去改正。讀富蘭克林的自傳,他基本上也是用這種方法,但沒(méi)有分每天六次這么細(xì)。

臨摹的目的不盡相同

藍(lán)藍(lán)設(shè)計(jì)的小編

不同的階段,臨摹的目的不盡相同。一般來(lái)說(shuō),前期臨摹更多的是練習(xí)軟件、技法,后期練習(xí)別人的風(fēng)格表達(dá),綜合運(yùn)用。所以,我把臨摹分為技法臨摹、半原創(chuàng)到原創(chuàng) 3 個(gè)階段,每一個(gè)階段沒(méi)有絕對(duì)的界限,都是在積累創(chuàng)意,完全是可以用到自己的項(xiàng)目中去的。

今天會(huì)分享一個(gè)我當(dāng)年做臨摹練習(xí)并融入實(shí)際項(xiàng)目中的小案例。

臨摹

大概是在 15 年左右,在網(wǎng)上看到錘子設(shè)計(jì)師設(shè)計(jì)的一個(gè)圖標(biāo),覺(jué)得非常驚艷,當(dāng)時(shí)就想把它臨摹下來(lái),這是當(dāng)時(shí)臨摹的一個(gè)效果。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

△ 原作

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

△ 這是我當(dāng)時(shí)臨摹的圖

我在臨摹這張圖的時(shí)候,想達(dá)到的目標(biāo)是能根據(jù)自己的 logo 色及文字,做一個(gè)半原創(chuàng)的設(shè)計(jì)。

然后實(shí)際練習(xí)中,不斷觀察原作發(fā)現(xiàn)有一些細(xì)節(jié)值得學(xué)習(xí):

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

  1. 圖標(biāo)分為水上和水下,2 個(gè)層級(jí),在水下的圖形因?yàn)檎凵涞年P(guān)系,會(huì)發(fā)生扭曲
  2. 水下會(huì)有深淺的顏色變化
  3. 真實(shí)的水會(huì)流動(dòng),所以在水下會(huì)畫(huà)出帶明暗細(xì)節(jié)的水紋線(xiàn)條
  4. 水下會(huì)有氣泡,且氣泡的產(chǎn)生符合真實(shí)場(chǎng)景,氣泡的大小由小變大
  5. 水面的邊緣因?yàn)橥腹舛a(chǎn)生邊緣反射
  6. 投影因?yàn)榧t色盒子的影響,會(huì)偏紅色色相,并且有近實(shí)遠(yuǎn)虛的關(guān)系
  7. 盒子的邊緣會(huì)有 1px 的高光和反光
  8. 背景為了增加圖標(biāo)的展示效果,也做了單獨(dú)的設(shè)計(jì),把四周壓暗,然后加上雜色,使得整體的質(zhì)感更加強(qiáng)烈

當(dāng)時(shí),對(duì)我來(lái)說(shuō),在練習(xí)的過(guò)程中有一個(gè)難點(diǎn)就是關(guān)于第 3 個(gè)細(xì)節(jié)水的紋理執(zhí)行有些難度,因?yàn)槠渲邪舜旨?xì)變化、虛實(shí)變化、明暗變化等等,單純的用圖層樣式或者矢量去畫(huà)的話(huà),難度都比較大。這個(gè)細(xì)節(jié)當(dāng)時(shí)耗費(fèi)了我不少時(shí)間,后面突然想到其實(shí)也可以用合成的辦法來(lái)實(shí)現(xiàn),然后我去找了真實(shí)水紋的圖片進(jìn)行疊加,很快就搞定了。所以,只要能達(dá)到效果,不能太過(guò)于局限某一種思路。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

分析并完成這些細(xì)節(jié)后,就是你在做這個(gè)練習(xí)中學(xué)到的點(diǎn),嘗試把它們學(xué)以致用。

運(yùn)用

記得當(dāng)時(shí)在 360 時(shí)需要設(shè)計(jì)一套關(guān)于摩洛哥藍(lán)色小鎮(zhèn)的官方定制版主題圖標(biāo)。從搜集的當(dāng)?shù)卮硇缘膱D片中發(fā)現(xiàn),多彩顏料是當(dāng)?shù)氐囊淮筇卣鳎詻Q定以染料為關(guān)鍵詞去畫(huà)一個(gè)圖標(biāo),又因?yàn)轭伭媳旧碜詭Ф嗖实奶攸c(diǎn),所以以它為主題圖標(biāo)就很合適了。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

然后在思考這個(gè)圖標(biāo)的時(shí)候,首先會(huì)應(yīng)用參考圖中的配色,并結(jié)合染缸的造型做出了第一版的效果。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

這個(gè)效果雖然是表達(dá)了那個(gè)意思,但缺乏亮點(diǎn),聯(lián)想之前練習(xí)過(guò)水的技法表達(dá)(臨摹中第 3 點(diǎn)細(xì)節(jié)運(yùn)用),正好可以利用水的紋理做下強(qiáng)化,這樣就優(yōu)化出了第二版。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

嗯,看起來(lái)感覺(jué)有了一些特點(diǎn),但感覺(jué)缺乏細(xì)節(jié),接著思考水除了有紋理高光,應(yīng)該還會(huì)有邊緣高光(結(jié)合臨摹中第 5 點(diǎn)細(xì)節(jié)),所以在邊緣嘗試加了高光,增加體積感,做出水要漫出來(lái)的感覺(jué)。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

如果只有這一層高光的話(huà),細(xì)節(jié)度感覺(jué)還是不大夠,在之前的文章《如何從優(yōu)秀作品中偷師,用一個(gè)游戲案例教你思路》我有分享到在 UI 大佬的作品中能學(xué)到他們對(duì)于 1px 高光的使用(臨摹作用中的第 7 點(diǎn)),這里因?yàn)槭且后w的材質(zhì)表現(xiàn),所以增加一個(gè)高光點(diǎn)增加水的通透感。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

到目前為止,似乎看起來(lái)已經(jīng)差不多了,但考慮到現(xiàn)實(shí)世界中,溢出的彩色液體在透光性很好的情況下,也會(huì)對(duì)周?chē)h(huán)境產(chǎn)生影響,所以我在顏料設(shè)計(jì)的四周,配上對(duì)應(yīng)的四種顏色的模糊投影(臨摹練習(xí)中的第 6 點(diǎn))。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

在思考下,在臨摹的圖標(biāo)中為了使得圖標(biāo)更加自然,作品中其實(shí)結(jié)合了很多真實(shí)世界中會(huì)發(fā)生的情況,比如水的折射,氣泡的比例,深淺等等,那對(duì)于染料來(lái)說(shuō),會(huì)有怎樣的真實(shí)情況發(fā)生呢?我當(dāng)時(shí)想到一點(diǎn)是,染料在用的過(guò)程中其實(shí)很容易灑出來(lái),所以圖標(biāo)背板上現(xiàn)在太過(guò)于干凈了,增加一些細(xì)節(jié)能夠使得背板能夠跟主體物產(chǎn)生關(guān)聯(lián),也更加自然。嗯,又是一個(gè)小細(xì)節(jié)。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

最后,我們對(duì)比下第一版和最終版的效果,細(xì)節(jié)確實(shí)豐富了很多。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

一張動(dòng)態(tài)圖可以更加清晰的看到變化。

日常臨摹如何用到項(xiàng)目里去?這個(gè)案例說(shuō)明白!

總結(jié)

這次圖標(biāo)的優(yōu)化過(guò)程,我覺(jué)得有幾個(gè)要點(diǎn)對(duì)我來(lái)說(shuō)印象深刻的:

圖標(biāo)的風(fēng)格可以是扁平的,但想要增加自然舒服的細(xì)節(jié),一樣可以像畫(huà)寫(xiě)實(shí)風(fēng)格那樣仿照現(xiàn)實(shí)。你需要留心觀察這個(gè)世界,就算是一張照片中也能有非常多可以利用的細(xì)節(jié)。

碰到難做出來(lái)的細(xì)節(jié),多想想有沒(méi)有更效率的辦法。比如在做水紋理的時(shí)候,一開(kāi)始就想著完全靠鼠繪畫(huà)出來(lái),結(jié)果效果一直不大好,然后利用 PS 合成的方法,很快就能把效果做出來(lái)。

對(duì)于圖標(biāo)來(lái)說(shuō),要注意其整體性。比如圖標(biāo)中的主體物不要跟背景脫離,不要讓圖標(biāo)背板只是作為一個(gè)容器,而要讓背板也成為圖標(biāo)本身的一部分,這樣圖標(biāo)的整體性會(huì)更好。

臨摹的過(guò)程中,一定要多分析,多記錄自己覺(jué)得是細(xì)節(jié)的點(diǎn)。每一次記錄,都可能是將來(lái)設(shè)計(jì)時(shí)提升細(xì)節(jié)的靈感來(lái)源。

以上內(nèi)容只是我在日常練習(xí)中應(yīng)用到實(shí)際項(xiàng)目中的一個(gè)小案例,其實(shí)還有非常多的靈感想法都來(lái)自于你平時(shí)做的練習(xí),關(guān)鍵是要多動(dòng)手,多總結(jié),才能增強(qiáng)自己對(duì)細(xì)節(jié)的把握能力。





文章來(lái)源:優(yōu)設(shè)網(wǎng)     作者:彩云譯設(shè)計(jì)



藍(lán)藍(lán)設(shè)計(jì)axecq.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


2021年流行的十大用戶(hù)體驗(yàn)設(shè)計(jì)趨勢(shì)

藍(lán)藍(lán)設(shè)計(jì)的小編

2020年結(jié)束,此時(shí)正是一個(gè)很好的時(shí)間節(jié)點(diǎn),我們共同探尋2021年即將擁有怎樣的未來(lái)。本文將帶你發(fā)現(xiàn),即將在2021年流行的十種移動(dòng)用戶(hù)體驗(yàn)設(shè)計(jì)趨勢(shì)。

如何找到一家好的高端網(wǎng)站設(shè)計(jì)公司?

藍(lán)藍(lán)設(shè)計(jì)的小編

       看到知乎上的一個(gè)問(wèn)題:如何找到一家好的高端網(wǎng)站設(shè)計(jì)公司?

       把回答的內(nèi)容也轉(zhuǎn)過(guò)來(lái)記錄一下。


       首先回答:何為高端?



       高端與低端是對(duì)應(yīng)的,目前網(wǎng)站設(shè)計(jì),中低端基本是用模板改改,相對(duì)價(jià)格低,有一些小型公司或不依靠網(wǎng)站運(yùn)營(yíng)收入的公司,“有個(gè)網(wǎng)站就好”,所以可以用這種低投入,內(nèi)容有就行的網(wǎng)站建設(shè)公司,特點(diǎn)是馬上就能用,三五天把內(nèi)容發(fā)布進(jìn)去就可以。備案可能需要一定時(shí)間。



       高端設(shè)計(jì)公司,一般是量身定做,為企業(yè)做網(wǎng)站策劃、分析,按照用戶(hù)研究、網(wǎng)站建站的目的來(lái)進(jìn)行網(wǎng)站的定制欄目頁(yè)的設(shè)計(jì)。做競(jìng)品分析、研究對(duì)方的優(yōu)缺點(diǎn),設(shè)計(jì)的色系和企業(yè)標(biāo)準(zhǔn)色、情感表達(dá)、人物場(chǎng)景、用戶(hù)體驗(yàn)思維,越深入,思考越成熟,做的網(wǎng)站品質(zhì)越有保障。所以需要的時(shí)間、精力、投入相對(duì)多。



       因?yàn)橥度胂鄬?duì)多,所以經(jīng)營(yíng)業(yè)績(jī)好的企業(yè)、集團(tuán)公司、營(yíng)銷(xiāo)類(lèi)大型網(wǎng)站來(lái)定制的比較多。



       我們公司“北京藍(lán)藍(lán)設(shè)計(jì)”就是為定制的高端企業(yè)用戶(hù)、政府網(wǎng)站、軟件公司來(lái)服務(wù)的。我們挺喜歡要求高的客戶(hù),這樣能體現(xiàn)出專(zhuān)業(yè)設(shè)計(jì)的水平,這也是我們和其它建站公司區(qū)別開(kāi)來(lái)的地方。



       我們主要是給大型軟件公司平臺(tái)、系統(tǒng)做UE、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì),用戶(hù)體驗(yàn)優(yōu)化,這個(gè),比網(wǎng)站設(shè)計(jì)更難,更專(zhuān)業(yè)。 往往一個(gè)公司的核心產(chǎn)品,值得把精力金錢(qián)投入到上面,產(chǎn)出最大的回報(bào)。近年來(lái),除了做軟件UI,大屏大數(shù)據(jù)可視化項(xiàng)目外,我們也擴(kuò)展了“愿意把公司網(wǎng)站做成核 心產(chǎn)品”這樣的公司成為合作伙伴,更好的為客戶(hù)提供全方位的服務(wù)。



       一旦成為我們的客戶(hù),設(shè)計(jì)無(wú)憂(yōu)。


       我們一定會(huì)把該做的事做好,并提供超值服務(wù)和額外附加值的。


藍(lán)藍(lán)設(shè)計(jì)axecq.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)



藍(lán)藍(lán)設(shè)計(jì)隨筆:ui用戶(hù)界面中的表格設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

作者:藍(lán)藍(lán)


表格,是一種最常見(jiàn)的信息組織整理手段,常用于信息收集、展示、數(shù)據(jù)分析、歸納整理。

      UI軟件設(shè)計(jì)中最常用、最基本的是表格的設(shè)計(jì),有些軟件中80%都是表格類(lèi)頁(yè)面,可以說(shuō),設(shè)計(jì)開(kāi)發(fā)的是否易用,很影響口碑和用戶(hù)的使用感受。基礎(chǔ)的東西一定要做好,就像我們吃的主食一樣,雖然都是米和面,但是各地出產(chǎn)各種品種口味都不相同,要根據(jù)食客的喜好選擇、烹飪。今天就聊一聊最基礎(chǔ)的表格設(shè)計(jì)、變化和常見(jiàn)問(wèn)題。

一、基礎(chǔ)的表格設(shè)計(jì)美化

      基礎(chǔ)的表格可變化的地方很少,可以根據(jù)當(dāng)前軟件開(kāi)發(fā)選擇的框架控件(ext/vue/jequery不同框架會(huì)有一些不一樣)做色彩和風(fēng)格的變化,如:加表格不同粗細(xì)的線(xiàn)、斑馬格,中間無(wú)豎線(xiàn)種種的設(shè)計(jì),有的表格需要標(biāo)題很突出,有的內(nèi)文突出,這就和內(nèi)容焦點(diǎn)相關(guān)了。

點(diǎn)擊查看原圖


為了操作直觀便捷,在操作區(qū)放一些圖標(biāo)“刪除、編輯、審核”,配合文字來(lái)使用,有的把操作類(lèi)的圖標(biāo)放在最左邊,有的放在最右側(cè),按行業(yè)用戶(hù)習(xí)慣而定。

 點(diǎn)擊查看原圖

可以用固定表頭(標(biāo)題位置不變),允許用戶(hù)排序,單元格內(nèi)有很長(zhǎng)的文字,設(shè)定最大字節(jié),多內(nèi)容用……替代避免轉(zhuǎn)行,有小數(shù)點(diǎn)的數(shù)字右對(duì)齊,每列的大小可調(diào)整,這些也是設(shè)計(jì)開(kāi)發(fā)中可以做好的細(xì)節(jié)部分。


二、特別寬的表格怎么設(shè)計(jì)?


有的表格的寬度,達(dá)到了屏幕的兩屏和三屏,出現(xiàn)寬寬的橫向滾動(dòng)條,又有長(zhǎng)長(zhǎng)的豎向滾動(dòng)條,但工作的人又必須看,可煩人了!很多軟件都因?yàn)檫@個(gè)原因被吐槽。下面就介紹三種方法解決這個(gè)問(wèn)題:

方法一

如果表格的標(biāo)題是可以定制的,允許省略的,可以從業(yè)務(wù)角度取舍去掉無(wú)關(guān)緊要的,不常用的內(nèi)容,把這部分放在點(diǎn)開(kāi)的詳細(xì)頁(yè)內(nèi)容中即可。這就像一個(gè)房間的斷舍離:挑選、丟棄、分類(lèi)、收納,思考哪些物品是不要的,哪些是必不可少的?哪些是可有可無(wú)的?依次排序放在順手的位置,ui設(shè)計(jì)的道理也是相通的。

方法二

如果表格里面的內(nèi)容是確定的,不可省略的,比如銀行的報(bào)表就是這么長(zhǎng),這么多,那我們就可以從設(shè)計(jì)的角度來(lái)優(yōu)化,做一個(gè)加高版的表格。

點(diǎn)擊查看原圖

表格為什么一組信息只能一行呢?完全可以一組三行四行,在組中進(jìn)行重點(diǎn)信息,非重點(diǎn)信息以及符號(hào)化的直觀轉(zhuǎn)變。用大小、對(duì)比、濃淡、色彩、間隔這些平面設(shè)計(jì)的基本原則,讓一個(gè)普通的“山里娃”土土的表格變成一個(gè)“青春靚麗、人見(jiàn)人愛(ài)”自帶明星氣質(zhì)的表格。

方法三

大表格里面嵌套小表格,利用交互設(shè)計(jì),巧安排空間。當(dāng)用戶(hù)光標(biāo)移至感興趣的那行的時(shí)候,關(guān)于它更多的內(nèi)容,在下方滑動(dòng)撐開(kāi)出現(xiàn)或者右邊浮動(dòng)出現(xiàn)。這個(gè)方式雖然比較土,但也確實(shí)管用。早年在看某一招聘網(wǎng)站的時(shí)候,每一個(gè)人的簡(jiǎn)歷只要點(diǎn)名字就可以看到一組關(guān)鍵信息,便于迅速篩選,而另外一個(gè)招聘網(wǎng)站,就沒(méi)有這個(gè)功能,每個(gè)人都要打開(kāi)之后才能看見(jiàn)整體信息,我后來(lái)就不怎么看那個(gè)網(wǎng)站了。多一步操作,對(duì)典型用戶(hù)就多了許多的工作量,網(wǎng)站和軟件的使用口碑,用戶(hù)粘度就是這樣在為用戶(hù)考慮中一點(diǎn)一點(diǎn)積累起來(lái)的。

 屏幕快照 2020-06-08 上午11.03.47.png上圖:大表格里面嵌套小表格


     方法不會(huì)只有這三種,其他的方法要根據(jù)當(dāng)時(shí)的業(yè)務(wù),用戶(hù)使用的習(xí)慣、重點(diǎn),因地制宜的去設(shè)計(jì)了。軟件中的表格節(jié)省了許多程序工程師的工作量,如果做大的改動(dòng)或許是巨大的工作量,如果要做變動(dòng),一定要在開(kāi)始的時(shí)候就要讓ui設(shè)計(jì)納入開(kāi)發(fā)體系,一生二,二生三,在前期第一批實(shí)施時(shí)越注重細(xì)節(jié),后期就會(huì)越輕松,甚至省去幾倍甚至幾十倍的時(shí)間挨個(gè)頁(yè)面的去糾偏、修改。

      一個(gè)系統(tǒng)總是需要業(yè)務(wù)擔(dān)當(dāng),顏值擔(dān)當(dāng)?shù)暮诵牟糠郑匾捻?yè)面要額外的對(duì)待、花更多的精力和時(shí)間。如果千篇一律,也就不能顯示出軟件產(chǎn)品的獨(dú)到之處了。

 

第三 與表格配合的部分設(shè)計(jì)

第一種  “搜索查詢(xún)”和“過(guò)濾”部分的設(shè)計(jì)

     大多數(shù)表格的前面都有搜索過(guò)濾功能,如果搜索條件相當(dāng)多,可以精選一部分主要的排成一行,其他的隱藏,點(diǎn)箭頭再出現(xiàn)。整個(gè)搜索區(qū)域也可以有隱藏/顯示的按鈕,來(lái)給下面的表格更多的空間。

     過(guò)濾條件區(qū)域可以定義好“條件名稱(chēng)”一致寬度,一般在八個(gè)字左右,避免有的字節(jié)多,有的字節(jié)少,行數(shù)多了,參差不齊,區(qū)塊和區(qū)塊之間也要定義好統(tǒng)一的間距,這樣整體頁(yè)面就顯得整齊劃一、條理清晰。點(diǎn)擊查看原圖

點(diǎn)擊查看原圖

上圖:搜索和卡片式信息的組合

第二種  表格操作部分的設(shè)計(jì)

       對(duì)表格的操作“導(dǎo)入,導(dǎo)出、批量導(dǎo)出”有的時(shí)候這類(lèi)操作有1020個(gè),有的時(shí)候才幾個(gè),多的時(shí)候很占地方,可以用隱藏的方法,over到表格上再出現(xiàn),以節(jié)省空間。

       也可以分組把同類(lèi)的操作聚合在一起,把常用的放在目之所及,不常用的點(diǎn)后下浮出現(xiàn),以節(jié)省空間,

還可以光標(biāo)跟隨表格的某一行,點(diǎn)選自動(dòng)浮出一群小跟班,各種操作按鈕。即節(jié)省空間,操作移動(dòng)路徑又很短。只是不支持批量操作。

 

第三種  表格和卡片式設(shè)計(jì)、統(tǒng)計(jì)圖的整合切換

       表格是可以轉(zhuǎn)換成卡片式設(shè)計(jì)的,用一個(gè)卡片代替一行的展現(xiàn)信息,改變一種閱讀的方式。

有的也可以轉(zhuǎn)換圖統(tǒng)計(jì)圖表:曲線(xiàn)圖,柱狀圖讓用戶(hù)直觀的去解讀,而不必一直看枯燥的數(shù)字。

 點(diǎn)擊查看原圖


日歷

鏈接

個(gè)人資料

存檔