作者：黑馬青年
轉載請注明：學UI網》UI 中國首頁推薦作品集
考拉海購，前2屏表達內容，2屏之后全是feeds；
小紅書更不用說了，第一屏就直接開始種草了；
②巧用折疊與展開，進行非重點內容的隱藏；
③內容區域進行多層信息疊加，比方說Instagram的發布
④利用轉移的手法，將復雜的內容用新頁面進行承載，如下圖豆瓣
3.利用好導航結構，同樣的屏幕可以表達相同等級的多種內容；
4.做模式區分，在任務模式下隱藏不必要的信息。如美團外賣在滑動過程中會隱藏購物車。因為用戶當前聚焦的是瀏覽內容
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
作者：Sophia的玲瓏閣 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在B端產品做設計的時候，第一件事是決定界面的結構布局，導航放在哪成為一件亟需要考慮的事情。典型的，有橫向導航與縱向導航之分，拿ant design來舉例，如下面2張圖所示；
兩者看起來都行，但選擇哪個，心理會有第一眼的直覺，但光有直覺不行，還得羅列個123出來，這樣展示方案的時候，才能服己服人。
橫向導航
優點：
通常使用比較少的菜單，簡單，容易記憶；
位于頁面頂部，不占用橫向空間；
由于位于頂部，在視覺上更突出，更容易識別；
菜單選項之間視覺權重的區分更明顯，左邊最強右邊最弱；
缺點：
擴展性有限，不能很好的承載大量和多層級菜單；
占用屏幕高度，特備是當固定于屏幕頂部時；
來回切換菜單選項時，橫向移動鼠標的距離更長，操作效率更低；
縱向導航
優點：
能夠承載的菜單項數量和層級更多，擴展性強；
不占用屏幕高度且可以收起，為內容提供更多空間；
在菜單間切換時鼠標移動距離短；
能夠更好地適應屏幕寬度較小的設備；
缺點：
菜單數量多層級復雜時，不容易記憶；
菜單選項文字不宜過長，可能會截斷；
各菜單選項之間的視覺權重差別不明顯。
他們都可以在已有的方向上進行擴展，如下圖
橫向導航擴展
但總體來說，單獨的橫向導航方式層級不能超過3層，多于3級就不利于用戶的閱讀和選擇。
縱向導航擴展
相對于橫向縱向的拓展性強，不管多少級都可以一致往下加，但層級高過于3層，用戶對導航的分辨和記憶會明顯下降。
當然，有時候單獨只有橫向或者縱向一種導航不能完全滿足我們的需求，他們有那么，根據以上特點，我們也可以有如下組合的形式。
組合導航
很明顯，這樣的組合導航，適用于一級導航不太多（做好少于5個）且內容權重差別很明顯，一級導航之后的導航內容和層級比較多且內容復雜。
另外，如果嫌縱向導航占空間，則可以考慮將縱向導航做成可折疊收起的模式，適用于貼著瀏覽器的縱向導航。
可折疊的縱向導航
總結一下：
橫向導航易記憶、易看，各導航權重區分明顯，越靠左越重要，但切換效率慢； 2.縱向導航擴展性強，可折疊，各導航權重區分不明顯，切換效率更高；3.如果兩者都不能單獨滿足，可嘗試組合的形式。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945
作者：Sophia的玲瓏閣 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
有段時間沒有寫UI動效相關的文章了，之前寫過一篇《超全面！動效設計標準與規范》的動畫文章，里面會講到一些更具體的參數范圍，實用性拉滿，看完就可以用到你的動效調優里，干到擰不出水。今天的這篇更偏方法一些，強烈推薦你把2篇結合一起看，效果更佳！
如今對用戶來說，好的體驗是界面一致、易讀和簡單。設計師要如何才能讓UI更加符合用戶的自然直覺呢？
動效，可以讓界面變得更加自然，填補部分體驗上的隔閡。今天這篇文章會講到常用的12個UI/UX動畫原則，幫你做出富有樂趣的界面設計。
”緩動“指的是在一個動作在過渡中進行的方式。你可以把緩動理解為加速或減速。一個物體可以從界面的一側緩慢啟動，然后加速，最后到另一側突然停止。或者，物體可以快速啟動，然后逐漸減速到停止。關鍵幀表示了動畫的開始和結束，緩動決定了中間過程。
將緩動應用于補間動畫的一種簡單方法是使用“屬性”面板(彩云注：這里彩云還專門去查了下資料，這個功能是AE的一個Beta版本的功能，叫 Properties panel，可以很方便的修改屬性) 。緩動值的范圍從 –100 到 100。負值會從起始位置產生更平緩的變化（稱為緩入）， 正值會導致逐漸減速（稱為緩出）。
（彩云注：在我們現在用的AE正式版中，可以直接修改緩動屬性然后配合曲線也可以修改緩動幅度，如果有體驗過Beta版本的同學歡迎文末留言交流呀）。
Saptarshi Prakash
當多個UI元素同時移動時，用戶傾向于將它們分組在一起，而忽略了每個元素都可能有自己的功能。
偏移和延遲在同時移動的UI元素之間創建了層次結構，并說明它們是相關的，但又是不同的。不同于完全的同步，元素的時間、速度和間隔是交錯的，從而產生了微妙的“一個接一個”的效果。（彩云注：動效本質上也是為了打造層次感，其實這又是上2期講的底層設計原則的應用之一了。所以，我們在看一個知識點的時候，要學會系統性地去思考）
當用戶在屏幕之間切換時，偏移和延遲表明存在多個交互元素。
”父子關系“意思是將一個UI元素的屬性鏈接到其他元素的屬性。當父元素中的屬性發生變化時，子元素的鏈接屬性也會發生變化。所有元素屬性都可以相互鏈接。
例如，父元素的位置可以綁定到子元素的比例。當父元素移動時，子元素的大小會增大或減少。
父子級創建了UI元素之間的關系，建立了層次結構，這樣方便用戶同時與多個元素互動。在實際交互中，這種形式非常有影響力。
Ayoub Kada
變換發生在一個UI元素過渡到另一個UI元素時。例如，一個下載按鈕變換到一個進度條，進度條完成后轉換成完成圖標。
從用戶的角度來看，變換是顯示用戶與目標相關狀態的有效方法（保證系統狀態的可見性）。特別是對于UI元素有從開始到結束狀態變換時，這種變換動效尤其有用。比如說這里的文件下載動效。（彩云注：做這樣的動效是有效的，對于用戶體驗的ROI很高）
Y.J.Y
數值變化動效（數字、文本或圖形）在界面中非常常見，比如在銀行APP，日歷，電商網站等等各類產品中。這些變化與現實中用戶的需求產生關聯，所以可以隨時被調整變化。
這種數值變化表明了數據的動態性質，動效告訴用戶數據是可交互的。如果沒有這些動態變化時，用戶的參與意愿會降低。
Creative jeff
滑動和變焦這樣的動效可以讓用戶在界面的UI元素中”旅行“，能增加畫面的層次細節。
維度使UI元素看起來好像有多個交互面，就像物理世界中的對象一樣。這種行為是通過使元素看起來像是可折疊的、可翻轉的、浮動的，或賦予現實的深度屬性來實現的。
作為一種敘事手段，維度意味著UI元素的不同側面是連接的，并有助于無縫的屏幕轉換。
Sang Nguyen
當兩個（或更多）UI 元素同時移動但速度不同時，會產生視差，其目的是建立層次結構。
視差將用戶引向交互UI元素，同時允許非交互元素留在屏幕上，并保持設計的統一性。
Netrix
想象一扇磨砂玻璃門， 它需要互動才能打開，但也可以隱約看到門后面的東西。
模糊效果也是如此。它為用戶提供了一個需要交互的界面，同時顯示屏幕提示，引導用戶聚集。導航菜單、鎖屏和文件夾/文件窗口中都有經常被使用到。
magazineduwebdesign
克隆是一種動態行為，把一個 UI 元素分裂成其他元素。這是一種突出重要信息或交互選項的聰明方法。
當UI元素在界面中具體化時，它們需要一個清晰的原點，用來鏈接到已經在界面上的元素。如果元素突然出現或消失，用戶就很難清楚地記住上下文。
Interface Market
在2D空間中，沒有所謂的深度，UI元素只能在X和Y軸上移動。疊加在UI的2D空間中創造出前景/背景區分的錯覺。通過模擬深度，疊加可以根據用戶需要隱藏和顯示元素。
在使用疊加時，信息層次結構是一個重要的考慮因素。例如，用戶在筆記應用中首先看到的應該是他們的筆記列表。然后，疊加可以用來為每條消息提供次要選項——比如刪除或保存。
蒙版是對UI元素的部分進行顯示和隱藏。通過改變元素的顯示區域，蒙版區域產生變化，同時允許元素本身保持可識別。因此，照片和插圖等視覺元素非常適合用在這種動效上。
從可用性的角度來看，設計師可以使用蒙版，給用戶反饋，讓用戶知道每一步操作的反饋和進度。
By Min-Sang Choi
原文：https://bootcamp.uxdesign.cc/12-principles-of-ui-ux-animation-you-should-know-75cf41e49e62
作者：Ayoub ┃Marhouse
譯者：彩云Sky
本文翻譯已獲得作者的正式授權（授權截圖如下）
作者：彩云Sky
轉載請注明：學UI網》這12個常用動效方法，很適合用到你的界面里
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
排版的難點在于，如果完全不用技巧，很容易顯得單調；而如果大量地堆砌技巧，就會導致版面花里胡哨，降低了傳播和閱讀的效率，如何去把握好這個度，達到事半功倍的效果，是設計師需要長期學習、研究的事情，下面蔥爺給大家推薦一波優秀的日式商業海報，排版雖然簡簡單單，但是很好看，且層級分明，視覺感受和閱讀體驗都很輕松。
作者：蔥爺
轉載請注明：學UI網》排版不必花里胡哨 | 設計技巧
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在APP設計中，對頁面的某些元素、內容也加上手機傳感器，不僅可以使得這個功能/設計更加有趣，對于業務上的相關指標也是有積極作用的。
本次幫大家盤點一下，手機傳感器在APP設計中的體現與案例。
愛奇藝進入全屏播放模式下，用戶只需旋轉手機，就可以360°任意角度看視頻，通過左右滑動屏幕調整觀看區域。
減少單一視角下給用戶帶來的限制，對于沉浸式、可隨便更換觀看視角的用戶是一大利點（特別是觀看愛豆的MV、演唱會時）
B站的一些特定的音樂視頻，如熱門/有趣的音樂、播放量特高如100萬、純音樂視頻沒有旁白之類的干擾等等。
播放時手機會識別音樂的旋律而進行震動，臨場體驗感極強！
通過設置手機的‘震感交互’來提升視頻的消費性/娛樂性，這個‘跟隨震動’是可關閉的，而且聽說蘋果手機至少在8以上（安卓未知）
還有微信的朋友圈廣告：可以進行360度全景觀看廣告內容，
利用手機重力感應器，搖動手機則轉動封面內容，點擊封面則進入更加沉浸式的全景頁面頁。
在線下使用支付寶的收款碼時，把手機傾斜對著別人，收款碼和下方的文字「支付寶掃一掃，向我付錢」會自動進行翻轉。
讓文字正對著付款方，對方看起來不那么別扭，特別是對于首次掃碼付款的人來說，大大減少操作成本。
打開QQ音樂的「聽歌識曲」功能，不僅能識別外部環境的聲音，還能檢測其他帶有音樂or視頻的第三方APP中的歌曲，特別方便。
用戶聽到喜歡的歌曲又不知歌名、沒有多余設備幫助識別的情況下，既不用麻煩別人又能快速識別，極大提升操作效率
某閱讀APP（忘記叫啥了），在’我的’頁面會默認開啟手機陀螺儀，里面的的’簽到’圖標會根據用戶手機的擺動進行旋轉。
通過重力感應吸引用戶注意力進行簽到，減少簽出漏斗和用戶流失。
emmo的【登錄與注冊】頁上被設置了重力感應，頁面中的表情球會會跟隨手機搖擺方向進行滾動。
通過表情球的滾動吸引用戶，降低退出【登錄/注冊】的頁面漏斗，也提升了產品整體的趣味性、登錄/注冊成功率。
騰訊手機管家的充電界面，不僅會顯示水位隨著電量的上升或下降，還可以利用手機的【重力感應】改變小黃鴨的游行方向，特別有意思。
用戶在充電狀態下也可以使用手機打發時間，給用戶帶來驚喜。同時突顯產品的個性化服務與對用戶的重視程度
喵喵記賬有個設計挺有意思的，按下相機拍照后，需要晃動手機來使相片成像，才能看到影像慢慢顯現，很有儀式感又有趣的互動體驗。
通過連接現實生活感受，使成像過程具備儀式感與趣味性
進入好好住的個人中心，在個人主頁上會掉落用戶獲得過的勛章， 并可跟隨手機陀螺儀的晃動而左右滾動。
通過重力感應增加個人中心的可玩性，引導用戶獲得更多的勛章并帶來驚喜。
作者：和出此嚴
轉載請注明：學UI網》加了手機傳感器后，這些產品/設計變得有多牛？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
百度APP作為移動生態的搜索信息服務產品，用戶會在什么場景想到百度APP并使用它呢？
十幾年前，精力有限睡眠有限的打工人不惜犧牲睡眠時間，也要設置凌晨3點的鬧鐘；上網時間被嚴格控制的學生黨也要注冊五六個QQ小號，目的很明確：到點“收菜”，蹲點“偷菜”。十幾年后每天早上睜眼先去螞蟻森林收收自己的“能量”，再順路去螞蟻莊園喂喂小雞，安排很多手機號碼來種水果……各家產品通過帶有游戲氛圍的運營活動把產品的服務和功能以趣味化的方式傳遞給用戶，讓用戶“薅羊毛”拿福利的同時也給產品帶來增長價值。
本文以百度果園為例，從長線運營增長視角分3個方面分享運營活動玩法如何設計，如何幫助百度APP持續提升用戶活躍和用戶留存：
1.建立心智：讓用戶相信百度果園的真實性，愿意參加活動，安全的“薅羊毛”；
2.養成習慣：根據用戶不同的屬性，設計玩法讓用戶養成來百度果園澆水的習慣，實現百度APP的長期留存同時把“羊毛”薅到手；
3.平衡：種植真實性+趣味化的方式傳遞給用戶，實現產品增長和用戶福利的雙重價值，“羊毛”薅不停。
1、心智建立：讓用戶相信百度果園的真實性，愿意參加活動，安全的“薅羊毛”；
A 從新用戶視角打造真實性：新用戶上我們區分兩個用戶角度進行設計：
B 精細設計果樹成長階段，與真實場景貼合：
為了營造更加真實的種植體驗，我們在百度果園視覺呈現上也進行了升級，整體視覺效果與真實果樹成長的6個階段（種子→幼苗→大樹→開花→果實→成熟）更加匹配，建立更加真實的果樹成長過程，追求合理性和沉浸感，并且細化每一個不同水果對應的樹、花朵、果實形態，讓用戶在參與活動的過程中體驗果樹成長到成熟的真實感受，也是在視覺效果上形成百度果園的特色。
C 貫穿全流程的澆水動畫增加真實性：
2、習慣養成：根據用戶不同的屬性，設計不同玩法讓用戶養成來百度果園澆水的習慣，實現百度APP長期留存的同時讓用戶把“羊毛”薅到手。我們參考百度果園線上老用戶數據，把用戶分成3類，分別根據他們不同特點進行針對性的玩法設計：
A 沉默用戶喚醒：
「澆水挑戰領水果」玩法參考上癮模型進行設計，從push滲透入口到用戶，基于「稀缺」核心驅動力讓用戶產生興趣，引導用戶進入活動；當用戶進入果園后，通過大轉盤抽獎的方式繼續抓住用戶的注意力，持續利用「稀缺」「緊迫」心智讓用戶進入活動開始體驗玩法。開啟澆水挑戰后果園首頁上方增加明確的澆水進度提示，讓用戶了解整體玩法進度，從而建立收獲獎勵的信心。
B 忠實用戶-豐富游戲玩法：
百度果園是一個長線養成類運營活動，為了讓老用戶持續保持新鮮感，我們在果園里增加具有趣味性的「瓜分水滴」玩法，是參與兩日就可獲得獎勵的輕量化的玩法。第一天用戶進入「瓜分水滴」活動，通過大額水滴獎池吸引用戶的注意力，提起用戶的參與興趣，在行動操作上弱化付出成本突出行為動作，引導用戶點擊；用戶報名后及時提醒用戶打開訂閱增加觸達場景；并在彈窗上對付出成本與收獲回報進行對比，吸引用戶第二日再次打開百度果園參與領獎；在領獎的同時直接引導報名下一期活動，持續拉動用戶回流。
C 召回用戶-好友之間的互動玩法：
為百度果園賦予情感與故事性，好友社交上分兩步探索，第一步引導用戶去“偷”好友的水滴，在好友之間持續互動，水滴是貫穿百度果園整體玩法的重要代幣，好友的水滴被“偷”，就降低了好友“薅羊毛”的速度，但對用戶自己來說，“偷”水也需要“偷”的高效，我們在果園里增加了連續“偷”水動作，邊“偷”水邊把好友喊回來；為了豐富用戶的體驗感受，在好友果園跳轉之間增加了樹葉遮擋的動畫效果，動畫轉場同時也是替代小程序白屏轉場的好思路，營造了好朋友在果園之間串門的感受。
第二步好友互動持續升級，通過家庭合種的概念加強用戶之間的聯系，情感化的方式來提升用戶主動參與意愿，拉動身邊親朋好友一起加入“薅羊毛”的隊伍，一方面幫助用戶提升領水果的速度，另一方面也幫助百度果園在用戶上實現破圈。在玩法設計上我們區分3個視角進行設計：
3、平衡：種植真實性+趣味化的方式傳遞給用戶，實現產品增長和用戶福利的雙重價值，“羊毛”薅不停。
百度果園在上線一段時間后，我們思考如何能進一步豐富果園玩法，要幫助業務穩定ROI，同時也要在用戶角度上玩的更加有趣。我們從體驗、用戶、增長3個角度進行分析，為百度果園增加“道具”玩法：
結合百度果園自身可落實上，我們優先在可以提升用戶澆水效率，幫助用戶快速拿水果的道具進行試水，結合線下實際生活中的種植場景去思考，所以我們將道具名稱與玩法設定為「化肥」，在種植中增加化肥收益，提升果樹的種植進度，讓百度果園在玩法上更加生活化。
新玩法上線后，通過上線提示引導用戶去使用道具，用戶進入百度果園后先給到用戶一袋「化肥」來體驗玩法，讓用戶快速感受到道具帶來的實際價值，從而建立信任。用戶使用道具后，果園主頁直接破殼「化肥」道具的狀態，我們給到「化肥」道具3種狀態來描述使用情況；健康有活力的綠色狀態代表化肥的養分非常充足，果樹的成長速度加倍；橙黃色代表果樹的生長進度欠佳，需要用戶關注；紅色狀態代表果樹缺少養分，需要用戶去使用新的「化肥」，并在紅色狀態下我們直接破殼使用引導，直接提示用戶點擊。
隨著百度果園的進一步成長，能夠帶給用戶的不僅是“薅羊毛”類活動的概念，百度果園也會繼續向帶有社會價值與故事性活動內容延伸，更多的去賦予精神意義與社會意義；我們后續也會持續打磨、持續平衡產品收益與用戶情緒的價值，不僅僅是在“薅羊毛”，更會讓每一次的澆水、施肥和每收到的一箱水果都有自己的含義。
增長是產品商業化持續的目標，有了百度果園的經驗和設計思路，也為我們后續探索新的長線活動玩法提供了基礎和經驗，我們的工作也將持續充滿著挑戰和更多樂趣。
作者：百度APP用戶體驗
轉載請注明：學UI網》關于“薅羊毛”那些事兒——百度果園長線活動設計思考
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
最近 Behance 封停了國內賬號，導致很多設計師無法訪問，因此也流傳了很多解決方案。今天黑馬哥就不和大家討論這個解決方案了，其實有很多同學就算在能訪問的時候也沒看幾次~O(∩_∩)O~。
這個事件告訴我們，設計師的習慣是多么的重要，我們的設計靈感不能因為一個網站平臺而局限。退出賬號依然可以訪問，只是很多同學糾結的是自己的收藏沒有了，如果平時養成本地化采集的習慣，你就不會出現這個問題。我們不要把希望寄托在云端，只是買一個硬盤就能解決的事情，也不要覺得不方便，其實很多作品我們也不會經?？矗鎯χ皇菫榱瞬粫r之需。每年都對采集的作品進行一次整理，近兩年的放在電腦里面，時間過長的存儲在硬盤里面就可以了。主要還是要對作品進行分析，掌握作品的技法經驗和設計思維才是關鍵。
除了存儲習慣以外，我們也不要只是固定訪問一個網站獲取靈感，優秀的設計類平臺是很多的，我們要發現更多新大陸。下面黑馬哥為大家精選幾個訪問頻次較高的國外平臺，國內的大家都比較熟悉這里就不列舉了。
以下推薦一些個人比較常用的幾個網站，排名不分先后，屬于隨機性排序。
1、notefolio
notefolio 是韓國的一個設計交流網站，很多設計師都會在這里分享自己的設計作品和進行設計交流。和國內很多設計作品分享平臺類似，是一個綜合型設計師交流社區，有平面設計、UI/UX 設計、插畫、產品包裝設計、攝影、版式設計、數字藝術、美術、工藝等等。
2、Mobbin
這是一個匯集全球優秀 APP 截圖的網站，有超過 50000 個優秀 APP，節省了下載應用的時間，對于 UI 設計師來說非常實用。
同樣的應用還提供了 iOS 和 Android 兩個不同版本的截圖，簡直非常的人性化。這是一個使用起來非常簡單的網站，海量的設計必將開啟你的靈感腦洞。
3、Pinterest
這絕對是一個靈感采集的絕佳網站，經過眾多用戶的長期積累，已經匯集了全球大量的優質圖片資源，其中設計作品也是非常豐富，且質量都普遍偏高。
你可以通過關鍵詞搜索、畫板關注、以圖搜圖等操作獲得靈感，而且相似推薦還能延伸出更多類似構圖、配色、主題等圖片資源。點擊作品還能跳轉到原始出處，順藤摸瓜找到更多優質資源，真的是非常便利。
4、Designspiration
https://www.designspiration.com/
該網站除了通過關鍵詞搜索圖片內容以外，在搜索欄有?個調色板的圖標，點擊可以通過指定的顏色進行搜索相關配色的圖片或者設計。在選擇顏色的時候不是單一的色彩選擇，可以選擇幾個配?組合進行搜索，對于設計師來說?常實用。
5、Abduzeedo
Abduzeedo 是一個優秀的設計博客，提供給設計師創意和靈感的社區，這里有設計、攝影和 UX 等相關的文章提供給那些想尋找靈感的設計師。這是一個開放的設計社區，它是設計師日常的靈感來源。
6、UI Garage
UI Garage 提供了很多應用設計的截圖和模板，專業細分的類別和精挑細選的設計截圖，還有很多設計工具推薦，是一個非常實用的網站。在這里不僅可以獲得設計靈感，還能獲得優秀的設計工具或者插件來提高我們的工作效率。
7、Dribbble
Dribbble 相信很多喜歡 UI 設計打卡的同學比較熟悉，匯集了大量設計師的一些日常創意作品。該網站不同之處是發布作品需要邀請碼，就是需要有邀請碼的設計師邀請加入才能發布作品，獲得邀請碼也相當于設計能力獲得認可。
整體作品的質量還是不錯的，如果當你設計時沒有想法，這是一個不錯的靈感采集地。
8、ndc
這個網站展示了很多非常不錯的設計作品，偏向于簡約風。相信這些項目設計的靈感，可以帶給我們更多的設計思考。
9、FolioArt
FolioArt 是一個插畫藝術作品展示網站，擁有高質量的插畫作品，形式也多種多樣。就像一個插畫家的資源庫，讓有商業需求的客戶通過這個平臺，和世界頂尖的插畫師進行合作。
10、unDraw
https://undraw.co/illustrations
這里提供的插畫作品數量眾多，各種小場景的插畫無論是獨立使用，還是組合使用，肯定可以滿足很多場景需求了。平臺內置的編輯器還可以對插畫進行調色，導出格式也是支持后期編輯，非常的實用和便利。
設計的靈感來源途徑是很多的，不局限于某一個單一路徑，以上的推薦僅為拋磚引玉，還有很多優秀的網站給我們帶來設計靈感和經驗學習。每個人的關注焦點和選擇角度不同，以上僅為個人推薦，不足之處歡迎大家留言補充。
作者：黑馬青年
轉載請注明：學UI網》設計靈感不應該被一個網站而限制
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
或許你在推進體驗優化時，也遇到過以下困惑：“對于設計師走查出的體驗問題，為什么PM總是間歇性視而不見？”“PM既然認可了體驗問題的重要性，但是他為什么總說放一放，過一段時間再整改呢？”
“排除萬難，體驗問題終于提交了版本需求，為什么總是因優先級不高，無法獲得充足的開發資源，順利上線呢？”
我們在進行趕集直招體驗優化過程中，也時常遇到這些困惑，究其原因，主要是因為，我們作為設計師，每天所處的工作范圍和接觸到的信息有限，促使我們忽略了對產品階段的深入思考，誤以為PM對體驗優化和體驗問題的理解，和我們高度一致。因此在著手進行體驗優化前，我們要提升對產品階段的理解把握，知道所服務的產品處于哪個階段，產品發力方向是什么，進而準確找到體驗優化的推進策略。
在不同產品階段（探索期、快速成長期、成熟期），體驗優化的推進策略也各不相同：
處于探索期的產品，其發力方向為驗證業務模式。在這個從0-1的時期，其實不存在推進體驗優化的概念，設計師應盡可能進行完善的基礎體驗能力建設，如沿用成熟規范與組件搭建產品體驗，后續伴隨產品核心功能、流程驗證，同步迭代打磨；
處于快速成長期的產品，其發力方向為快速拉新拓量，縱向做好垂類。這個時期的體驗優化推進策略是，基于產品功能迭代，進行“小步快推”；
處于成熟期的產品，其發力方向為提升用戶活躍度，實現商業變現。這個時期更適合采取體驗優化專項，推進體驗優化。
可以看到，趕集直招目前處于“快速成長期”，因此我們選擇了“小步快推”的策略。
找準“小步快推”的推進策略后，具體的執行方法是什么呢？
辛向陽先生在《從物理邏輯到行為邏輯》一文中，提出了交互行為5要素的概念，即用戶、場景、目的、媒介與行為，以幫助設計師對問題進行準確解析和挖掘。
其實推進體驗優化，本身也可以理解成是一次交互行為的設計，因此在進行趕集直招體驗優化初始，我們沿用了交互行為5要素的概念，對趕集直招進行了解析，并挖掘出具體可執行的方法。
用戶：幫助中國4億藍領找工作的趕集直招；
場景：服務業逐漸復蘇，趕集直招在市場上已經被廣泛知曉和接受，市占率不斷上升；
目的：把控ROI前提下，一方面持續拓展用戶量，另一方面開始向商業化傾斜資源，謀求商業營收；
媒介：趕集直招APP，每3周迭代1版；
行為：深耕細分市場，不斷驗證新的業務模式，優化舊的業務模式，高速快跑與競品拉開距離。
綜上，我們總結出了處于“快速成長期”的趕集直招，3個顯著特征，和對應的體驗優化執行方法：
特征1：需求多而側重于垂類深耕→執行方法：提前規劃，全局視野；
特征2：資源傾斜商業化→執行方法：評估需求，整合策略；
特征3：版本迭代快→執行方法：流程調整，需求擴容。
提前規劃 全局視野
前期使用體驗管理工具，收集了大量體驗問題，我們對其進行聚類整合，匯總成《趕集直招體驗優化問題池》，并與PM進行對齊，探討優化可能性。
該階段的keypoint是：對體驗問題項進行判斷，是進行逐個優化，還是合并成獨立需求，統一優化。
評估需求 整合策略
承接需求時，我們需要對需求類型進行評估，趕集直招的需求通常可分為2類：
第1類是重產品側解決的需求，通常這類需求范圍較明確，PM有較完整的解決方案；
第2類是重設計側解決的需求，這類需求范圍較開放，給設計師發揮的空間較大，我們在趕集直招體驗優化推進中，主要錨定第2類需求。
在和PM了解需求背景和業務目標后，則進入解決策略梳理階段，通常PM會提出關于如何達成目標的種種產品策略和部分設計策略，此時我們會站在用戶視角，從目標出發，果斷衡量出其策略的更多擴展性，多維度思考，整合PM策略，并提出設計側的更全面的解決策略。
該階段的keypoint是：需與PM對齊一個思路，即體驗的優化與打磨也是達成業務目標的重要策略之一。
流程調整 需求擴容
在推進體驗優化的同時，我們對設計側與產品側的合作流程，也在不斷努力做出調整，以便為體驗優化爭取更多打磨的窗口期。
調整前的合作流程，設計側作為產品側下游，在產品原型分發后才會接到設計需求，且排期極度緊張，這樣設計側的重點會被牽引到快速支持當前需求，不利于體驗優化推進，為此我們與PMO、產品側積極溝通調整合作流程，設計側在產品需求內審后就前置介入，與PM一同經歷方案構思、分發與評審流程，為體驗優化爭取到了足夠的窗期口。
此外，對于產品側中遠期重點需求，我們會提前與PM對齊OKR，跳出版本節奏的限制，聯合多角色建立主題專項，規劃整體項目計劃，在過程中，對涉及到的體驗問題項，作為項目計劃的一部分，進行集中解決，這樣在PM撰寫需求文檔時，就可以將體驗問題項最大限度收入到需求范圍內。
給大家展示兩個我們推進過程中的小案例：
基于問題池中的首頁瓷片區體驗問題項，我們借著PM對瓷片區提出更換瓷片位內容的機會，將瓷片區的體驗問題項一并推進優化，對樣式和文案進行降噪處理，使其重要信息更清晰，數據也提升明顯。
推進年久失修的深層級頁面體驗優化是難事，但跟業務目標相關又對數據提升有幫助就會容易很多。PM給出的需求范圍和目標是“通過調整關鍵字段，提升簡歷預覽頁的感知度”，我們整合該頁面的問題池后，提出“感知度提升=關鍵字段調整+信息布局/按鈕/文案等體驗層面優化”，滿足需求的同時，也推進了體驗問題項的解決。
通過“找準推進策略-挖掘執行方法-推進3步走”3個層面的努力，在高強度的版本節奏下，我們用短短半年的時間，就實現了《趕集直招體驗優化問題池》中，大部分問題項的優化解決。從最終業務效果看，各項數據指標均符合或超過先前的預期，用戶滿意度也得到大幅增長，達成了本次體驗優化的預期目標。
總結一下，當我們計劃對產品進行體驗優化時，不要急于啟動。
首先，判斷產品當前所處的階段，找準推進策略；
其次，通過交互行為5要素解析產品，挖掘體驗優化執行方法；
最后，如果所服務的產品處于“高速快跑期”，可借鑒“推進3步走“的方法進行推進：
1.提前規劃，建立全局視野，與PM對齊，判斷體驗問題項，是進行逐個優化，還是合并成獨立需求，統一優化；
2.承接需求時，評估需求類型，對有設計發揮空間的需求，整合多維度策略，盡可能囊括體驗問題項優化；
3.適時對合作流程做出調整，當前版本需求做到前置介入，中遠期需求做到提前規劃與需求擴容，最大限度完成體驗問題項優化。
最后，愿大家都能在體驗優化之路上優雅前行。
作者：環鐵藝術家
轉載請注明：學UI網》面對高速快跑的產品，如何優雅推進體驗優化
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
當沒有認知緊張時，用戶心流才會發生。當一個設計有效時，你才能體驗到認知上的輕松。如果沒有，你的“心流狀態”就會中斷(稍后會詳細討論)，讓我們陷入認知緊張，于是“設計失敗了”。
當基本設計原則被忽略時，這種情況很容易發生，導致設計無法“整合”。這些基本原則包括：平衡性、一致性和視覺層次、負空間、接近性、對比、統一、一致性、配色方案和排版層次等方面。（彩云注：很多人看到這些以為自己都懂，但實際設計時犯錯最多的也是這些問題）
從神經科學的角度來說，當一個設計起作用時，我們會“感受到它”。其影響立竿見影。它發生在潛意識里，在一瞬間完成，是人的本能反應。我們不需要把它放在顯微鏡下分析它。
優秀設計以簡潔和優雅而引人注目。喬納森·伊夫(Jonathan Ive)和迪特爾·拉姆斯(Dieter Rams)都可以算作這種設計思想的擁躉。
人們常說，優秀設計背后的工藝是無形的。然而，這不是隨機發生的。不管人們是否注意到，設計的背后是遵循著大量而嚴格的原理去執行的。偉大的設計師不會在畫板上隨意地將各種元素組合在一起，這是有方法的。
為什么有些設計具有美的感受，而有些卻沒有
相反地，當一項設計被認為“有些地方不對勁”時，人們就會下意識地覺得這個設計是有問題的。這樣的結果會給品牌或產品帶來不好的影響。當一個高端或奢侈品品牌受到高度關注時，這種影響尤其有害。這就是為什么你永遠不會遇到設計不完美的香奈兒(Chanel)商店的原因。
“你對一件事的第一印象會建立起你隨后的觀念，如果一家公司在你看來不專業，你可能會認為他們做的其他事情都不專業?！狣aniel Kahneman，普林斯頓大學心理學教授
這不是一個精心制作的設計，會導致認知緊張。你會在這個網站上預訂你的行程嗎?
我們都同意上面是糟糕的設計，就像建在沙子上的房子，一個忽視基本設計原則的設計將會崩潰。潛意識里，它會立即被認為是破碎的，無論是視覺上、精神上和情感上。
人類的大腦是懶惰的、有偏見的，喜歡走捷徑。Daniel Kahneman稱之為“低維思維”。當人們看到某種設計時，它的“美學完整性”、視覺感知和神經科學之間存在著相互關聯。
當一個設計是合理的，換句話說，它是令人愉快的、有效的，我們會迅速、直觀的判斷它是合理的。我們的心率降低，多巴胺水平增加，會有一種幸福和平靜的感覺。這就像我們聽到舒緩的音樂，會沉浸在一種每時每刻的“心流狀態” 中?！霸谶@種狀態下，人們會專注于一項活動，其他一切似乎都不重要”——來自于一個心理學概念，由 Mihaly Csikszentmihalyi在他的暢銷書《心流:最佳體驗的心理學》中寫道。
你更愿意住進哪個房間？
蘋果的人機界面指南（Apple’s Human Interface Guidelines）幾十年來一直在談論“美學完整性”。它也可以被稱為“設計完整性”或“審美凝聚力”。
蘋果對美學完整性的定義是“當一個設計的外觀和行為與其功能完美匹配時”（彩云注：我的理解就是所見即所得，符合用戶的心理預期）。換句話說，設計的構成是產品的一個組成部分。我們將研究決定設計組合成敗的設計原則——更多的是關于 UI，而不是關于 UX。
美學完整性不僅僅是關于設計有多好看。它指的是具有明顯連貫性的設計：有效的結構和布局，是什么讓它產生效果。換句話說，它的元素在視覺層次、對齊、間距、平衡、對稱、重復、比例、強調、接近、對比、統一、一致性、配色、排版、負空間等方面都有出色的運用，這里僅舉幾個例子。
這與“黃金比例”無關，黃金分割不能解決問題。斐波那契數列螺旋沒那么玄乎，給設計師帶不來驚人的設計。
設計師們在安吉麗娜·朱莉或蒙娜麗莎的臉上畫出金色螺旋形時驚呼道：”果然是”黃金比例“（彩云注：但事實上有點故弄玄虛了）。當然，自然界中確實有神圣幾何學(黃金比例，又稱斐波那契螺旋，是基于此)，但依賴“黃金螺旋”作為設計原則是一種謬論，它已被多次暴露在其赤裸裸的荒謬中。
這是我的洗衣機，上面疊加了斐波那契螺旋。
“審美的完整性”不是沒道理的。這個概念是基于基本的設計原則，是有成就的設計師實踐他們的藝術作品的經驗總結。
讓我們來看看一些設計原則，以及它們為什么會使得你的設計更能更加有效。通常情況下，真正優秀的設計會結合這些設計原則。
我們將探討以下這些最底層的設計原理：
視覺感知的基本規則對任何視覺設計都是至關重要的，因為它們指導著如何盡可能快地傳達信息。視覺層次是設計中信息的結構和優先級。它決定了人們接受和處理信息的順序，因為它以一種視覺方式引導他們。
視覺層次感重在打造視覺優先級。通過巧妙地使用顏色、形狀、大小、間距、比例和方向，創造性地使用決定層次的視覺元素來傳達構圖的意義、概念和情緒。
核心關注點是什么，你希望用戶首先注意到或開始閱讀的設計中最重要的元素是什么？我們想讓它成為焦點，然后其他部分的設計從這里展開。
一個具有良好視覺層次的網站會引導用戶關注重要的部分
視覺層次對于每一種視覺設計都是至關重要的，無論是需要引導訪客眼球的首頁還是移動端UI的導航入口。用戶對每個元素的理解取決于組合中的其他元素及其上下文。
建立視覺層次的一些技術是:位置、大小和比例、顏色和對比、間距和親密性、負空間、紋理、引導線和高度。在一個元素周圍使用豐富的負空間可以使它看起來更有意義。使用引導線可以創造移動，就像一個人的眼睛在設計上移動一樣。排版的層次結構也扮演著重要的角色，通過不同的大小和權重，我們可以讓更重要的文本元素脫穎而出并建立秩序。
設計中的對齊和間距通過空間上的連接傳達出一種秩序和組織感，這兩個原則都在設計背后發揮重要價值。設計師早期學到的基本知識之一是在網格上編排設計，然后對齊和分隔這些元素。
左對齊、居中對齊、右對齊都沒錯，但你必須對齊，否則當元素沒有對齊時，設計就會給人崩潰的感覺。它給人一種不安的感覺。
沒對齊的話，眼睛看著很難受
網格有很多不同的類型:列網格、基線網格、模塊網格、層次網格、像素網格等。不同設計使用不同網格，但最基本的是設計元素的對齊和間距。
(Illustration courtesy UX Engineer)
網格可以被打破。一個死板的構圖可能會在視覺上無趣，除非一個元素從網格中脫穎而出。錯位或“打破網格”是賦予元素更多視覺權重的一個機會。當在設計中設置視覺層次結構時，它可以用來強調某些東西。
有時打破網格可以創造強調和移動
設計上有兩種平衡:對稱和不對稱。所有的構成元素：排版、顏色、圖像、形狀、圖案、留白等，都具有一定的視覺重量。有些元素很重，很吸引眼球，而有些元素很輕，感覺不那么重要。
這些元素的放置方式能夠在對稱設計中創造出一種平等的順序感，或者一種稍微偏離平衡能夠創造出一種不對稱的設計。無論對稱還是不對稱，我們的大腦都被某種平衡感所吸引，因為它創造了和諧、秩序和美學上令人愉悅的結果。
多重原則:平衡、對齊和對稱在網站上發揮作用
“對比”指的是使設計中不同的元素更容易區別開。強烈的對比可以在設計中強調一個區域，而微弱的對比可以弱化它，創造一個視覺層次。對比在設計中也扮演著重要的角色。對比不足會使文字特別難以閱讀，尤其是對視力有障礙的人來說。
在左邊的設計中，一些文字和背景之間的對比不夠。
Web內容可訪問性指南 (WCAG)呼吁“文本的視覺呈現應該有至少4.5:1的對比度”，除了大規模文本，它應該有至少3:1的對比度。因此，設計師需要確保內容保持舒適易讀。
其他UI元素(如各種顯示器和設備上的卡片、按鈕、文字和圖標)之間的適當對比也是必須的。如果UI元素之間沒有明顯的區分度，設計就容易產生混亂。
在格式塔原理中，對稱和秩序的法則也被稱為pr?gnanz，德語單詞“好身材”的意思。這個原理說的是，大腦會以盡可能簡單的方式感知模糊的形狀，這都是為了節省大腦能量。
我們傾向于尋找一切事物的對稱性。幾項研究發現，面部對稱能提高人們對人臉吸引力的評價(盡管完全對稱的臉其實并不一定那么有吸引力)。該理論認為，這種偏好與選擇DNA最好的伴侶的進化優勢有關。
對稱在自然界中也無處不在?？纯匆恢缓?，一朵花，或者一只海星。
對稱
同樣的原理也適用于數字領域，平衡對稱的設計更令人愉悅。
對稱性在應用中發揮作用。Uber Eats、Booking.com和Behance。
重復是一致性的近親，是優秀可用性的標志。
在設計中利用重復是件好事，因為我們的大腦總是在尋找模式、相似性和一致性。為什么?因為重復相同性質的元素需要更少的認知努力。
我們更容易識別重復的模式，而不是每次看到新模式都要重新校準大腦。正如前面提到的，大腦作為一種生存機制是懶惰的，模式識別和認知捷徑意味著有意識地處理視覺信息所需的能量更少。
例如，重復元素的形狀和大小、填充、留白、類型和顏色，也有助于更對稱、更好地平衡，做出美觀的設計。
The Athletic這個軟件就是用重復元素做設計的好例子。
好了，為了照顧大家的閱讀體驗，再寫更多估計有很多人要開始沒耐心了。所以剩下的設計原則，我們下回再接著聊，敬請關注哈。
原文：https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d
作者：Miklos Philips
譯者：彩云Sky
本文翻譯已獲得作者的正式授權（授權截圖如下）
作者：彩云Sky
轉載請注明：學UI網》超全面的設計底層理論，優秀設計背后離不開這些（上）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn