中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

那么收到小伙伴們的作業(yè)，我們一起來看看有沒有什么問題，希望可以幫助大家解決一些問題。

案例1: 個(gè)人中心

從提交的這張UI界面來分析，先看一下整體，我們利用模塊覆蓋法來將頁面的內(nèi)容區(qū)分一下：

我們發(fā)現(xiàn)頂部的內(nèi)容在整體視覺上比較擁擠，并且信息比較散，所以我們要對(duì)頂部這塊內(nèi)容再拆分重組一下。這里他將數(shù)字部分內(nèi)容整合到了左側(cè)，但是這樣會(huì)讓左側(cè)內(nèi)容過于擁擠，而且右側(cè)區(qū)域只有一個(gè)圖標(biāo)是達(dá)不到平衡的效果，雖然放了標(biāo)簽，但是標(biāo)簽和人的關(guān)聯(lián)性還是差了一些，所以標(biāo)簽要么跟頭像要么跟名字，而不要躲在角落里。

另外數(shù)字的字體使用也會(huì)有一種被擠扁的感受，這里不建議用這樣很瘦的字體。并且這里其實(shí)他將點(diǎn)贊和收藏一起收了起來可能是因?yàn)樽髠?cè)放不下了，那么我們直接就另一起一行放數(shù)字新信息即可。這樣名字與頭像和平衡對(duì)稱，數(shù)字又可以水平平均鋪開，這是一種常規(guī)的處理方法。

其次，整個(gè)版面白色區(qū)域較多，那么中間的開通會(huì)員卡片的色彩就過于重了，雖然我們需要引導(dǎo)用戶去開通，但是視覺上給人感知太強(qiáng)烈，就感覺有點(diǎn)突兀。

個(gè)人中心其實(shí)更多的是展示與我相關(guān)的信息和內(nèi)容，目前大部分產(chǎn)品的設(shè)計(jì)風(fēng)格也都是以簡潔為主，所以我們也盡可能的利用到這點(diǎn)?？ㄆ逶谥虚g是個(gè)不錯(cuò)的想法，但是一般我們?cè)谧鯱I設(shè)計(jì)的時(shí)候?qū)蛹?jí)做出3層及3層以內(nèi)即可，不要出現(xiàn)第四層。

3層指的是：背景層、內(nèi)容層、懸浮層/疊加層，如果一個(gè)界面中出現(xiàn)4層，會(huì)導(dǎo)致界面的層級(jí)過多，信息就較為復(fù)雜，所以這個(gè)界面中，收藏夾一欄的卡片是不需要加投影的，只需要圖標(biāo)加文字的上下排列即可。

接下去，下方的功能列表在瀏覽上效率過低，我們看到要瀏覽完這列信息我們視線需要折行，并且這些功能是不需要都放在頁面下方去堆疊，其實(shí)頂部導(dǎo)航欄也是可以利用起來的，由于這是一款美食類的產(chǎn)品，用戶很多時(shí)候也會(huì)在個(gè)人中心去搜索我創(chuàng)建的食譜、作品等內(nèi)容，所以像搜索和消息可以直接放在導(dǎo)航欄，而設(shè)置和關(guān)于這些較低頻的操作就可以合并起來，那么原來6行列表就變?yōu)榱?行，那這四行內(nèi)容我們可以直接用橫向排列的形式去做了。

那么最后，如果要對(duì)界面做視覺上的優(yōu)化，我們要對(duì)信息重新排版、圖標(biāo)進(jìn)行重新設(shè)計(jì)，在原圖中我覺得底部中間的圖標(biāo)還是具有品牌特征的，那么我們就把這個(gè)品牌特征拿過來，作為一個(gè)輔助圖形，這個(gè)輔助圖形就可以用在小標(biāo)簽和卡片背景的修飾中。

很多新人設(shè)計(jì)師在做UI界面的時(shí)候就會(huì)不知道應(yīng)該放什么信息上去。所以要明白的是這個(gè)信息能告訴用戶什么，用戶能通過這個(gè)信息判斷什么，用戶的瀏覽順序和重點(diǎn)在哪里？

好了，再強(qiáng)調(diào)一遍，當(dāng)你設(shè)計(jì)完一個(gè)UI界面的時(shí)候，先問一下自己這4個(gè)問題：

1. 這個(gè)界面告訴用戶哪些信息
2. 用戶能否通過這些信息判斷自己是否要繼續(xù)任務(wù)流程
3. 界面的瀏覽順序是怎樣的
4. 信息展示的重點(diǎn)和次要點(diǎn)是否展示合理

接下來講兩個(gè)案例：

案例2: pc端遷移移動(dòng)端案例

第一次從pc端遷移過來的同學(xué)會(huì)有這幾個(gè)問題，同樣的界面信息和內(nèi)容如果要完全保留的遷移到移動(dòng)端應(yīng)該怎么設(shè)計(jì)，一個(gè)界面放不了那么多內(nèi)容。比如我們先來看這個(gè)這個(gè)卡片列表：

這個(gè)列表的信息很有pc端的特點(diǎn)，這位同學(xué)其實(shí)是有意識(shí)的將重要信息強(qiáng)化了，但是pc端到移動(dòng)端我們是可以簡化很多信息和細(xì)節(jié)的，另外在用戶瀏覽的路徑上也會(huì)有不同。

那我們看到這個(gè)卡片中的信息，從上往下依次瀏覽好像并沒有問題，但就是因?yàn)闆]有問題，這才是問題。類似這樣的信息卡片，其實(shí)如果按照這樣排，那么用戶就會(huì)瀏覽完所有信息再做決策，而我們知道的是并不是所有信息都需要讓用戶去關(guān)注到，例如最終要的是標(biāo)題、狀態(tài)和查看軌跡，而不重要的是工單和創(chuàng)建時(shí)間。

怎么判斷重不重要呢？一個(gè)是用戶查看和操作的頻率，另外就是業(yè)務(wù)側(cè)的側(cè)重點(diǎn)。這邊為了隱藏一些敏感信息某些文案就處理了一下，大家可以看一下我們方案的前后對(duì)比。

這里沒有刪減任何信息，因?yàn)榇_實(shí)在業(yè)務(wù)方面需要某些信息，但是像“創(chuàng)建時(shí)間”“查看軌跡”“當(dāng)前狀態(tài)”這些是沒有必要的文案就可以省略。而卡片的狀態(tài)一般在移動(dòng)端上會(huì)放在右上角顯示，并且在移動(dòng)端中不需要加圖標(biāo)做修飾。

在原來的卡片中，如果我們要根據(jù)創(chuàng)建時(shí)間去找的話，因?yàn)楣?、?chuàng)建、狀態(tài)3行文字有點(diǎn)類似，所以會(huì)導(dǎo)致尋找效率不高，那么我們就講工單還有時(shí)間分開放置，在滾動(dòng)瀏覽的時(shí)候可以更好的尋找。

而查看軌跡按鈕我還是去掉了，考慮到的既然這里是軌跡軌跡訂單列表那么用戶就知道進(jìn)來是要查看軌跡的，所以不需要全部在卡片中給按鈕，這個(gè)也是web和移動(dòng)端的區(qū)別，移動(dòng)端的卡片是可以整體點(diǎn)擊的，就和電商的訂單列表、提現(xiàn)記錄等卡片列表一樣的都可以點(diǎn)進(jìn)詳情，而web中的卡片則不行，所以用戶在這里反正需要點(diǎn)擊一次，那么這里就不需要給一個(gè)軌跡按鈕，還顯得更復(fù)雜。

再來講個(gè)案例，相信很多同學(xué)在pc端的b端設(shè)計(jì)中遇到過這樣的問題，就是很多表格類的信息在web端可以一屏放下，到移動(dòng)端就放不下了，那該怎么去做。其實(shí)如果你們可以去參考阿里云的app，類似于這樣pc端b端的移植到移動(dòng)端來說，也只能部分移植。

因?yàn)橐苿?dòng)端的導(dǎo)航太有限了，像pc端左側(cè)和頂部的篩選控件可以放多層聯(lián)動(dòng)，并且橫向可以展開更多的標(biāo)簽，但是移動(dòng)端橫線太受限了，大家可以看一下如果我們真的要整體遷移的話就會(huì)變成以下這樣的情況，但是移動(dòng)端的核心的方便快捷，并不適合那么復(fù)雜的內(nèi)容在一個(gè)界面去進(jìn)行交互流轉(zhuǎn)，所以左側(cè)縱向tab導(dǎo)航不會(huì)出現(xiàn)下拉展開的二級(jí)聯(lián)動(dòng)。

所以大家?guī)缀鯖]有看到過最后那樣的終極形態(tài)，因?yàn)閷?shí)在太復(fù)雜了，但是如果講左側(cè)的縱向?qū)Ш饺サ舻脑捚鋵?shí)還是可以看一下。在這個(gè)表格中橫向的篩選元素很多，那么就通過滑動(dòng)或者點(diǎn)擊來獲取更多標(biāo)簽和表格內(nèi)容，另外標(biāo)簽可以做排序但不能做展開篩選，類似的形式可以參考下汽車之家或者汽車配置界面。

案例3: 圖文列表優(yōu)化

這是一個(gè)比較典型的圖文布局案例，需要注意的是很多小的細(xì)節(jié)，整體來看頁面上半部分有效信息太少。什么是有效信息就和上文我們提到的4點(diǎn)是一樣的，如果你的界面只是為了展示好看的圖片和簡單的標(biāo)題來排版，那么這個(gè)界面一定是無效的。如下：

然后底部的左文右圖區(qū)域的信息又比較密集，和上半部分形成了一個(gè)明顯的反差。另外加上一些小細(xì)節(jié)的處理不到位：卡片投影太短太深，圓角不夠統(tǒng)一，文字行間距不合理，功能位置擺放不合理，這樣整體就感覺到很多瑕疵。另外如果只是自己做練習(xí)那么圖片可以選擇的更美觀一些，而不需要收到產(chǎn)品業(yè)務(wù)的限制，那么我們花10分鐘來重新調(diào)整一下整體的布局和優(yōu)化一些細(xì)節(jié)。

在版式上最后做了兩個(gè)略有區(qū)別的版本，你們覺得哪個(gè)更好呢？