（圖片來源于圖蟲創意）

1、了解你的用戶

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

2、重視UI模型

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

3、保持一致

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

4、清晰的視覺層次

設計時，要讓用戶把注意力放在最重要的地方。每一個元素的尺寸、顏色還有位置，它們為理解界面共同指明了道路。清晰的層級關系將對降低外觀的復雜性起到重要作用。

（圖片來源于圖蟲創意）

5、提供反饋

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

6、容錯機制

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

7、鼓勵用戶

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

8、語言有親和力

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

9、保持簡潔

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

（圖片來源于圖蟲創意）

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

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

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

 

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

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

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

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

臨摹

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

△ 原作

△ 這是我當時臨摹的圖

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

然后實際練習中，不斷觀察原作發現有一些細節值得學習：

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

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

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

運用

記得當時在 360 時需要設計一套關于摩洛哥藍色小鎮的官方定制版主題圖標。從搜集的當地代表性的圖片中發現，多彩顏料是當地的一大特征，所以決定以染料為關鍵詞去畫一個圖標，又因為顏料本身自帶多彩的特點，所以以它為主題圖標就很合適了。

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

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

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

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

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

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

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

一張動態圖可以更加清晰的看到變化。

總結

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

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

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

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

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

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

文章來源：優設網     作者：彩云譯設計

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

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

       看到知乎上的一個問題：如何找到一家好的高端網站設計公司？

       把回答的內容也轉過來記錄一下。

       首先回答：何為高端？



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



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



       因為投入相對多，所以經營業績好的企業、集團公司、營銷類大型網站來定制的比較多。



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



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



       一旦成為我們的客戶，設計無憂。

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

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

作者：藍藍

表格，是一種最常見的信息組織整理手段，常用于信息收集、展示、數據分析、歸納整理。

      UI軟件設計中最常用、最基本的是表格的設計，有些軟件中80%都是表格類頁面，可以說，設計開發的是否易用，很影響口碑和用戶的使用感受?；A的東西一定要做好，就像我們吃的主食一樣，雖然都是米和面，但是各地出產各種品種口味都不相同，要根據食客的喜好選擇、烹飪。今天就聊一聊最基礎的表格設計、變化和常見問題。

一、基礎的表格設計美化

      基礎的表格可變化的地方很少，可以根據當前軟件開發選擇的框架控件（ext/vue/jequery不同框架會有一些不一樣）做色彩和風格的變化，如：加表格不同粗細的線、斑馬格，中間無豎線種種的設計，有的表格需要標題很突出，有的內文突出，這就和內容焦點相關了。

為了操作直觀便捷，在操作區放一些圖標“刪除、編輯、審核”，配合文字來使用，有的把操作類的圖標放在最左邊，有的放在最右側，按行業用戶習慣而定。

可以用固定表頭（標題位置不變），允許用戶排序，單元格內有很長的文字，設定最大字節，多內容用……替代避免轉行，有小數點的數字右對齊，每列的大小可調整，這些也是設計開發中可以做好的細節部分。

二、特別寬的表格怎么設計？

有的表格的寬度，達到了屏幕的兩屏和三屏，出現寬寬的橫向滾動條，又有長長的豎向滾動條，但工作的人又必須看，可煩人了！很多軟件都因為這個原因被吐槽。下面就介紹三種方法解決這個問題：

方法一

如果表格的標題是可以定制的，允許省略的，可以從業務角度取舍去掉無關緊要的，不常用的內容，把這部分放在點開的詳細頁內容中即可。這就像一個房間的斷舍離：挑選、丟棄、分類、收納，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可無的？依次排序放在順手的位置，ui設計的道理也是相通的。

方法二

如果表格里面的內容是確定的，不可省略的，比如銀行的報表就是這么長，這么多，那我們就可以從設計的角度來優化，做一個加高版的表格。

表格為什么一組信息只能一行呢？完全可以一組三行四行，在組中進行重點信息，非重點信息以及符號化的直觀轉變。用大小、對比、濃淡、色彩、間隔這些平面設計的基本原則，讓一個普通的“山里娃”土土的表格變成一個“青春靚麗、人見人愛”自帶明星氣質的表格。

方法三

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

 上圖：大表格里面嵌套小表格

     方法不會只有這三種，其他的方法要根據當時的業務，用戶使用的習慣、重點，因地制宜的去設計了。軟件中的表格節省了許多程序工程師的工作量，如果做大的改動或許是巨大的工作量，如果要做變動，一定要在開始的時候就要讓ui設計納入開發體系，一生二，二生三，在前期第一批實施時越注重細節，后期就會越輕松，甚至省去幾倍甚至幾十倍的時間挨個頁面的去糾偏、修改。

      一個系統總是需要業務擔當，顏值擔當的核心部分，重要的頁面要額外的對待、花更多的精力和時間。如果千篇一律，也就不能顯示出軟件產品的獨到之處了。

第三 與表格配合的部分設計

第一種  “搜索查詢”和“過濾”部分的設計

     大多數表格的前面都有搜索過濾功能，如果搜索條件相當多，可以精選一部分主要的排成一行，其他的隱藏，點箭頭再出現。整個搜索區域也可以有隱藏／顯示的按鈕，來給下面的表格更多的空間。

     過濾條件區域可以定義好“條件名稱”一致寬度，一般在八個字左右，避免有的字節多，有的字節少，行數多了，參差不齊，區塊和區塊之間也要定義好統一的間距，這樣整體頁面就顯得整齊劃一、條理清晰。

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

第二種  表格操作部分的設計

       對表格的操作“導入，導出、批量導出”有的時候這類操作有10—20個，有的時候才幾個，多的時候很占地方，可以用隱藏的方法，over到表格上再出現，以節省空間。

       也可以分組把同類的操作聚合在一起，把常用的放在目之所及，不常用的點后下浮出現，以節省空間，

還可以光標跟隨表格的某一行，點選自動浮出一群小跟班，各種操作按鈕。即節省空間，操作移動路徑又很短。只是不支持批量操作。

第三種  表格和卡片式設計、統計圖的整合切換

       表格是可以轉換成卡片式設計的，用一個卡片代替一行的展現信息，改變一種閱讀的方式。

有的也可以轉換圖統計圖表：曲線圖，柱狀圖讓用戶直觀的去解讀，而不必一直看枯燥的數字。

藍藍注：我非常喜歡這個風格。

日前，在網上流行起了一種叫 Neumorphism 的新風格，也有人稱為 Soft UI，這是一種類似于浮雕的效果。這種風格的出現，給目前流行的扁平化設計增加了一種新的設計形式，很多媒體甚至還將這個風格列為 2020 的設計趨勢，三星 Galaxy 系列的發布會宣傳海報也使用了這種風格，可見這個風格的火熱程度。那么一開始我們不討論這個風格好還是不好，先來了解一下這個新風格趨勢。

什么是Neumorphism？

最開始是一位來自烏克蘭的設計師 Alexander Plyuto 在各平臺發布了新的作品「Skeuomorph Mobile Banking」。這個作品自發布以來就獲得了數十萬瀏覽量，數千點贊數，熱度持續飆升并登上 Popular 榜首。

作者是用 Skeuomorph 來命名這個作品風格，評論區就開始了這種風格的討論，有的人說這是新的擬物風格（New Skeuomorphism），也有人說這是擬物風格 2.0 版本（Skeuomorph 2.0），而后來就有設計師創出一個新的虛構名詞，把 New Skeuomorphism 兩個詞組合，Neo 諧音 New 就是 Neuomorphism。

這個名字就這么火了。大家都開始用上了這個名詞出作品，成為了設計新趨勢。甚至連作者后面的作品，也使用了這個名稱。

再后來國外知名設計師 Michal Malewicz 發布了一篇關于這個風格的文章，將 Neuomorphism，刪減了里面的字母「O」，改成了 Neumorphism。在大神的推動下大家又開始爭先恐后地使用這個名稱。

目前有各種對名稱的說法，Neuomorphism，Neumorphism，Skeuomorphism，Soft UI，在沒有實際確定的情況下，其實怎樣叫都無所謂，重點是我們要知道這種設計風格趨勢，關注的不是名字，而是設計。

還記得擬物風格嗎？

既然 Neumorphism 只是一個虛構詞，也沒有任何官方認定，那就先不糾結應該叫什么，我們還是來說說它的前身吧，也就是 Skeuomorphism（擬物）。這是最早被 Apple 提出的設計概念，就是在界面中模仿現實物體紋理材質的設計，目的是讓人們在使用界面時習慣性地聯想到現實物體的使用方式。

擬物寫實的設計風格曾經風靡全球，當時的 UI 設計師幾乎都對擬物作品著迷。

而在 2013 年的 WWDC 大會中，蘋果公司發布的 iOS7 系統，系統 UI 使用更簡潔的設計風格。這場大會也使擬物風格逐漸過時，直到現在扁平風格的全面普及，擬物風格就再沒有被廣泛應用。

從前幾年的設計趨勢可以看到，扁平風格作為更更簡潔的風格被設計師推崇，再加上蘋果系統 iOS 7 設計風格的面世和谷歌系統規范 Material Design 的普及，扁平風格在 UI 設計中一直占據重要位置。

但設計的流行趨勢也一直在改變著，在蘋果公司發布的 iOS 13 系統中，就有出現輕擬物的設計手法，接著就有一大堆設計師猜測是不是擬物風格的回歸，但我看系統中大部分界面設計也還是扁平風格，并沒有把擬物風格作為主要設計風格，也許只是某種程度上解決了畫筆的視覺識別問題。

擬物效果能否回歸，這個言之尚早，但是新的風格趨勢也許可以在扁平同質化的時候增添一點靈感與樂趣。

能用在實際項目中嗎？

1. 設計

其實要做到這個效果并不難，了解一下這個風格的結構。

主要有三個樣式組成，1 個背景+ 2 個投影。在這個基礎上，通過改變顏色和大小參數來達到不同效果。

我嘗試著使用彩色去做這個效果，使用淺色背景時還是有效果的，但使用深一點的顏色時，問題就出現了，效果更像是外發光或者普通投影。這也可能是為什么大多數作品都采用比較素的顏色作為背景的原因。

2. 瀏覽

這個風格最大的問題就是缺少對比度。在色彩使用上比較克制，沒有大面積的平鋪顏色，僅在極少的位置進行色彩點綴，作用是吸引眼球。從眾多設計師的作品可以看出，整體視覺是比較平的，缺少層次。

我拿其中兩張圖進行了 15% 強度的模糊處理，可以看到除了點綴的位置以外，界面是沒有重點的。

3. 操作

因為在界面中除了文字以外，幾乎所有元素都應用了這種效果，導致界面所有內容看起來都是按鈕的錯覺。界面中的主要操作按鈕也沒有被重點提亮。正常態和點擊態的對比度并沒有拉開，容易造成狀態混淆。點擊欲望比較低，不利于引導用戶進行下一步操作。

4. 動畫

跟擬物效果的動畫有同樣的問題，元素動畫效果很難做得輕快，更適合按鈕的使用。由于視覺層級跟背景沒有實際分離開，就像固定在了背景上一樣，所以動畫效果只要出現移動，就會讓人覺得不合理，容易給人一種蟲子在皮膚底下蠕動的感覺。

5. 開發

問題跟當年的擬物效果的實現類似，要實現這個風格，主要有兩個方式。

切圖：對元素的每個狀態（Normal、Hover、Pressed），設計師都需要分別提供一張切圖，這個會導致資源庫增加大量的圖片。 代碼實現：這個風格的實現效果是對元素增加兩個不同方向的投影，通過代碼可以實現。但是需要開發對每個元素添加投影，樣式代碼增多，繁瑣的工作量，開發也不會樂意。

附 CSS 實現新風格的網站：Neumorphism 的生成器

綜合分析來看，這種設計風格目前在項目中推廣和實現中并不合適。

總結

這個風格的出現也確實給大家帶來了一個新的思考，這個風格會持續嗎？可用嗎？也許扁平風格的多年流行后，設計潮流開始往回走，但并不是直接回到擬物風格，而是在效率和視覺效果中找一個平衡點。不論這個風格的對錯，起碼引起了設計師的注意，也激發了很多設計師的靈感，就像當年擬物風格和扁平風格的討論一樣，不分對錯，設計師也不妨多留意一下這個風格，試著做一下效果圖，或許會有新的發現。