這次特意選了百度貼吧這款A(yù)PP來臨摹，百度是一家大公司，對(duì)于各種間距、字體大小、顏色都有很好的規(guī)范。

首先開始做之前先思考一款A(yù)PP開發(fā)的過程：一開始定方向、定功能、定交互、定視覺，最后開發(fā)、上線、維護(hù)。主要是從這幾個(gè)方向分析。

貼吧的產(chǎn)品方向很明顯，就是要讓用戶可以看帖，回帖，發(fā)帖，讓用戶進(jìn)入到一個(gè)感興趣的圈子里。

接著再定和方向相關(guān)的功能。

交互可以看到使用的是底部tab式框架設(shè)計(jì)，這種設(shè)計(jì)的優(yōu)點(diǎn)是功能之間的切換性很高，而且可視性很好，

可以讓功能一目了然；缺點(diǎn)是呈現(xiàn)的主要功能有限。

所以貼吧采用的是底部操作欄導(dǎo)航，功能很明確而且也不多，用底部tab導(dǎo)航很合適。

視覺方面主要看細(xì)節(jié)把控，和內(nèi)容呈現(xiàn)。

貼吧的細(xì)節(jié)就做得很到位，在首頁頂部操作欄里就有所表現(xiàn)，用了兩種效果：2像素深色的內(nèi)陰影，1像素淡色的投影，這種效果不放大不仔細(xì)看是看不出的，在手機(jī)上也根本看不到，但是當(dāng)你整體來看的時(shí)候還是感覺很有質(zhì)感的，這個(gè)技巧應(yīng)該要好好利用，但是最好不能做得一眼就看得出來，我記得我老師說過好的效果就是不仔細(xì)看你看不出來。

對(duì)于細(xì)節(jié)還有一個(gè)要說的是不管是字體的顏色還是分割線的顏色或者是小的圖標(biāo)，如果它們是偏純灰度的顏色，那么它們的顏色并不是純的百分之多少灰，而是帶有一點(diǎn)點(diǎn)藍(lán)色，之前我的一些作品，像分割線，圖標(biāo)，背景，都只會(huì)用百分之多少的灰度，就拿最常用的背景（也是其他比較知名的APP用的）,#f0f0f0,這是一個(gè)94%的灰色；但是貼吧的背景就會(huì)加入一點(diǎn)藍(lán)色，#edeef0,也是94%的灰色，不過加入了一點(diǎn)藍(lán)色。

非常的細(xì)致，可能很不起眼，但是用于整體會(huì)非常協(xié)調(diào)，本來手機(jī)的屏幕就不大，有時(shí)差幾像素就會(huì)非常明顯，如果能夠把細(xì)節(jié)做好，才算真正提高了一個(gè)檔次。

         頂部效果

         頂部整體效果

每個(gè)功能之間的內(nèi)容呈現(xiàn)肯定各不一樣，它們各自有要突出的功能，也特色。

首頁內(nèi)容主要突出熱門吧貼，能夠讓用戶直接瀏覽到相關(guān)和感興趣的吧貼。由于貼吧的分類很多，需要能夠直觀給用戶提供快速選擇，它提供了一種二級(jí)滑塊導(dǎo)航，這種導(dǎo)航在新聞里用的比較多，因?yàn)榉N類劃分比較多；

而每一個(gè)貼在首頁呈現(xiàn)，必須要非常直觀，我覺得是為了讓用戶在一開始就對(duì)這個(gè)貼有一定的了解，避免用戶點(diǎn)進(jìn)去失望，降低信任感（就像我每次看新聞標(biāo)題點(diǎn)進(jìn)去都被騙了）。

主要呈現(xiàn)的元素可以看到有：頭像、用戶名、標(biāo)題、正文、圖片、來源、日期、點(diǎn)贊和評(píng)論。對(duì)于ui設(shè)計(jì)師說，一般這種都是原型圖里已經(jīng)定義好了，設(shè)計(jì)師能夠控制的就是視覺方面，視覺方面就包括，頭像大小、圖片大小、字體大小，字體間距，字體顏色，小圖標(biāo)顏色、大小。

字體的大小、圖標(biāo)大小都有規(guī)范，間距取合適的雙數(shù)，字體的顏色可以說一下，我記得剛開始做這種挺多文字信息在一起的時(shí)候，都用一樣的色值，很難看，沒有突出重點(diǎn)；都不一樣的時(shí)候也很難看，顏色太多，太亂了。最后自我總結(jié)，一般來說是2-3種同色相的顏色，文字信息比較多的時(shí)候建議還是用灰色來呈現(xiàn)比較好，有色相的顏色多了以后用戶看起來會(huì)很疲勞。一般至少兩種顏色來區(qū)分標(biāo)題和正文（當(dāng)然這不是絕對(duì)的，也可以用字體的大小、字體的不同、字體的粗和細(xì)對(duì)比來區(qū)分重點(diǎn)）；貼吧這里字體用了三種顏色來區(qū)分，用戶名和標(biāo)題用的一種顏色，用大小來區(qū)分；正文比標(biāo)題稍淺，標(biāo)注類型的顏色更淺，這是種層級(jí)的關(guān)系，看以看出主要突出的是什么。

圖片可以參考這個(gè)看http://www.zuodeer.cn/work/ZMTUyMTc1NzY=.html

第二塊內(nèi)容主要進(jìn)入關(guān)注的貼吧，采用的列表方式呈現(xiàn)，主要元素是吧名，吧的頭像，級(jí)數(shù)，列表方式的好處就是可以規(guī)律的呈現(xiàn)最多的內(nèi)容，是現(xiàn)在常用的一種方法；不同的級(jí)數(shù)有不同的顏色。

第三塊主要是回帖，消息方面的內(nèi)容，這里的亮點(diǎn)是類似與qq的提示提示方法，對(duì)于以后做消息的頁面可以做借鑒。

第四塊就是我的相關(guān)功能的集合，幾乎所有的APP都離不開這個(gè)功能板塊，畢竟是人在使用這個(gè)產(chǎn)品，那就需要給這個(gè)人提供一些相關(guān)服務(wù)，而這個(gè)板塊主要就是用來規(guī)劃集中一些零碎的功能。

這里原版用的是圖標(biāo)分類，對(duì)于圖標(biāo)做了一些細(xì)節(jié)修改。

首先原版的顏色是偏灰的，會(huì)讓圖標(biāo)看起來是下嵌的，而且對(duì)于這種比較大的圖標(biāo)做的太簡(jiǎn)化看起來相當(dāng)?shù)目眨瑳]有內(nèi)容感，對(duì)于小圖標(biāo)當(dāng)然是簡(jiǎn)化一些比較好，比較小的細(xì)節(jié)做的多對(duì)于整體來說也是看不到的，但是對(duì)于大圖標(biāo)來說我覺得就不該這么簡(jiǎn)化了。

所以在不改變功能排版，只是在視覺上進(jìn)行了優(yōu)化，在色彩上提亮了一些，對(duì)圖標(biāo)細(xì)節(jié)進(jìn)行了一些優(yōu)化，讓用戶更有想點(diǎn)擊的沖動(dòng)，是一種凸起來的感覺。

在字體上選用的是20px，原版是24px，由于圖標(biāo)已經(jīng)很形象的說明的功能作用，在這里文字只是一種說明，所以選擇了摘要字號(hào)，由于我在圖標(biāo)上采用的是復(fù)雜技法，所以重點(diǎn)突出的是圖標(biāo)，如果文字在使用24px，那么就會(huì)導(dǎo)致這個(gè)部分的凌亂，所以文字的適當(dāng)減小體現(xiàn)出一種精致感。

對(duì)于下列列表形式的功能塊，原版圖標(biāo)采用的是方形圖標(biāo)，但是個(gè)人覺得圓形和方形同在一個(gè)界面里會(huì)感覺很沖突，畢竟開始很圓潤(rùn)，很溫和，突然很尖銳很鋒利很有棱角，在心理上承受不了，總之我是承受不了..

而且使用方形就意味著色塊比較大，色塊比較大就意味著這是一個(gè)要著重突出的重點(diǎn)，而這個(gè)會(huì)與上方的圖標(biāo)產(chǎn)生沖突，如果下方列表要做方形圖標(biāo)，那么上面的分類盡量簡(jiǎn)化，盡量不出現(xiàn)大的色塊，可以采取簡(jiǎn)單的線性圖標(biāo)配文字這樣的排列就會(huì)是一種頭比較輕，身體比較重的感覺，也是一種不錯(cuò)的排版，可以參考微博的個(gè)人界面看看。

所以改動(dòng)上去棱角化，簡(jiǎn)單的一個(gè)圖標(biāo)，整體看起來很融合很協(xié)調(diào)，主要突出的上方五個(gè)功能項(xiàng)。