HI，親愛的寶寶們（小紅書上常用的呢稱），大家好，小紅書和抖音是最近非?；鸨膬蓚€視頻類的APP，可以說是視頻APP中的代表了，不知道你喜歡哪一個？

這兩個APP都非常的優(yōu)秀，所以今天藍藍就把這兩個APP的主界面都截了一下圖，我們從界面和交互以及用戶的角度去分析一下他們之間的區(qū)別，猜一猜他為什么要這樣做？

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

（圖片來源于圖蟲創(chuàng)意）

1、了解你的用戶

因為你的用戶是最終評判用戶界面好壞的人，所以用戶即是你的終極目標，不了解用戶需求，即使你的界面做得再好，也不是用戶想要的產(chǎn)品。了解用戶的需求是你開始做界面的前提，試著沉下心來仔細觀察用戶的喜好，并了解他們的技能水平和體驗觀察他們在界面中如何操作。不要迷戀于追逐設(shè)計趨勢的更新，或是不斷添加新的功能，始終記住，首要的任務(wù)是關(guān)注你的用戶，這樣才能創(chuàng)造出一個能讓用戶達成目標的界面。

2、重視UI模型

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

3、保持一致

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

4、清晰的視覺層次

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

（圖片來源于圖蟲創(chuàng)意）

5、提供反饋

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

6、容錯機制

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

7、鼓勵用戶

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

8、語言有親和力

所有的界面或多或少都有文字在其上，讓文稿盡量口語化，而不是華美辭藻的堆砌。為行為提供清晰、簡明的標簽，保持簡樸的文字敘述。。

9、保持簡潔

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

（圖片來源于圖蟲創(chuàng)意）

文章來源：快資訊 作者：德方科技

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

                                                            

 

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

 

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

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

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

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

臨摹

大概是在 15 年左右，在網(wǎng)上看到錘子設(shè)計師設(shè)計的一個圖標，覺得非常驚艷，當(dāng)時就想把它臨摹下來，這是當(dāng)時臨摹的一個效果。

△ 原作

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

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

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

1. 圖標分為水上和水下，2 個層級，在水下的圖形因為折射的關(guān)系，會發(fā)生扭曲
2. 水下會有深淺的顏色變化
3. 真實的水會流動，所以在水下會畫出帶明暗細節(jié)的水紋線條
4. 水下會有氣泡，且氣泡的產(chǎn)生符合真實場景，氣泡的大小由小變大
5. 水面的邊緣因為透光而產(chǎn)生邊緣反射
6. 投影因為紅色盒子的影響，會偏紅色色相，并且有近實遠虛的關(guān)系
7. 盒子的邊緣會有 1px 的高光和反光
8. 背景為了增加圖標的展示效果，也做了單獨的設(shè)計，把四周壓暗，然后加上雜色，使得整體的質(zhì)感更加強烈

當(dāng)時，對我來說，在練習(xí)的過程中有一個難點就是關(guān)于第 3 個細節(jié)水的紋理執(zhí)行有些難度，因為其中包括了粗細變化、虛實變化、明暗變化等等，單純的用圖層樣式或者矢量去畫的話，難度都比較大。這個細節(jié)當(dāng)時耗費了我不少時間，后面突然想到其實也可以用合成的辦法來實現(xiàn)，然后我去找了真實水紋的圖片進行疊加，很快就搞定了。所以，只要能達到效果，不能太過于局限某一種思路。

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

運用

記得當(dāng)時在 360 時需要設(shè)計一套關(guān)于摩洛哥藍色小鎮(zhèn)的官方定制版主題圖標。從搜集的當(dāng)?shù)卮硇缘膱D片中發(fā)現(xiàn)，多彩顏料是當(dāng)?shù)氐囊淮筇卣鳎詻Q定以染料為關(guān)鍵詞去畫一個圖標，又因為顏料本身自帶多彩的特點，所以以它為主題圖標就很合適了。

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

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

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

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

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

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

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

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

總結(jié)

這次圖標的優(yōu)化過程，我覺得有幾個要點對我來說印象深刻的：

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

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

對于圖標來說，要注意其整體性。比如圖標中的主體物不要跟背景脫離，不要讓圖標背板只是作為一個容器，而要讓背板也成為圖標本身的一部分，這樣圖標的整體性會更好。

臨摹的過程中，一定要多分析，多記錄自己覺得是細節(jié)的點。每一次記錄，都可能是將來設(shè)計時提升細節(jié)的靈感來源。

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

文章來源：優(yōu)設(shè)網(wǎng)     作者：彩云譯設(shè)計

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

2020年結(jié)束，此時正是一個很好的時間節(jié)點，我們共同探尋2021年即將擁有怎樣的未來。本文將帶你發(fā)現(xiàn)，即將在2021年流行的十種移動用戶體驗設(shè)計趨勢。

       看到知乎上的一個問題：如何找到一家好的高端網(wǎng)站設(shè)計公司？

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

       首先回答：何為高端？



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



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



       因為投入相對多，所以經(jīng)營業(yè)績好的企業(yè)、集團公司、營銷類大型網(wǎng)站來定制的比較多。



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



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



       一旦成為我們的客戶，設(shè)計無憂。

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

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)