分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
早在平面設計開始之初，就有對“柵格”的使用記錄。（不過那時不叫柵格，而叫網格）因為印刷機器以及切割工具的限制，導致在頁面的板式設計需要一定的出血線用于防止書籍內容的缺失，因此出現了當時非?；鸨摹镀矫嬖O計中的網格系統》一書。
雖然這是一本非常老的書，但是設計本身就是相通，將其核心思想用在圖標設計、網頁設計、B端設計當中都有著明確的指導意義。
而在設計（網頁端、桌面端）產品時，對于空間上的理解，一直以來都是令人頭疼的問題。
我們將屏幕當中的設計空間分為 橫向 與 縱向 兩個維度：
橫向：
由于大多數顯示器都是寬屏的形式，導致我們大多數頁面內容都是通過橫向的方式進行列式排布，也就導致縱向導航、二三級內容分布較多；而市面上所要兼容的橫向尺寸較多，大致分為：1920、1440、1366、1280，而怎樣將如此多的尺寸，擺放不同的元素，這仿佛才是設計的難點。
縱向：
屏幕的縱向的空間同樣十分關鍵，當內容在橫向無法滿足時，則會增加屏幕縱向的內容量。但是我們可以通過瀏覽器的特性，縱向的內容通過滾動條進行收折，進而實現兼容。
前面說了這么多，我們來聊聊柵格的定義。
柵格：是對界面當中元素橫向排布的一種模式，主要用于大型區塊間距的排列，不適用于 圖標與文字 間隔的小型元素。
這里有兩個重要點：
橫向排布：代表著柵格的用法，這也是為什么柵格都是一列一列的原因。
用于大型區塊：不是任何內容都可以用柵格，比如在 卡片當中的圖標、文字，更多是要分析整個卡片，將其看作一個整體，如上圖。
在一個常見的柵格當中，一般分為 頁邊距、水槽、柵格寬度：
頁邊距：是柵格與外層信息的保護區域
因為在整個柵格系統當中，除了柵格之外，往往還會有其他的內容進行展示（如上上方圖，柵格日常的使用頁面），而我們正好可以通過頁邊距的方式，將其進行區分。我們以常見的B端界面為例，通過頁邊距可以將側邊導航與內容頁進行區分，保證頁面間的親密性，常見的頁邊距尺寸一般為 20px、24px。
水槽：是確定柵格寬度間的固定間距，通常是幫助柵格內的元素進行更為合理的排布。
水槽目的就是為了統一元素間的距離。比如現在頁面當中有兩個卡片的內容，而使用水槽，我就可以將這兩個卡片的內容，確定其間距（再次強調柵格用于確定橫向內容）方便柵格當中元素的信息排列。
柵格寬度：是柵格當中內容所占的基本寬度，一個柵格寬度往往是通過 內容寬度、頁邊距、水槽 排除過后所剩的寬度平均得出，一般會分為 12欄、24欄 兩種方式。
柵格寬度的確定，其實就是一個數學題，先給你一個公式（不建議使）：
(A×n) – i = W
A：一個柵格單元的寬度；a：一個柵格的寬度；n：正整數；i：水槽寬度；W：頁面的寬度。
雖然公式好像是萬能的，但我不喜歡死記硬背，來深入講一講這個公式背后的邏輯和使用方法。
以1440的頁面為例，通常B端產品左側會有一個導航菜單，假設為 200px，因此整個柵格的內容頁則為1440 – 200=1240px。
然后設定頁邊距寬度為 24px，一個柵格會有兩條頁邊距，剩下寬度則為：1240 – (24*2)=1192px
接著設定整個柵格為12欄，水槽寬度為8px。因為水槽位于 柵格 的左右兩側，也就意味著水槽的數量會比柵格少一列（別問為什么，問就自己去下面圖片數一數）也就是1192 – (8*11)=1104px
最后因為在水槽已經確定柵格為12欄，整個柵格的寬度則為：1104/12=92px
如果還不能理解，建議跳到開頭，再看一遍。
整個柵格的順序不能亂：頁面寬度→頁邊距→水槽→柵格寬度。因為我們的柵格一定是從大到小，從外到里，不然做出來的內容很容易無效。
將元素擺放在柵格中，還需要注意起始位置與結束位置。這里教你們一個口訣：起始在左，結束在右；換句話說就是元素的起始位置必須放在柵格寬度的左側（也中的紅線）；
結束位置必須放在柵格寬度的右側（圖中的藍線）
這樣的方式也是為了避免很多設計師知道畫柵格而不會用柵格，出現一些低級錯誤。
關于柵格的定義就先聊到這，下期來與大家講一講關于柵格應用當中的自適應布局、響應式布局，以及其中的斷點等內容，我們下期見～
原文鏈接：CE青年（公眾號）
作者：CE青年
轉載請注明：學UI網》B端設計指南 – 柵格的定義
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
對于本能層，設計師需要在符合功能需求的前提下，盡可能的給用戶帶來聽覺、視覺、觸覺的感官刺激，極力去促成用戶與產品的 “一見鐘情”。
案例 1 ：App Store 的卡片推薦做的很有新意，比如：把吉祥物（品牌形象）是小熊的工具收集到了一起，并取名為：熊幫手。
案例 2 ：微博長按點贊按鈕，可以選擇不同的點贊狀態。圖標還是動態的，很有趣。
案例 3 ：淘寶雙十一預熱，首頁的 icon 變成了 “今晚 20 點雙 11 搶預售”的字樣，烘托氛圍又打了廣告。
案例 4 ：微信撥打語音的界面，在等待好友接聽的過程中，可以看到好友朋友圈的圖片，緩解用戶等待時的無聊，也為即將進行的語音聊天提供了話題。
對于行為層，設計師需對用戶的行為進行預判和引導，利用細節處理打動用戶，讓用戶對產品產生信任感和依賴感。
案例 1 ：當蘋果公司發現用戶最近在官方渠道購買了新的 iPhone ，老 iPhone 的設置頁面就會給出提示，讓用戶為新的 iPhone 做好數據遷移準備。
案例 2 ：iOS 系統后臺在看縮略效果時，會將用戶的敏感、私密的信息的 App 頁面進行模糊處理，保護用戶的隱私安全。
案例 3 ：在屏幕很暗的情況下，打開微信支付二維碼，屏幕會瞬間亮起，便于商家掃碼付款。
案例 4 ：貨拉拉在展示搬家車輛詳細信息時，使用了剖面圖，并模擬了不同搬家場景下的家具內容，讓用戶更好估算車輛空間。
對于反思層，設計師要調動用戶最深層的記憶和感知，將視覺效果、產品功能和用戶認知緊密結合，形成用戶對于產品和品牌的深刻認知。
案例 1 ：FigJam 是一款來自 Figma 的多人協作在線白板工具，可以進行頭腦風暴、繪制流程、多人協同標記等。里面也有很多人性化的小功能，比如：當兩個人同時長按 “H” 鍵時，就會出現 highfive（擊掌的動效），非常適合當設計師達成共識時使用：
案例 2 ：小睡眠 App 發現學生時代的我們經常會在枯燥的課堂上睡覺，所以準備了各種課堂講解、校長發言、領導開會的聲音作為催眠、助眠的音樂，讓人會心一笑。
案例 3 ：餓了么在異常天氣下通過在界面上增加天氣的元素，讓用戶看到外賣小哥的辛苦，使用視覺和內容共情，喚起用戶的同理心，降低用戶因外賣遲到而做的投訴和差評。
案例 4 ：QQ音樂上線了寵物功能，一共有五個品種的寵物讓用戶可以選擇領取，多聽歌能喂飽寵物，然后送它出去參加演唱會或者和好友進行互動。
原文鏈接：長弓小子（公眾號）
作者：元堯
轉載請注明：學UI網》案例錦囊｜交互設計中「情感化」設計優秀案例（二）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
差不多主義：凡事都覺得差不多就行了，不是特別注重設計細節。
如果每個部門都是“差不多主義”，我來給你算一下最終實現的產品會變成什么樣（我們就按還原度80%來算）。產品 → 交互 80%，交互 → UI 80%，UI → 研發 80%，最后則：80% x 80% x 80%=51.2%，最后實現的只有預期的 50% 左右，這個產品還怎么用？
每個設計師都要成為“處女座”和像素眼，如果你只是為了想快速完成工作而搞出粗制濫造的設計，你的價值也很難體現出來。而且現在互聯網已經發展的比較成熟，很多產品差異化并沒有很大，如果你連細節都處理不好，要你何用？要在有限的時間內做出更精細的產品，打造完美產品，拒絕粗制濫造。
而且近幾年很多公司對【產品體驗】越來越重視，比如我司就把前端部門改名為體驗技術部，旨在全員打造高質量、優體驗、重設計的產品。研發都注重體驗了，你再“差不多”就真的差多了~
同時，有的設計師不善言辭，在對接需求或設計澄清的時候不會堅持自己的想法，有時候就算自己是對的，也會在其他人強勢的情況下敗下陣來。所以作為設計師一定要敢于力爭，強大的溝通能力也是職場晉升的一個重要表現。
抄襲：你直接叫我名得了。
開始之前我們要區分一下抄襲和借鑒的含義。我專門查了下詞典，根據《現代漢語詞典》的解釋：抄襲是把別人的文章、作品私自照抄作為自己的去發表，并且實質性相似；借鑒是與別的人或事相對照，以便取長補短或吸取教訓。區別在于前者是“照樣抄錄”，后者是“參考仿照”。
把借鑒當做尋找靈感對任何設計師來說都是一個自然的過程。
學過美術的都知道，畫畫前期都是需要臨摹的，這個就是借鑒、學習的過程，如果你拿臨摹的畫去商用，那肯定會被打~
我們經常做的競品調研就是借鑒的過程，去了解競對都有哪些值得學習的地方，哪些地方做的不好不適合我們，我們可以創新的。
不要直接把競對的產品拿過來抄，一些初級產品經理就會經常這么干，看競對有什么，他們就抄；競對是怎么處理了，他們就怎么處理。永遠跟不上市場的腳步，別人都產品化了你才開始搞，吃屎都趕不上熱的~
設計真的很辛苦，我們可以把別人的作品作為“日常練習”，去從中學習原作者是如何思考、設計的。如果你拿他做除學習外的任何其他用途，都是不允許的。
其實設計已經發展到了幾乎不可能 100% 原創的時代，我們就是要把所學所見混在一起，創造出一些新的設計。解決方案永遠不止一個，思維夠活躍，就有千萬種可能。
在數字時代，你拿別人的設計搞事情，是藏不住的，我平時發一些“曝光抄襲類”文章的時候，瀏覽量比平時都要高很多，大家對抄襲還是很關注的。
平時我在面試的時候，如果你是“拿來主義”，一眼就會被看穿的，不要問我怎么看出來的，看多了你也就能一眼望穿了。
借鑒總是好的！但不要復制TA的風格或元素，試著創造你自己的風格和想法，這樣才是好的借鑒形式。
這種“職場好人”性格其實是非?？膳碌摹２皇撬械男枨蠖际呛侠淼?，也不是所有的需求你都能做。但只要你接下了，你就要負責到底。
新手容易犯的一個錯誤就是：不會評估工作量，leader 給你工作的時候他會有個時間預期，但有時候也不是完全準確的，你要自己評估在這個時間內是否可以完成，完不成的話就要 say no，重新規劃時間。
還有一個比較容易犯的錯是：leader 給你任務，你為了凸顯自己工作效率高，來幾個需求接幾個需求，完不成的話就自己硬扛著熬夜加班加點，雖然說這樣可以多接觸需求快速成長，但長此以往，如果有個需求加班加點都搞不出來，你又承諾了沒問題，最后沒完成導致研發延期了，只能你背鍋。
要適當的合理安排需求，不要工作一年，加出來三年工作經驗，你這是卷誰呢？
在設計澄清的時候，別人反饋的問題做記錄，然后思考合不合理，不要一有質疑聲你就覺得自己的方案不行，就改改改，有的質疑是合理的，有的不合理，你要有判斷，設計決策你來把控。
平時自己做好需求的時間規劃，細化到小時維度，這樣別人再問你有沒有時間接需求的時候，你就可以理直氣壯的告訴他有 or 沒有。
還有一個需要注意的就是，跨部門的上級找你做東西的時候，一定要讓他找你的直屬 leader，保證需求的統一入口，這樣對大家都好。之前我部門就有個設計師，別的部門領導就老直接找他做東西，然后回頭我們老大找他要之前任務結果的時候，他才說沒完成~
摸魚法則第一招：我很忙，需求往后排~
產品化的界面可不是你喜歡什么就設計什么的，要考慮整體風格。尤其是 B 端產品，風格統一和樣式延展性是必要考慮的因素之一，你可以有個性化，但不要跟現有風格違和，適合的才是最好的。
當然了，這么說不是讓你不要創新，是在原有地基之上創新產品。你設計的再好看，紅杏出墻了有何用？新手和老手的區別，在于一個只關注當下，一個考慮全局。初級只會把當下做的盡善盡美，活靈活現；老手會在保證全局完整性的前提下最大化的產品創新和易用。
每年流行的設計風格是不一樣的，專注視覺展現的產品來說，可以追隨設計潮流，展現最新的設計風格是沒問題的。但是像 B 端產品，風格迭代是要有時間周期的，而且大部分比視覺風格的周期要長，所以每次大改版的時候，要考慮未來的設計趨勢。
剛才我也提到了，最佳方案永遠不止有一個，找到適合自己產品的就可以，如果有一些方案都覺得不錯，可以做 AB 測試，選出最好的方案做產品化。
鼓勵多看、多學，自己思想加工好了融合到產品中，而不是一味地直呼：這個設計真 NB！我也要用！
字面意思很好理解，之前我們都說設計師是感性的，但是當設計與商業結合，就不能是純感性的了。任何的產品設計都是基于數據、基于市場需求。我們大部分設計師都不是藝術家，都在為連接商業而努力。
而且設計師也在向理性化慢慢發展，拿設計師的價值來說，之前是很難被體現出來的，現在因為和商業結合，價值慢慢的被體現出來、慢慢可量化了。
我們在做產品設計的時候也是這樣，基于調研和分析來做產品，而不是天馬行空，想到什么做什么。設計從感性逐步走向理性，也是一個成長的過程，一切以結果為導向，善用理性思維思考問題，會更讓其他人信服。一切設計都有理有據，和別人 battle 的時候也不慫~
ps：在和女朋友交往中恰恰相反，切記~切記~~
一切設計都是以結果為導向，YY 出來的飛機稿只能送到村東頭的廁所里。我們在腦暴設計方案的時候，一開始都是天馬行空，想到什么就寫什么，但是最終都會聚焦到產品上，縮小聚焦點，最后產出可落地的方案。
設計師的創新能力是很重要的，為什么企業在招人的時候，會更看重年輕一些的呢？因為他的腦洞是打開的，有更多的 idea 迸發出來。如果你只是循規蹈矩的維護產品迭代，遲早會被淘汰。
設計本身就是一個開闊腦洞的一群人做事情，所以早些年設計師的價值是無法被量化的，近幾年都在講量化指標、結果導向，設計師的價值也慢慢的被量化出來。
一個好的產品設計師輸出的方案不一定是最完美的，但是絕對是在能落地的基礎上接近完美的。不夠完美我們可以再優化，如果一直停留在 YY 層，永遠不能落地實現，那你的價值何在？
我相信大家在面試的時候也都感受到過，線上作品遠比飛機稿要重要得多，因為他可以驗證你的方案是可行而不是你自己 YY 的，公司招你來是讓你有具體產出的，不是來讓你當藝術家烘托氣氛。
我們經常會在大膽創新和為了功能上線的邊緣試探，哪怕是多一點點的設計元素加進去，也是我們努力的結果。
要記住，我們是設計師，在飛翔的時候看清邊界在哪，我們是帶領世界品味走向的一群人，可以創新不要妄想。
最好的設計就是不用設計，最好的設計是簡單的。
部分設計師在出方案的時候，為了凸顯自己的設計能力，會有意無意的增加一些裝飾元素設計，然而頁面的承載量是一定的，裝飾性的設計過多會直接影響用戶找到頁面中的重要信息。好的設計不需要過多的裝飾，蘋果的極簡風就很棒，一直沿用至今。
其實現在產品上并不是裝飾的重災區，作品集才是！我們團隊在招人，每天能看到大量的簡歷，確實有很大一部分人為了凸顯設計能力，把作品集做的五彩繽紛，整成了大雜燴，而且裝飾性的元素、樣機比以往工作項目的占比還要多，這不就喧賓奪主了嗎？這樣的作品集基本就無緣了~
在設計之前，一定要了解最終目標是什么，然后基于目標再拆分行動項，把不必要的內容直接砍掉，用戶在瀏覽頁面的時候，有效時間就 3 秒鐘，3 秒鐘沒有找到自己想要的內容，就會流失。
我們只會吐槽老板的那句：“放大放大再放大”。其實深入想一下，他只是想要突出一個點而已~
不要撿了芝麻丟西瓜。
設計中有很多很多的問題，我們也都是在不斷的摸索中成長，今天給大家分享了幾個典型的“罪”，希望引以為戒，哪怕其中一點對你有幫助，也不枉碼這么多字~
今日金句：
在非洲大草原上，無論你是獅子還是羚羊，每當太陽升起，你唯一要做的就是奔跑。
叮鈴鈴~~下課！
原文地址：友設青年（公眾號）
作者：Luckgg
轉載請注明：學UI網》設計的「七宗罪」
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“不行，這個必須在首頁！另外我還有倆新業務入口，你想想辦法”，業務方出于對流量的考慮，總是希望做加法。
“別整那么多沒用的，我就想找個xx，剩下從來不看的”，用戶出于效率體驗，總期望做減法。
加減之間，是業務與用戶對立而尖銳的需求，同時也是多類型服務產品首頁設計的重難點。今天，就以“58首頁設計”為例，與大家談談解題思路。
以58為例，一方面，業務工具屬性強，且用戶耦合性低。說人話就是，用戶都是來找工具的，但由于AB業務關聯度太低，用A業務的用戶幾乎不會用到B業務，AB業務分別擁有獨自用戶群。這也就造成用戶期望更高的推薦精準度，頁面上任何一個無關信息都是干擾，都是對連接效率的打折。
但另一方面，平臺上的業務很多，還都想在首頁曝光。而且隨著各業務設計師的不斷努力，連接的形式也在不斷豐富，視頻、直播、VR，從業務貼到聚合推薦，層出不窮。首頁面臨更大的信息承載壓力。
所以，這類型產品首頁最大的挑戰，就是“多業務的曝光需求和用戶的精準連接之間的矛盾”，如何才能在推薦技術不變的情況下，通過設計來應對挑戰呢？
既然是信息傳遞和收取之間的矛盾，那我們就從“人-場景-信息”的對應關系入手，分析信息在不同場景的優先級和適合的顆粒度。
人-場景-信息優先級和顆粒度
1、用戶分類
根據用戶需求分為三類。
1）預裝用戶：非自主下載，不了解產品功能
2）服務需求用戶：使用相對固定的服務
3）內容需求用戶：獲取本地或相關服務信息
2、按照用戶區分場景需求
1）預裝用戶：建立產品認知、保留用戶不卸載
2）服務需求用戶：更有針對性的服務展示，盡可能少的干擾信息
3）內容需求用戶：更多類型的內容展示
3、按照場景定位信息的優先級和顆粒度
1）預裝用戶：
采用運營曝光策略。保留一級主服務入口，幫助建立產品認知。同時曝光更多內容信息和留存向的運營功能，以提升留存率。
預裝型用戶信息
2）服務需求用戶：
采用目標服務曝光策略。保留一級業務主服務入口，方便業務切換。但擴展目標服務的二級信息曝光度，用以縮短路徑。同時增加動態服務模塊，來跟進用戶動作，服務于用戶。
服務型用戶信息
3）內容需求用戶：
采用平衡曝光策略。保留一級主服務入口，方便業務切換。同時擴展內容曝光度。
1、搭建擴展性框架：調整為頂部tab結構，釋放更多定位信號，增加曝光渠道。
原腰部tab是對“原首頁”內容的劃分，現將整個“首頁”置于第一個tab下，后續tab內容將與“首頁”并列，從而釋放更多獨立的曝光渠道。
2、使用更靈活的組件：變形金剛與瀑布流。
首先，金剛位是一級服務入口的集合，且處于首屏上部，是非常好的建立產品認知的模塊。將其原有打散在15個位置上的服務，按照大類聚合安置，更容易傳達產品的主服務是什么。
金剛位結構對比
其次，為了應對用戶精準簡的需求，金剛也可以做靈活變形，曝光更多目標服務的二級選項。
變形金剛位
而瀑布流方式也為更多樣的服務連接形式提供了承載能力。
列表與瀑布流
3、豐富的信息容器：
設計包含圖、文、圖文、VR、視頻、聚合類目、動態服務模塊等信息聚合方式的瀑布流卡片，同時加入即時推薦功能，讓瀑布流具備包容和靈活的特性。
4、整合平臺的運營能力：設計平臺級留存向運營中心。
以往，各業務線運營功能深藏在業務頁面中，用戶往往需要通過較長的路徑才能接觸到運營功能，且用戶也并不能發現平臺上所有運營功能。這種分散式分布的方式，使得運營吸引力和留存能力上都打了折扣?，F將所有業務的運營功能聚合，打造平臺的運營中心，使發現路徑更短，聚合吸引力更強。
原路徑&現路徑
從依靠推薦技術讓內容適應用戶需求，到設計靈活可變動的組件來適應chang場景的信息承載，我們希望可以在產品和用戶需求的矛盾中尋求更優的平衡點。
原文地址：58UXD（公眾號）
作者：環鐵藝術家
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
開始學習啦！
輸入文字。鼠標右鍵單擊，選擇變換——對稱，之后選擇水平，并點擊復制。
把文字鏡像復制一個。
整體旋轉90°，并調出符號面板。選中文字，鼠標拖入符號面板備用。
用橢圓工具制作一個正圓
之后選擇效果——3D——凸出和斜角。勾選預覽，調整角度和凸出厚度。
之后點擊貼圖，勾選三維模型不可見，選擇第3個面，符號選擇我們剛剛拖進去的文字，也就是新建符號，點擊縮放以適合，讓文字貼合畫面，點擊確定。
再稍微調整角度，調到合適的位置，就可以了。
之后對象——擴展外觀。
右鍵取消編組，再右鍵釋放剪切蒙版。
這樣就可以隨意更改文字顏色啦。
看起來步驟很多，其實操作起來還是很簡單的。everybody，學起來?。?
那小分享就到這里吧，下期再見哦~
原文地址：詩人星火宇宙（公眾號）
作者： 星火君
轉載請注明：學UI網》超喜歡，這個AI小技巧！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
s
另一種流行是關于星號和星號衍生圖形的元素，星號在拉丁語中的意思是小星星。無論是五角、六角或是八角、這個符號元素都會給人留下深刻的印象。太陽、星星、花朵、火花，星號的衍生圖形可以表達的意思比你想象得更多。
a
對四邊形進行四等分，作為一個容器或者說框架來進行設計很容易表達多樣性而同時又具有統一的秩序。但是要注意內部元素的簡化和整合，否則設計會散亂而牽強。
這個風格很有趣，很難去定義，但是你一看就能懂了，它的特點很明顯。往往就是伴隨著一個路徑的轉變，可能像一條扭轉的絲帶。通?？梢员磉_連續性的同時又具有轉換性的意味，就像某個重大時刻或者是一個關鍵的轉變，總之代表一個意義非凡的時刻。
對于設計師來說，沒有比圓形更基本的圖形了，兩個圓形相減得出的圈是十分簡單的操作，但是更是一種經典的組合。它可以代表永恒、完美、統一、循環、洞、通道等等，結合漸變或是其它形式的設計，又可以呈現出一種新的意義?？傊?，這個形狀所蘊涵的能量還有很多很多！
原文地址：設計師深海（公眾號）
作者：設計師深海
轉載請注明：學UI網》2022年LOGO設計新趨勢
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
沒有想法？沒有好的配圖？那么就只需要用到萬能的黑色和白色，就可以迅速獲得一個具有正確構圖的“抽象主義設計”。在作品中善用黑白將幫助你理解平衡、留白以及如何使用文字和幾何圖形。
讓我們快速看一個例子，黑白的運用對作品的展示簡單而有效，看起來就很高級。
我喜歡用我自己發明的“東西”來測試我的設計，我稱之為“平衡方案”。這是一個黑白的內容塊方法，我會用簡單的幾何圖形來代替內容。
我的這個方法是讓黑色塊蓋住元素，然后計算左右的黑色面積，大致相等的話，就視為平衡。如果把這個原理應用到界面中，會得到這樣的結果：
用黑色矩形替代主要內容，灰色是次要內容。顯然你必須靠眼睛觀察，但其實我們也可以直接計算。左側區域的黑色矩形面積之和為（236×138）+(934×132)+(674×44)+(313×69) = 207109px，右邊的大矩形面積為（446×446） = 198916px。他們之間的差別很小，誤差只有3.9558%
我現在在設計之前不用去計算，經過多年的練習，這種意識就變成了自然而然的事情，因為你的眼睛會感覺到不平衡。
（彩云注：關于視覺平衡，這里其實講的是視覺面積要大致相同，人眼才會感知到平衡。正好彩云在上一篇文章《為什么你的設計總感覺不舒服？很可能是視覺平衡沒有做好》中有分享更全面的畫面平衡知識，一定要讀一讀了。）
我在前面那個例子中是用了一個灰色的背景來展示設計作品，但其實可以嘗試不同的元素，這有助于增加畫面空間感和背景效果。
但要注意，在一個真實的網站中，頁面周圍可能沒有這么多多余空間，所以這只是一個作品展示技巧。
在上面這個作品展示中，咖啡豆給人的感覺是有深度和有品質的。
不用浪費時間整天去測試尺寸。我建議段落文字尺寸大約是14-18pt，副標題是24-36pt，標題可以用更大一些的字號（我個人是習慣用96-144pt）。Figma的默認大小非常適合排版。
上面的尺寸看起來太小，這也正常，因為你在手機上看到的圖，在電腦上全屏看就是正常的。
注意：有些字體比其他字體大或小得多。你應該使用像Roboto這樣的標準字體，如果字體大小跟14-18pt的Roboto差不多，那么它是完美的正文字體。
段落18，導航24，標題96
（彩云注：我建議剛入行不久的小伙伴，比如不知道網頁規范，移動端規范，一個比較快且行之有效學習規范的方法就是去截圖大廠的應用，網頁和APP都可以。然后，對著截圖直接量就好了，記住人家在做界面的時候，字體用多大，什么顏色，間距，字號等等。記住這些參數，至少不容易出錯了。之后，在自己項目中自定義規范，關于設計規范如何制定我之前也專門寫過文章，想了解這塊知識的一定要去看看《原來設計規范要這樣理解，早知道就好了！》）
如果你有一些透明的圖片，可以利用它們來設計一些3D圖層。如果你沒有，你可以使用remove.bg ，網頁版AI自動摳圖，神器！
作為CSS中的Z-index，你可以將透明圖片放在其他項目的后面或前面，給人一種三維的錯覺。這對增強設計感來說，是非常有效的。
讓我們看看我使用這種技術的一個簡單設計。
鳥嘴巴從綠色背景中出界到黃色背景中，強化了整體的視覺沖擊力。
明亮的顏色很棒，但沒用好的話，往往會導致激進的設計和糟糕的畫面。此外，淺色設計（性冷淡設計）如今非常流行，所以讓我們開始嘗試顏色選擇器的一個新區域。
在這個紅框范圍內可以快速選到一些比較好的顏色
兩種配色都沒有啥問題，這是一個審美的問題，但如果你想要表達一些更高級的設計感覺，可以嘗試淺色。
在我看來，大的留白比太少的留白要好。雜亂滿檔的設計很糟糕， 呼吸感可以通過多種方式獲得：
更大的留白（在上圖中指的是黑色區域）會顯得更加高級。
通常當我們思考設計時，我們想到的是干凈、流暢、清晰的概念。但太干凈的畫面會讓人感到不真實，缺乏質感。
在設計中，噪點是一個很好的朋友，尤其是當你想給你的網站有一個優雅或藝術的外觀時。此外，應用一個微妙的噪點讓畫面能有一個電影級的外觀，這種處理手法非常適合用在視頻和動態網站中。
你可以使用Photoshop在白色背景上創建2-4K大小的雜色-高斯分布的紋理，然后將它放到頁面的最上層。
整個網頁中都增加了一些噪點，這讓畫面整體擁有更強的質感。（這里噪點的效果比較微妙，小圖可能看不清，放大可以看到噪點效果）
其實有很多設計的比較糟糕的字體，尤其是那些預裝在我們電腦上的字體。可以從網上找到很多優秀的第三方字體，但是要小心:很多字體都不是免費的，沒有授權就使用它們可能會給你帶來麻煩。不過，別擔心，可以從這個網站中找到很多免費的字體 https://alternatype.net
有很多不同的字族和風格，但總的來說，我把它們分為三大類:
常用的襯線字體，如Abril Fatface, Playfair Display, Volux, Chalga等。
無襯線字體包括Metropolis、ITC Avant Garde、Redwing、Takota、Gotham….
這可能是最難使用的技巧，但如果使用正確，它定會大放光彩。
使用幾何圖形有助于加強概念和布局中的順序，甚至不需要配圖。找到合適的幾何形狀是困難的，我至今仍然不能很好地掌握它。
一個好用的技巧是將文案中的字母、數字和標題作為幾何形狀:讓它們變得巨大而巧妙，或者使用一些特殊的字母作為形狀(A很管用)。（這個技巧非常實用，彩云經常在一些視覺內容較少的頁面，用一個大的幾何圖形比如大寫的字母作為底部背景，用很淺的顏色，看起來視覺上就能更豐富了。）
本文翻譯已獲得作者的正式授權（授權截圖如下）
原文地址：medium
作者：Lorenzo Doremi
譯文地址：彩云譯設計（公眾號）
譯者：彩云Sky
轉載請注明：學UI網》老板說作品沒有設計感，這10個優化技巧簡單有效，你一定要知道
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
狼人殺作為聚會必備推理類桌游非常火爆，“一入狼坑深似海，從此節操是路人”。
一局APP自研時下最火的線上桌游【一夜狼人殺】，這款桌游不同于以往邏輯推理版狼人殺，沒有夜里死亡，適合休閑娛樂，滿足每個人的參與感，更像是真相探索游戲。
本文以制造積極情緒、打造體驗峰值為設計目標，設定游戲世界觀，構建游戲故事背景，繪制精美插畫，賦能魔力特效，打造標桿小游戲。解密小游戲設計秘籍，接下來讓我們揭開小游戲設計的神秘面紗吧。
1
歡迎來到一夜狼的世界，夜幕降臨，一群身懷絕技的冒險者們準備在幽暗的森林里度過一夜，明天即可到達森林中心，那里的古堡中有古老家族遺留下的寶藏和數不盡的財富。但隊伍中一直隱藏著狼人和他的同伴，他們準備在今晚發動襲擊，伺機奪取寶藏。幸存的幾位冒險者在夜里暗中施展絕技，要在到達古堡的前一天，揪出隱藏許久的狼人，以保證能夠順利取得寶藏……
結合故事背景設定，以易用性原則為基礎，加入情景化設計，在【觸發期】制造驚喜感，合理布局，明晰操作，快速上手游戲；【興奮期】代入沉浸感，黑白場景切換，沉浸游戲；【結束期】凸顯成就感，高光時刻，強視效感知，勝負判定。
美式輕寫實風格，以游戲背景與角色設定為依托，提取古堡、巖石、沙漏等關鍵元素貫穿整個游戲界面設計。
卡牌作為整個游戲的靈魂，代表玩家的身份，同時也會做成實物卡牌周邊，作為獎品發放給玩家。身份角色設定：共計9個角色，分為三大陣營。好人陣營：預言家、守夜人、搗蛋鬼、強盜、失眠者、酒鬼；狼人陣營：狼人、爪牙；第三陣營：皮匠。
人物形象根據角色職業技能進行設定；設計風格為強氛圍感的美式魔幻風格，突出卡牌氛圍感并保證人物清晰度，角色比例選擇展示腰部以上，角色以正面和四分之三面為主，角色的姿態和樣貌根據角色設定具體設計；三大陣營以邊框和氛圍顏色做區分，同陣營邊框（除道具外）不變；卡牌設計包含底框、邊框、角色，道具設計在邊框頂端兩側，根據角色替換。
卡片設計拆解
三大陣營設計
卡背設計
運用動效手段在游戲的關鍵節點打造峰值體驗，刺激用戶游戲情緒，快速帶入游戲人物和情節。
[觸發期]-[情緒帶入階段]
引發好奇心，極具儀式感的動畫（發牌和確認身份）推動用戶快速進入游戲氛圍，感知游戲。
[沉浸期]-[情緒沉浸階段]
流暢的操作體驗和反饋、場景轉場動畫提升游戲沉浸感與趣味性。
[結束期]-[情緒滿足階段]
通過整場的懸念鋪設，在最終的結果公布緩解來到情緒的高峰時刻。
游戲體驗情緒變化曲線
儀式感渲染-模擬牌桌發牌，卡牌掉落的過程，表現卡牌質感和厚度在現實世界中的感受，身份確認動效添加強烈的反轉效果刺激用戶，不同陣營不同的色彩傾向強化對抗感知。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2021/11/ezgif-5-727d86881a8f.gif)
游戲體驗沉浸感-流暢簡單的操作體驗和環節轉場動畫明確游戲進度，降低游戲難度給玩家帶來的焦慮情緒，強烈的操控感與燒腦懸疑玩法結合，使游戲體驗心流曲線趨于專注、樂趣、享受。動效平緩削弱視覺刺激保證玩家的專注。
游戲體驗心流區間
白天黑夜場景用日月升起和場景氛圍的變化提示玩家環節的轉換，在平緩的游戲感受中自然的進入下一環節，沉浸在游戲線索思考和角色代入中，仿佛一切變化都是理所當然而不會因為意料之外的事件發生導致分心。
游戲體驗情緒高峰時刻-經過正常的懸念鋪設，最終在結果展示環節用強烈的光感和卡片破壞動效，引導用戶產生強烈的成就感和刺激感。并在此環節中游戲情緒達到了高峰時刻。
動效設計過程中運用了粒子插件、輝光插件，以及一些偽3D的技法。為了保證落地效果，技術使用游戲引擎開發，設計師采用拆解組合標注的方式交付研發-動效標注（代碼實現，如位移、簡單粒子效果）+序列幀&MP4視頻。最終達到了80%還原度。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2021/11/ezgif-5-227d2907a829.gif)
作為第一款自研游戲，我們分為三條線：UI、主美、動效，緊密協作，聯合研發同學還原設計效果。游戲上線后，取得了一定的熱度，大大提升了一局的日活躍量。后續我們會繼續將業務目標與設計目標相結合 ，逐步迭代，提高游戲體驗。
原文地址：百度MEUX（公眾號）
作者：文娛平臺用戶體驗
轉載請注明：學UI網》游戲UI設計項目分析–狼人殺
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Semi Design 是針對抖音的中后臺產品線進行研發的設計系統，其目的也是為了解決 抖音 一系列的中后臺產品的效率問題。
而 Arco Design 是基于 字節跳動 所有的中后臺產品，其前身是 Byte Design 升級而來，能夠看到二者的定位是截然不同，一個是基于抖音產品，一個是基于 字節 這家公司，因此在后續很多內容的不同，根本也是因為定位所造成的。先說說這兩個系統的具體功能。
當看到這個工具時，其實是非常激動，作為設計師，對于一個設計系統樣式上的細微調整早就已經深惡痛絕，如果可以，自己絕不想通過前端之手進行“實現”，但以往的 Element 方式似乎又有些許麻煩，且能力不足。當我使用兩款系統過后，都給到了我不少的驚喜。
首先是Semi，顏色自動提供 WCAG 檢查，讓你能夠快速看到自己設定的顏色究竟是否合理；設計系統的引用關系，可以了解到設計系統顏色之間有哪些不同；圓角的可視化編輯，可以快速知道修改過后的最后實現樣子。每一個功能都是設身處地的為設計師考慮，在日常的工作當中經常會遇到的問題，但是也會有些許的遺憾。
比如：可定制的組件內容實在太少，目前能夠提供給用戶定制的只會有：顏色 、 字體、圓角、陰影，想要從 Semi Design，到 Any Design 還是會有一定的距離；Figma 插件還未上線，確實不能夠與設計軟件進行快速打通。不過官方已經回復說插件正在審核，期待它的后續體驗。
當我用了 Arco 的主題風格配置過后，我覺得可以好好來說說。簡直太牛了！可以編輯的維度從基礎的顏色、字體、陰影、 到 組件的按鈕、導航、分類、表格 一共有接近40款組件，并且都是可以進行可視化編輯與調整的。如果你用了 Arco 過后，或許不用苦苦的站在前端后面，讓他幫忙調整頁面，作為設計師自己就能夠搞定，并且每一個組件可以調整的粒度是非常之細，包含 各種寬度、圖標大小、顏色、投影，等等…
真的有些顛覆！假如你需要去定義一個官方的設計系統，完全可以通過 Arco 進行搞定。
仔細閱讀文檔，你會發現文檔這次文檔對于設計者而言，更加的友好。首先你可以通過 組件設計，去了解到每一個組件的具體構造，這是很多基礎薄弱的設計師能力欠缺的一個點
其次對于 組件狀態、何時使用、交互行為 都解釋得非常清楚。之后有人問我關于組件相關的問題，我只需要給他扔一個鏈接過去就可以。
并且兩個系統都支持查看組件的更新記錄，作為一個剛面市的設計系統，調整修改是在所難免，因此提供這樣的入口確實能夠使用體驗上更為高效。
關于文檔的細節以及具體的書寫質量，這個只能在后面深度使用過后給到大家反饋，在說說 Semi 與Arco 在文檔上的不同，你會發現 Semi 在整個文檔內只會有對 組件的使用細則，而 Arco 則提供了：設計價值觀、設計原則、樣式指南、組件用法，Semi 缺少了設計系統靈魂的這一部分，也就意味著在項目資源的投入上兩者還是會有較大不同。
什么暗黑模式、國際化 就不做不過介紹，感興趣的同學可以自己去官網體驗體驗。最后說說兩者的差異和自己的感受。
其實早在20年的時候，我就已經看到 Semi Design 的原形，但當時看到整個官方文件有點簡陋，不過今天看這個設計系統，成熟度還是蠻高的，無論的整個組件的質量，又或者是 Figma 當中對于Variants 的支持，暗黑模式的探索（老實說，我覺得暗黑模式的場景不會特別多），也能夠看到抖音設計團隊在這個系統的付出。
當然，在整個設計系統查看下來，發現 Semi 仿佛是一個半成品，因為缺少了設計系統最為重要的設計價值觀與原則、整個頁面模版，因此對于這個內容本身還是抱有一些小小的遺憾。不過從定位上來說，我覺得也是非常合理。
因為作為服務于抖音產品線的設計系統，其實無意去和一些國內外的著名設計系統進行對標：比如 支付寶的 Ant Design、Google 的 Material Design、SAP的 Fiori 更多是從自身實際問題出發，去解決在產品研發過程當中的一系列問題。而比肩國際設計系統的任務，交給了老大哥 Arco Design 上，同樣能夠在 Arco 上看到字節的野心，嘗試去搭建各種生態：圖標、物料、風格配置。很顯然對于我們用戶而言是一件好事，因為有競爭才會更快發展，我們之后在設計系統的選擇上又可以多一個選項。也希望之后能夠發展的越來越好。
兩個系統名字的由來：Semi 取自英文的詞組，寓意 “一半”，表示在一個企業應用是有業務邏輯與前端界面構成，希望Semi能夠成為前端頁面不可獲取的一半。
你知道 Arco 設計系統名字的由來嗎？
原文鏈接：CE青年（公眾號）
作者：CE青年
轉載請注明：學UI網》聊聊上周很火的設計系統“兩兄弟”
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn