這是世界三大平面設計之一岡特·蘭堡的作品。

這是不是會給你一些靈感？我第一眼感覺這有點熟悉，似乎在別人的作品中運用過這種版式、元素。

在這設計中，與岡特·蘭堡的作品相似之處就有：黃底黑字的橫條和藍色調(diào)的背景，再結(jié)合一些設計圖形，就能產(chǎn)生出一種新穎的設計風格。

就是在大師的視覺中提取元素靈感進行轉(zhuǎn)化，運用在我們的設計中會有不一樣的視覺體驗。

我們接著看他的其他作品。

這張作品就能給我很不錯的靈感，把想要突出的地方用強烈的對比手法進行設計?；蛘邔⑾胍怀龅脑剡M行特殊化處理。

類似于這樣的作品。

當靈感有限的時候，我們就可以靜下心來分析一下其他大師的作品，認真觀察大師的作品，有哪些地方是可以提取靈感出來。

再結(jié)合自己的設計讓其提高升華，讓自己的作品耳目一新，使作品獲得新生。

保持這種發(fā)掘思維去分析作品，久而久之你就會有源源不斷的靈感浮現(xiàn)腦海里。

二、嘗試做出差異化

你走你的陽關(guān)道，我過我的獨木橋，反其道而行，雖然在國內(nèi)市場不太友好，但是嘗試一下走獨木橋的感覺，是否會帶給你不一樣的反饋。

特立獨行的視覺，做出差異化會給人們一種新穎的視覺觀感，就會吸引用戶，就比如喬布斯手下的蘋果產(chǎn)品，打破了當時對電子產(chǎn)品的認知，且對細節(jié)的把控極致到位。

人們其實都有視覺疲勞，長時間的保持這種風格，難免會讓人覺得平庸，突然出現(xiàn)的新穎視覺或想法，就能夠打破這種局面。

好比這個官網(wǎng)，首頁第一屏在我們印象中就是一個banner，在我們做網(wǎng)站的時候就認為第一屏就是應該放個banner在那里！

我們就好像思維固化了，第一屏就非得是個banner嗎？我們可以根據(jù)企業(yè)的屬性進行判斷，我們是否還有更優(yōu)的方案，盡可能的賦予設計靈魂。

類似于這樣的首頁是否就是反其道而行呢？與同行就拉開差別了呢？自己品牌更加深入人心呢？

比如一個正常的首頁，在開始設計時，最頂部的是導航欄，導航欄中最左邊是一個logo，其次在右邊是產(chǎn)品介紹等等…

我們有沒有想過為什么會這么布局？我們可以反問自己：這種布局是最合適的嗎？最好看的嗎？還有沒有更加合適的方式？

這種方式把logo放中間突出品牌就挺不錯的。還有一些把導航欄折疊起來的。

剛開始我們是這樣布局的，這就很普通沒有做出差異化。

我們是不是可以把文案進行精細處理，提取重要的詞句，把他們放大，要有視覺沖擊力，重要的元素再次放大！

這樣布局方式就新穎很多，突出了主要文案，加強了視覺沖擊，又加深了品牌印象。

三、擴大搜索范圍

沒有新穎的想法往往是自己的思路、思維還沒有打開，開始進行視覺設計的時候：選擇這類行業(yè)自己認為還不錯的視覺方向，開始進行視覺輸出。

那就錯了，假如開始設計APP，只找一些APP的視覺稿那肯定是不夠的，風格就比較單一，你的視覺參考都不夠豐富，怎么能夠做出讓人眼前一亮的風格！

我們不妨跳出圈子出來觀察！

可以去看別人品牌設計的、數(shù)字藝術(shù)設計的、圖形設計的、包裝設計的、服裝設計的甚至產(chǎn)品設計的都可以。有可能是某一個小地方讓你有所啟發(fā)。

大量的看，覺得很好的視覺就思考：我們的視覺是這樣的會不會更好！

就比如這張視覺稿，色彩很艷麗，顏色跨度很大，有黑色的粗線，如果把這風格運用在APP視覺上會是怎樣的效果？

看到一張足夠吸引你的視覺稿，就想想如何轉(zhuǎn)化到工作中去，那可能就會有不一樣的視覺風格。

所以在設定風格時，

不局限于同行

不局限于風格

打開搜索范圍，讓頭腦風暴更猛一些。

四、總結(jié)

做設計不是完成任務，所思考的是多方面的，好的設計是得花很多心思的；得保持冷靜，讓自己放松，著急或者有壓力的心境下你的思緒是亂的，根本就做不了設計。

所以有時候做設計臉皮厚一些。

再者平時的審美積累是非常重要的，這個就相當于你的底子，有底子往上爬的速度也會快一些。

做到這些你就離大師不遠了！

最后，設計是永無止境探索！加油共勉。

作者：橙汁

轉(zhuǎn)載請注明：學UI網(wǎng)》為什么總感覺我的設計比較土？終于明白了！

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

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

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

通過匯總動畫設計值得注意的十個方法，幫助大家進一步了解UI/UX設計中的動畫應該怎么做～

一、從原型設計開始

無論是設計初學者還是經(jīng)驗豐富的設計師，在創(chuàng)建動畫前都需要進行原型設計。

在原型階段，對產(chǎn)品和界面進行打磨推敲，能夠避免在后期動畫設計過程中花費時間返工修改。

二、符合物理定律

這條原則是指動畫設計要體現(xiàn)現(xiàn)實中物體運動的規(guī)律，符合重力、慣性、摩擦等物理定律。確保每個元素都沿著預設的軌跡移動，同時考慮到形狀、大小和其他物理特性。

通過遵循物理定律，動畫能展現(xiàn)更多細節(jié)，為用戶帶來熟悉的感覺和更好的體驗，避免動畫過于生硬和單調(diào)。

三、擠壓/拉伸元素

在常見到的卡片式界面設計中，對用戶的操作做出卡片收縮、放大、改變重心等反饋效果，讓動畫盡可能逼真。

四、確保平穩(wěn)移動

在現(xiàn)實生活中，物體不能一直勻速不變的運動，而是以拋物線的形式運動。把這個特性加入到動畫設計中，用戶與界面的交互會更加自然，緩入緩出的動畫效果會更好。

五、注意屏幕間的過渡

在APP中避免突然從一個屏幕切換到另一個，應該讓用戶有所感知，能夠為即將發(fā)生的操作做好準備。

每款產(chǎn)品界面的過渡動畫都不太一樣，我們可以充分發(fā)揮想象力，讓這類必備的翻頁動畫過渡的更有創(chuàng)意。

六、添加趣味性

為了讓用戶清楚地了解每一步操作之后的結(jié)果，并讓他們將注意力集中在這一點上，可以讓等待的過程變得更加具有趣味性。

例如在展示操作錯誤的場景中，可以彈出感嘆號或叉號來告訴用戶操作出現(xiàn)了問題，以及希望用戶采取的操作。

七、劃分層次結(jié)構(gòu)

通過動效設計，可以很清晰地反映出界面中哪個元素更重要。因為最重要的元素通常會在動畫的開頭就出現(xiàn)，優(yōu)先級最高，方便用戶快速捕捉。

八、提供視覺提示

對于剛使用某個產(chǎn)品的新用戶來說，要想完全摸透這個產(chǎn)品的全部功能，需要花費很多的學習成本和時間成本，通過動畫提示，可以顯著降低初次使用產(chǎn)品的門檻。

例如，使用動畫提示向新用戶解釋如何處理界面元素或者給出示例。

九、確保動畫時長與操作相匹配

考慮每一段動畫應該持續(xù)多長時間，這樣用戶就不需要點擊了某個操作，還要等這段動畫結(jié)束了之后，再進行下一步操作。

另外，如果動畫結(jié)束得太快，可能不利于觀看導致用戶無法理解。因此在最終上線前，要經(jīng)過嚴格的測試和審核，確保每一段動畫的時長都能與用戶的目標相匹配。

十、考慮動畫的類型

在設計過程中，我們要根據(jù)產(chǎn)品的調(diào)性和使用場景匹配最合理的動畫類型，為產(chǎn)品帶來錦上添花的效果。

例如，彈跳類型的動畫不適用于太過正式的企業(yè)應用或者官網(wǎng)上，同理，過于單調(diào)、不起眼的動畫放在娛樂類APP中也不太搭配。

最后

以上就是動畫設計值得注意的十個方法，希望通過這些內(nèi)容能讓大家進一步了解UI/UX設計中的動畫，讓單調(diào)的界面“動”起來~

作者： Clippp

轉(zhuǎn)載請注明：學UI網(wǎng)》掌握這10條動畫設計方法，讓單調(diào)的界面“動”起來【UX】

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

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

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

所以說，設計的話題性也是至關(guān)重要的，要嘛是品牌自身的影響，要嘛是設計團隊在行業(yè)中的影響力。一個常規(guī)的設計也許很完美，但是不一定被大家所討論，這樣也就是默默的出現(xiàn)再默默的淡化和被接受。具備話題性的設計，無論是針對設計好或者不好的討論，至少在營銷的角度來說，傳播性已經(jīng)足夠了。

我們言歸正傳，今天黑馬哥也隨波逐流一下，也來和大家分享一下關(guān)于抖音集團的 LOGO 設計?！白止?jié)跳動”變成了“抖音集團”，LOGO 從原來的四條跳動的豎線變成了字母“d”和“y”進行藝術(shù)結(jié)合的圖形。這也是為了和抖音產(chǎn)品 LOGO 形成視覺關(guān)聯(lián)，整個造型非常柔和，就像飄動的絲帶一樣青春活潑。

通過和抖音的 LOGO 進行對比，抖音集團的 LOGO 會顯得更“正”和具備商務型的特征。而抖音產(chǎn)品的 LOGO 會更娛樂性一些，兩者既有關(guān)聯(lián)性也有差異化。借助抖音的影響力可以讓公司的知名度更高，不過個人覺得字節(jié)跳動這個名字還是挺好的。

在 LOGO 配色上面，選擇了三種年輕化的顏色：藍色和綠色，而這個顏色也是延續(xù)了字節(jié)跳動原來的色系。這三個顏色組合還是比較容易呈現(xiàn)效果的，藍色和綠色的搭配在設計層面都是比較容易配色的，不僅會呈現(xiàn)年輕活潑的風格，設計師進行設計延展的駕馭度來說也是非常容易的。

新的字體上面，整個字形和之前的比較接近，在一些筆畫上面進行了微調(diào)，比如減弱了“斗”部的筆畫傾斜感。一些圓角的部分改成了直角的表達，封閉圖形部分開了一些缺口，字體筆畫更纖細了一些等等。和 LOGO 圖形部分搭配感還是不錯的，也能控制好整體的視覺平衡度。字形是比較穩(wěn)重的，也符合集團公司的特征。

有很多設計師根據(jù)新 LOGO 的圖形風格和配色，聯(lián)想到了飛書的產(chǎn)品 LOGO，如果將兩個 LOGO 一起對比觀看的話，還是有異曲同工之處的。

下面來看一下整體的組合效果，對這個改變和抖音集團的 LOGO 你會打幾分呢？

設計總結(jié)：

抖音集團的 LOGO 圖形設計主要是以名稱首字母進行組合，通過藝術(shù)化的處理形成一個全新的視覺符號?，F(xiàn)在大型的公司都喜歡將品牌符號化，以此來強化用戶的記憶度和識別度。

通過名稱首字母進行 LOGO 圖形設計也是較為常用的創(chuàng)意形式，無論是單個字母還是多個字母組合，都很容易搜索到眾多的案例作為設計靈感。比如我們在瀏覽器中搜索字母“d”或者字母“y”的 LOGO 設計，都會出現(xiàn)非常多的案例，有了初步的案例作為靈感，設計的時候方向感也會更強一些。

以后大家在進行 LOGO 設計的時候，如果沒有更好的創(chuàng)意想法，就可以試試首字母這個創(chuàng)意方向。除了字母以外，數(shù)字也是一個好的方向，只是數(shù)字的重疊性會更高一些。

作者：黑馬青年

轉(zhuǎn)載請注明：學UI網(wǎng)》抖音變集團啦！還發(fā)布了新 LOGO

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

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

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、臨摹

臨摹是新手學習任何技能都需要經(jīng)歷的階段，學字體設計自然也不例外。即你要去收集一些優(yōu)秀的字體設計作品，然后照著它們來臨摹。

很多人會瞧不上臨摹，認為照著參考一模一樣做誰都會，事實上真要做起來，很多人都臨摹不好，而且臨摹的方法也不對。那么，如何正確地臨摹呢？

1、不要像摳圖一樣，用鋼筆工具直接沿著參考的外輪廓描摹。

而是要照著參考畫出文字中的主要筆畫，諸如：橫、豎、撇、捺、點、提、勾等，然后，用這些筆畫照著參考的樣子一筆一筆把文字搭建出來。

2、如果遇到相同的筆劃，不要重新畫。

而應該把已有的筆畫直接復制過去，有時可能需要做一點簡單的變化，這么做可以最大程度上保證筆畫的統(tǒng)一性。

3、剛開始可以直接在參考的基礎上用筆畫來搭建文字。

就好似描摹一樣，與參考一一對應，等熟練之后可以自行繪制筆畫，通過視覺來確定筆畫的粗細、長短、結(jié)構(gòu)、擺放的位置等等。

舉個例子，如果要臨摹下圖的字體設計，我們可以先把它的筆劃畫出來，如果抓不住筆劃的特點，或者線條畫不流暢，可以在原參考上把筆劃描摹出來。

然后，照著參考在字框里用筆畫把文字組合出來。

最后，再仔細觀察文字筆劃的尺寸和位置是否正確，盡量做到與參考一模一樣。

經(jīng)過一段時間的臨摹練習，你不僅可以更熟練地使用鋼筆工具，同時也能掌握一些字體設計的風格、筆畫特征、字體設計的流程等等。

二、通過參考，舉一反三

當臨摹做得已經(jīng)很熟練以后，就可以開始第二步的練習了，即遵照參考中字體設計的風格、特點，設計自己想要的其他文字。其實在實際工作中、很多設計師也會用這種方式來設計字體。想要做好這項練習，首先你要做的是對參考作品進行深度的分析。

諸如對字體類型、字形、字體風格、重心位置、中宮松緊、筆畫粗細、筆畫結(jié)構(gòu)、筆畫的對齊關(guān)系、有哪些特殊的處理技巧等特點進行分析。

比如我想根據(jù)下圖的字體來設計文字：起來嗨。那么我就先要對參考中的字體設計進行分析：

該字體為無襯線體，風格簡約而現(xiàn)代，筆劃并沒有講究嚴格的對齊，甚至刻意做了錯位處理，各文字的字面大小也不統(tǒng)一，呈現(xiàn)出靈活多變的感覺、筆劃較粗，橫豎筆劃的粗細一樣、橫筆劃右端有類似直角三角形的襯線、部分筆劃交匯處會把橫筆劃做斷開處理、點筆劃和個別捺筆劃被設計成圓點、口部首被設計成圓圈等等。

把參考的設計特點分析出來以后，緊接著需要把我們想設計的文字，用一個常規(guī)的字體呈現(xiàn)出來，由于參考中的字體設計是無襯線體，所以我們可以選擇黑體作為字體設計的觀察對象，看看該文字中有哪些筆劃可以直接挪用參考中的，有哪些則需要自己來設計。

接下來就要著手畫草圖了，需要注意的是，參考中的文字做了整體垂直向上傾斜，在設計字體的時候如果直接設計成傾斜狀態(tài)，那么很多筆劃處理起來會不方便，所以最好先設計成水平狀態(tài)的，等確認無誤后再做傾斜扭曲。

另外，在畫草圖的時候要多做嘗試，對于原參考中沒有的筆畫，我們要從現(xiàn)有的筆畫中找到規(guī)律，這些部分的設計沒有絕對的標準，關(guān)鍵是要好看、要協(xié)調(diào)、要與整體的風格相符。比如“起”字下邊的“人”筆劃，可以借鑒參考中“辶”的處理方式。

草圖畫好后就可以去電腦上做最后的執(zhí)行了，在執(zhí)行的過程中需要注意以下幾點：

1、草圖不是標準，只是執(zhí)行的思路。

所以在執(zhí)行的過程中仍可以進行調(diào)整、修改。

2、一邊設計一邊規(guī)范。

如果你不是在專業(yè)的創(chuàng)作本上繪制的草圖，那么你的草圖通常是很不嚴謹?shù)?，那么在電腦上操作的時候就要邊設計邊規(guī)范，比如統(tǒng)一筆劃的粗細和結(jié)構(gòu)、統(tǒng)一筆劃斷開部分的間距、注意某些筆劃之間的對齊關(guān)系等等。

3、與參考對比。

字體初步設計完以后，要把其與參考放在一起進行比較，看看還有沒有處理不到位、看起來不夠舒服的地方，水平狀態(tài)調(diào)整完以后，再把文字按照參考的樣子往右上方做傾斜處理，然后繼續(xù)觀察以及做最后的完善。

三、原創(chuàng)字體設計

如果你能熟練地做到通過參考舉一反三，那么你的字體設計能力已經(jīng)初步形成，接下來就可以做原創(chuàng)了。做原創(chuàng)字體設計時我們要注意以下幾點：

1、做原創(chuàng)也可以找參考。

只不過不要完全按著一個參考來做，我們可以結(jié)合好幾個參考，也可以在參考的基礎上加入自己的想法、做出一些改變等等。

2、設計的流程

A.根據(jù)要設計的文字、找到符合設計需求的參考。比如我需要設計的文字是：奇遇驚喜，并想設計成有種浪漫、古風的感覺。所以我找了下圖的字體來做參考(造字工房逸鋒體)，該字體字形修長、結(jié)合了宋體和黑體的特性，筆劃橫細數(shù)粗但沒有襯線，現(xiàn)代而優(yōu)雅。

B.加入自己的想法。用常規(guī)的的字庫字體把要設計的文字呈現(xiàn)出來，與參考放在一起進行構(gòu)思。參考中的字體雖然現(xiàn)代而優(yōu)雅、但是作為字庫字體，獨特性自然會有所欠缺，另外筆畫還是略過復雜，沒有古風和浪漫的感覺，所以我想把筆畫繼續(xù)做一些簡化，并加入祥云圖形。

C.畫草圖。

可以先畫文字的骨骼部分，以確定文字的基本架構(gòu)，文字的骨骼決定了文字的基本氣質(zhì)，比如高矮胖瘦、中宮松緊、重心高低、筆畫走勢等等，這也是設計師可以大做文章的地方，很多優(yōu)秀的字體，在骨骼上就與普通字體有著很大的差異。這里我把文字的骨架設計得比參考更為修長。

骨骼畫好以后，再添加字體的肉身，即筆形，筆形決定了筆劃的粗細、端點、襯線、筆劃交匯處的處理等細節(jié)效果，這些部分的變化也非常多，設計師可以根據(jù)文字本身的特點和參考進行多種嘗試。

作為字體設計師，了解一些不同筆形的處理技法也很有必要。

▲ 部分橫筆畫的筆形表現(xiàn)。

D.把草圖導入到設計軟件中執(zhí)行。草圖畫好以后就可以去電腦上執(zhí)行了，執(zhí)行的步驟和注意事項與“舉一反三”里提到的差不多。

3、注意文字的統(tǒng)一性。

在設計字體時，要注意整體的統(tǒng)一性，要讓人感覺到這是一套字體，所以原則上來說，每個字的字面大小、重心位置、中宮、相同的筆畫等等，都要統(tǒng)一起來，當然，不包括某些為了效果靈活而刻意作出的一些特殊處理。

臨摹、舉一反三、原創(chuàng)，簡單的三步就能幫你從一個新手變成一個熟手，其實除了字體設計，很多其他類型的設計同樣是這個道理。當然，最重要的是你要能走出第一步，先做起來，然后要堅持下去。

作者：蔥爺

轉(zhuǎn)載請注明：學U網(wǎng)》新手學習字體設計的高效三步法

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

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

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

在開頭先放獲得IF大獎作為證據(jù)，佐證作品質(zhì)量，讓讀者有一個比較好的心理印象。我們在作品中展示作品時，也可以把自己獲得的榮譽放在最前面，有一個霸氣的開場。

項目目標。關(guān)鍵詞的推導，這部分的推導一定要簡潔合理，太多人喜歡在這部分寫很多文字，然后又沒有把關(guān)鍵詞可視化，容易被忽略。

品牌愿景。說明產(chǎn)品最終想要達到什么樣的狀態(tài)，通過平臺作為橋梁滿足用戶的訴求。

品牌特色。介紹這個產(chǎn)品主要的特點。

品牌設計原則。從品牌特色中提煉核心原則，并通過這些最核心的關(guān)鍵詞，指導接下來的所有視覺設計。

全局概覽。把品牌設計過程稿和結(jié)果都放在一起，展示工作量以及全局概念。

最終結(jié)果。動態(tài)展示最終的Logo。

二、規(guī)范體系

介紹完項目整體情況后，這一步開始介紹整個設計體系。

Logo系統(tǒng)。講這個logo是如何設計出來的，會發(fā)現(xiàn)它的每一個詞用的都挺準確的，很有代入感。

主要應用形式

顏色系統(tǒng)。給顏色一些解釋說明。

在Logo上的應用

視覺主題系統(tǒng)。品牌的超級符號延展出的風格調(diào)性。

A、傾斜式設計

B、折紙符號

異化的疊紙符號

圖標體系。圖標這里的風格很容易看出是品牌風格的延續(xù)，也是品牌特征常用的做法，利用品牌超級符號中的某個特征應用到其他各個視覺觸點上。

字體規(guī)范。通過排版將故事傳遞給用戶。一致使用適當?shù)淖煮w可以建立強烈的品牌個性。合適的排版，例如使用各種不同字重和信息層次結(jié)構(gòu)，將 KakaoPage 變成一個友好、體貼和值得信賴的品牌。

動效系統(tǒng)。它也有2個不同的動態(tài)形式，動態(tài)的背景切割方式，能看出來都與品牌有高度一致性。

三、品牌應用

品牌應用圖標。會根據(jù)Android和iOS系統(tǒng)要求，用不同的規(guī)范背板設計應用圖標。

APP設計，能看出來APP的設計其實也是品牌的一種延續(xù)應用，品牌是一個可以包攬全局的概念，幾乎無處不在。

這也是高級UI設計師常用到的技法，抽象出品牌的超級符號，比如這里就是品牌顏色和斜角的運用，用在角標、背景圖案、選項卡和圖標等元素中。使得整個設計與品牌保持高度的一致性。

在一些媒體平臺，都會盡可能地讓品牌圖形進行露出，并且保持品牌風格的一致性。

在名片、信封、卡片、包裝袋、書籍、易拉寶、廣告牌、運用廣告等各種不同場景下的運用，也都會用到品牌符號，使得品牌更加具備識別度和統(tǒng)一性。

最后再次展示Logo，通過動效，品牌符號等給用戶加深印象。

到這里，一套非常完整優(yōu)秀的設計作品展示就做完了。以上包裝思路是該團隊5年前的作品，到今天依然是各大品牌方案的包裝套路，堪稱經(jīng)典！

作者：彩云Sky

轉(zhuǎn)載請注明：學UI網(wǎng)》韓國頂尖設計團隊PlUS X，5年前的作品集包裝套路，今天依然好用！

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

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

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

Facebook 正在內(nèi)測讓用戶可以將最多五個單獨的個人資料綁定到一個帳戶。資料不需要包含用戶的真實姓名和身份信息。

用戶可以將不同的個人資料專用于他們想要聯(lián)系的特定群體，例如一個專用于他們的朋友的 Facebook 訂閱源和另一個只為他們的同事提供的訂閱源。

允許用戶“根據(jù)他們的興趣和關(guān)系個性化他們的體驗”，預期增加用戶間的互動和帖子數(shù)。

二、ins上線了dual相機功 

ins相機上線了dual相機功能，用戶可同時打開前后攝像頭，合成畫面。

今年爆火的新產(chǎn)品BeReal的主打功能之一就是同時打開前后置攝像頭，以達到展示展示自己的目的。

三、Apple 申請 VR 指尖追蹤設備專利 

Apple 正在申請一項新專利，此種手套可用于手勢控制，在某些場景還能提供觸覺反饋。根據(jù)專利描述，Apple 想開發(fā)一種附著于指尖的設備，設備上有傳感器，支持觸覺反饋。傳感器附著于手背面的手指上，傳感器可以偵測動作，提供某種形式的觸覺反饋。指環(huán)可以戴在指尖，由指甲固定住，以便判斷是一根手指還是多根手指進行互動，而信息將反饋到手背上的控制單元，従而連接到計算機。

四、iOS近期開發(fā)者預覽版值得關(guān)注的三個更新點 

1、電池支持展示百分比 

由于空間限制，多年來搭載劉海屏的 iPhone 一直無法使用電池百分比，此次更新后，狀態(tài)欄中的可顯示確切的電池百分比，該功能可以在“設置”應用的“電池”部分進行開啟。

2、鎖定屏幕的音樂視覺化播放圖形 

iOS 16 Beta 3 添加了全屏音樂播放器，Beta 5 引入了實時迷你可視化圖形，可隨音頻播放變化。且會與新的按鈕動畫相結(jié)合，當點擊播放 / 暫停按鈕或前進后退按鈕時，它們會有新的動畫，動畫感覺非常優(yōu)美和流暢，并提供了很好的細節(jié)。

3、屏幕截圖新增【復制并刪除】 

當截取屏幕截圖，對其進行編輯后點擊“完成”時，出現(xiàn)了一個新選項，可以“復制和刪除”屏幕截圖，而不僅僅是刪除它。這允許用戶復制圖像以粘貼到任何其他應用程序，而無需先將圖像保存到照片應用程序。

五、YouTube支持視頻雙指縮放 

(點擊上圖前往原文查看視頻）

近 YouTube 推出了【雙指縮放影片】的功能，能夠直接放大來觀看影片細節(jié)，并開放給會員搶先試用。

目前 YouTube 已正式向 Premium 推出這項功能，只要雙指輕觸撥動屏幕，就能自行縮放畫面大小，不管是橫屏還是豎屏都有支援，畫面最高可以放大到 8 倍。和全屏模式相比，縮放功能可以讓用戶更清楚地看到畫面上的細節(jié)。如果你已經(jīng)是 YouTube Premium 的會員，可通過手機版 YouTube 【會員福利】>【試用新功能】，就會看到此功能，點選后即可使用。

六、YouTube TV正在開發(fā)同時觀看四個直播流的功能

YouTube TV 正在開發(fā)一些新功能——“Mosaic Mode”，可以讓觀眾同時觀看多個直播（最多四個）。雖然谷歌仍未回應，但多畫面同時播放在體育直播中特別受歡迎。像FuboTV 是一項以體育為重點的直播電視流媒體服務，具有多視圖功能，最多允許同時進行四個流。在索尼的 PlayStation Vue 服務關(guān)閉之前，它有一個類似的功能，在想要同時傳輸多個頻道的用戶中很受歡迎，這一戰(zhàn)略舉措對谷歌來說是有意義的。

七、NGL匿名問答應用登頂APP Store

NGL的全稱為“Not Gonna Lie”，是一款流行匿名社交軟件。NGL只需要用戶填寫上自己在Instagram社交平臺的昵稱就可以成功注冊。進入App后，NGL會為用戶提供不同的問題選擇，并最終將用戶需要提問的問題生成一個專屬鏈接和一個分享截圖。

八、0Zero 零重力瀏覽器

傳統(tǒng)瀏覽器打開多個頁面時，會以tab的形式切換。此款瀏覽器打開多個網(wǎng)頁時，會在一個畫布上平鋪展示所有打開的網(wǎng)頁。

(點擊上圖前往原文查看視頻）

九、糖果APP設置 avatar新方式

糖果APP是一個虛擬形象陌生人社交應用。傳統(tǒng)創(chuàng)建avatar的方式都是用戶自行捏臉。而糖果是在注冊時，通過用戶選擇興趣標簽自動匹配一個avatar形象。極大的降低了創(chuàng)建成本。

十、Snapchat推出網(wǎng)頁版及首款AR游戲 

1、Snapchat推出網(wǎng)頁版 

Snapchat最近布推出“網(wǎng)絡版 ”，支持消息聊天、發(fā)送快照、視頻通話、表情反應等核心功能，且計劃在未來將其Lenses功能引入視頻通話。登錄網(wǎng)絡版Snapchat后會同步你手機上的信息，繼續(xù)你在手機上的對話。通過桌面使用Snapchat時，用戶的Bitmoji將出一個筆記本電腦的圖標，向其他人表明你是通過Snapchat for Web訪問聊天的。

此外，網(wǎng)絡版本的體驗還包括隱私屏幕特性：如你點擊離開去完成另一項工作，軟件就會隱藏Snapchat窗口；通過Snapchat for Web發(fā)送的信息將在24小時后自動刪除；防止人們進行截圖。

Snap發(fā)言人對外介紹產(chǎn)品情況時說，Snapchat上的通話者平均每天要花30多分鐘的時間進行通話。盡管仍將自己視為一個移動優(yōu)先的平臺，但Snap表示，在聽取了用戶的反饋后，它決定是時候?qū)napchat的核心功能引入電腦端。但網(wǎng)絡版當前僅對部分地區(qū)的Snapchat+用戶提供，暫時不支持中國區(qū)。

2、Snapchat推出首款AR游戲《Ghost Phone》 

Snapchat 推出一款新的游戲內(nèi)應用程序《Ghost Phone》，這是snapchat發(fā)布的第一款 AR 游戲，可將智能手機變成 AR 驅(qū)動的設備?！禛host Phone》是使用 Snap 的專用濾鏡創(chuàng)建工具 Lens Studio 構(gòu)建的，使用 World Mesh 技術(shù)，可以進行更準確的跟蹤。在游戲中，玩家需要搜索隱藏在短信中的線索，并使用智能手機的相機捕捉超自然實體。

「Ghost Phone」根據(jù)Snap旗下鏡頭創(chuàng)建工具Lens Studio構(gòu)建，該應用支持World Mesh技術(shù)，從而實現(xiàn)更準確追蹤。

十一、Whatsapp在線狀態(tài)支持設置可見范圍及語音狀態(tài)  

WhatsApp的在線狀態(tài)功能，近期新增了設置狀態(tài)權(quán)限設置，憑借此功能，用戶不僅可以設置可以看到自己的最近狀態(tài)，還可以設置誰可以看到我在線，讓用戶可以更精細的控制自己的隱私。

除此之外，WhatsApp 最近還在測試新增的“語音狀態(tài)”功能。如下圖右圖所示，狀態(tài)選項卡底部有一個新圖標，可以讓我們快速向我們的狀態(tài)更新語音狀態(tài)。此語音狀態(tài)只會與你在狀態(tài)隱私設置中選擇的人共享。

十二、WhatsApp 發(fā)布 Windows 桌面版應用程序 

過去 Windows 用戶必須下載 WhatsApp 的網(wǎng)頁端桌面應用，或是通過網(wǎng)頁瀏覽器來訪問 WhatsApp，如今面向 Windows 用戶的桌面端應用全新發(fā)布，通過原生的應用程序，WhatsApp 能帶給用戶更快、更流暢的體驗。重新設計的 WhatsApp 提供了更簡潔的界面，WhatsApp 表示正在為 MacOS 開發(fā)原生應用。

十三、Meta 聊天機器人 BlenderBot 3 登場 

Meta 釋出了第三代聊天機器人 BlenderBot 3，奠基于 1,750 億個參數(shù)的 OPT-175B 語言模型，BlenderBot 3 使用了更多的資料集，其對話效能比上一代提升 31%，知識能力是前一代的兩倍，錯誤率則少了 47%，BlenderBot 3 互動界面目前僅于美國市場開放。Meta 指出，BlenderBot 系列在各種對話技巧上日益進步，除了個性、同理心與知識，還結(jié)合了長期記憶，并能通過網(wǎng)絡搜索來進行有意義的對話。

鏈接：https://geo-not-available.blenderbot.ai/

聊天機器人不免會模仿或?qū)W習到不安全、帶偏見或冒犯的言論，Meta 對此展開了大規(guī)模的研究，發(fā)展各種新技術(shù)建立保障措施。即便如此，BlenderBot 3 仍可能說出無禮或冒犯的內(nèi)容，Meta 因而決定讓用戶與其互動，讓用戶能在 BlenderBot 3 的回答上給予好評或負評，并注明評論的理由，協(xié)助 Meta 改善 BlenderBot 3。

十四、Messenger 測試默認點對點加密功能 

Messenger 自 2016 年起提供點對點加密功能，但用戶需對每個會話逐一設置，手動打開點對點加密功能。

如今 Facebook 計劃挑選少數(shù) Messenger 用戶，默認啟用點對點加密通信功能。除了向文本和圖片消息提供點對點加密，語音通話也會提供點對點加密。此外，F(xiàn)acebook 還會測試其他相關(guān)功能，例如消息在一個設備刪除后，也會在其他設備消失、點對點加密環(huán)境下取消發(fā)送、回復 Facebook Stories 等。

Facebook 也會為 Messenger 部分功能進行更新，例如消息在一定時間后自動消失，也會測試新的安全存儲功能，讓用戶將已加密的對話內(nèi)容備份到云計算存儲。

十五、Telegram更新了互動表情 

Telegram此次更新包括：自定義動畫表情符號、交互式自定義表情符號、iOS上的新貼紙、Gif和表情符號面板、贈送Telegram Premium 作為禮物的能力以及語音消息的新隱私設置等等。

1、自定義動畫表情 

Telegram推出開放表情符號平臺，任何人都可以為Telegram premium用戶上傳獨特的自定義表情符號。并且新的動畫表情符號可以包含在消息文和媒體標題中，高級版用戶最初可訪問10個初始自定義表情包，其中包含了500多個高級表情符號。

當在輸入框輸入信息時，貼紙按鈕將變成一個表情按鈕，點擊即打開表情符號面板，因此用戶可以快速瀏覽并添加自己上傳的表情包。

2、新增了一批可交互式表情 

Telegram在表情制作中投入了很多精力，在新版本中又新增了一批可交互式的emoji表情，當用戶發(fā)送出去后，好友點擊即自動播放表情符號的全屏效果。

3、語音信息的隱私設置 

Telegram Premium用戶增加一個新設置，允許他們控制誰能夠向他們發(fā)送語音和視頻消息、同樣也可以選擇從不或始終向您發(fā)送語音消息的特定人員或用戶組。

4、向親友贈送會員 

今年夏天，Telegram的活躍用戶突破了7億，并推出了 Telegram Premium會員服務，已是會員的用戶還可以向親友贈送Premium預付費訂閱服務，除了享受一定的折扣價購買外，贈送的訂閱將以特殊消息的形式出現(xiàn)在與親友的聊天中，并生成一個特殊的動畫禮品盒，極具送禮的儀式感。

十六、OPPO發(fā)布全新一代ColorOS 13操作系統(tǒng) 

2022年8月30日，OPPO開發(fā)者大會（ODC22）上，全新一代ColorOS 13操作系統(tǒng)與「潘塔納爾」智慧跨端系統(tǒng)正式發(fā)布。全面升級的ColorOS 13以「水生萬物」為理念，對整體UI以及一些體驗進行了優(yōu)化。全新的「水生設計」，從水在自然界中的運動方式汲取靈感，進一步增強了UI和動畫在視覺上的流暢與包容性。在界面、圖標、按鈕顏色上也用了大量的藍色，呼應“水”的主題。

另外，此次更新也帶了一些新的功能和亮點體驗。

1、個性形象使用場景更多且更具包容性 

ColorOS 13對Omoji也進行了更多創(chuàng)意升級，新增大量與社會身份和興趣愛好等相關(guān)的創(chuàng)意素材，比如代表醫(yī)護工作人員的“大白”形象，及流行的漢服、滑雪服，更豐富的五官、臉型、頭型、飾品等素材。用戶可以在社交應用中直接套用自己的Omoji個性形象，亦可為聯(lián)系?創(chuàng)建Omoji，來電時即可顯示對方的專屬形象?；蚴窃谂臄z時使用自己的個性形象拍攝。

2、更智慧和有趣的息屏 

ColorOS 13對息屏做了全新升級，推出“智慧息屏“。在打開智慧息屏的場景化信息功能后，當用戶處于外賣、叫車或聽歌場景時，智慧息屏就會主動感知相關(guān)應用狀態(tài)，并實時顯示訂單或歌單進程，無需反復亮屏查看。而當你在聽歌時，「智慧息屏」還會顯示音樂播放控制器，你可以很便捷地進行暫停、切歌、收藏等操作，ColorOS 13還會根據(jù)你的喜好為你智能地推薦歌單，做到了真正的省心和貼心。

此外，息屏還可設置多種樣式，包括豐富的圖形、動態(tài)動物家園、以及時光息屏。其中家園息屏會根據(jù)每日氣溫變化，揭示動物們賴以生存的家園變遷，呼吁大家關(guān)注氣候變化。時光息屏會在你每一次喚醒手機后，在彩帶上留下獨特刻痕，使用時間越長刻痕越寬。

3、有趣又實用的綻放壁紙 

時下人們對數(shù)字健康越發(fā)關(guān)注，手機使用時長的增長和不可控性已成為當下話題。綻放壁紙讓屏幕使用時長可視化，嫩芽成長為葉片的過程，模擬時間的流逝。設定一個使用時長目標，當超過目標后，葉片從有機轉(zhuǎn)為工藝品材質(zhì)，暗含美的稍縱即逝。同時葉片顏色代表過去一小時內(nèi)使用最多的應用圖標顏色，實時變化，將個性化和數(shù)字健康完美融合。

4、更便捷的大文件夾 

在新的系統(tǒng)中，支持對原有文件夾進行放大為九宮格大文件夾，可以直接點擊打開 App。

5、智能會議助手支持整理會議紀要

會議當中的紀要整理一直都是讓打工人頭疼的難題，畢竟漏記、錯記、反復回聽錄音是大部分職場人在整理會議紀要時常常遇到的痛點。為此，ColorOS?13?智能會議助手帶來了紀要智能整理的功能，讓你不遺漏會議中的每個重點。開會時，呼出智能側(cè)邊欄「字幕轉(zhuǎn)記」功能，自動記錄會議截圖和筆記，會后生成圖文并茂的會議紀要，便于回顧復盤，再也不需要反復回聽會議錄音，無需提筆即可記錄重要信息。目前，紀要智能整理支持釘釘、飛書會議、騰訊會議、Zoom、Goole?Meet以及Team。

更多ColorOS 13功能可以移步查看：https://www.youtube.com/watch?v=9da1ktqjPy0

十七、微信iOS迎來8.0.27正式版本更新 

1、我的二維碼支持更換樣式 

在微信-掃一掃-我的二維碼頁面下方點擊【換個樣式】后，二維碼可更換不同風格，還有全屏背景顏色版，更現(xiàn)代更美觀了。目前有 10 種樣式可供用戶選擇。

2、統(tǒng)一音視頻懸浮窗體驗 

此前小視頻、一起聽、直播懸浮窗各異，此次對懸浮窗樣式進行了統(tǒng)一優(yōu)化，同時在還在細節(jié)體驗上也做了優(yōu)化，不在支持多個音視頻同時播放，最多只能展示一個懸浮窗。且在已有一個視頻懸浮窗，如直播懸浮窗時，再進入進入小視頻，懸浮窗會自動暫停并收折。

3、公眾號支持長截圖 

蘋果手機一直不支持長截圖（雖然手機 Safari 瀏覽器可以長截圖）。這次更新后，閱讀公眾號文章時，手機先截屏，右下角會出現(xiàn)一個「保存整頁為圖片」的按鈕，公眾號文章都好用。

4、個人狀態(tài)及朋友圈權(quán)限更新 

個人狀態(tài)除了狀態(tài)表情圖標外，現(xiàn)在還可以展示文字；朋友圈動態(tài)中，針對已發(fā)送的動態(tài)，支持修改可見范圍。

十八、Snapchat支持雙攝像頭拍攝

Snapchat在8月29日推出了雙攝像頭功能，該更新使用戶能夠同時使用手機的前置和后置攝像頭拍攝照片和視頻，讓用戶從多角度拍攝需要分享的內(nèi)容。打開你的 Snapchat，在相機工具欄中看到一個新圖標。只需輕輕一按，就可以開始創(chuàng)建快照和故事，或者更精美的 Spotlight 視頻。雙攝像頭是一種創(chuàng)造性的方式，讓我們可以更好的捕捉激動人心的時刻。雙攝像頭有垂直、水平、畫中畫和摳圖四種布局。Snapchatter 還可以添加心愛的 Snapchat 創(chuàng)意工具，包括音樂、貼紙和鏡頭。雙攝像頭已經(jīng)支持 iOS 端，未來幾個月將支持 Android。

十九、百事的元宇宙是品牌年輕化的新嘗試 

最近，知名飲料品牌百事發(fā)起一場基于元宇宙生態(tài)的顛覆性營銷活動，就為品牌營銷4.0時代貢獻了一出經(jīng)典案例。以元宇宙為營銷觸角，通過對百事概念店的全面升級，開啟百事元宇宙新紀元，邀請Z世代體驗一場沉浸式虛實交互的演唱會，百事家族虛擬偶像TEAM PEPSI搭檔活力無限的年輕用戶，通過潮流音樂的無縫跨界，共創(chuàng)無限可能的未來第三空間。

百事通過元宇宙來對百事的“百事蓋念店”進行升級。百事的宣傳重點偏向于Z世代。在由元宇宙驅(qū)動更立體多面的新場域中，Z世代期待能享有更多主導權(quán)，共同參與創(chuàng)建“未來”的過程，創(chuàng)造力即第一生產(chǎn)力，而熱愛驅(qū)動創(chuàng)造。

百事設計了4個虛擬形象，它們分別對應了百事家族四大品牌的視覺主色調(diào)。還特意弄了一個演唱會，讓人夢回炫舞團的感覺。

為了鼓勵更多年輕人參加，在「百事可樂潮音夢境」的預約階段，百事就向全國年輕人發(fā)出了一份盛大邀請，讓用戶可以通過DIY填詞的方式，參與演唱會的聯(lián)合共創(chuàng)，釋放對百事品牌和未來音樂的想象。參與者不僅可以得到以百事家族虛擬偶像為封面的專屬演唱會門票，所寫歌詞還會隨機出現(xiàn)在Live House現(xiàn)場，讓更多人看到。

二十、網(wǎng)易二次元元宇宙社交軟件Fancy 

繼日本的REALITY和韓國的#Me大火以后，網(wǎng)易也開始研發(fā)類似的二次元元宇宙社交軟件，悄悄地在泰國App Store又上線了一款名為“Fancy – avatar live party”的虛擬化身語音聊天社區(qū)應用，再度加碼針對年輕用戶群體的虛擬社交產(chǎn)品。

Fancy與REALITY和#Me相比畫風的區(qū)別還是很明顯的。該產(chǎn)品的主要特點為“語音聊天社區(qū)”和“虛擬化身”在“Fancy”中，當用戶創(chuàng)建了自己的虛擬形象后，就可以加入社交活動中，除了傳統(tǒng)的文字聊天，“Fancy”主打的功能之一就是“派對房（Party Room）”。

該房間最高支持9人同時在線。在派對房里，用戶不僅可以和好友語音聊天、互動，當開啟AI人臉識別功能后，AI會識別用戶的眨眼、說話等狀態(tài)，虛擬化身的表情也會與玩家的表情同步。

二十一、TikTok 推出AI綠幕圖像生成器 

最近， TikTok 的特效菜單下，增加了一個名叫“AI 綠幕” (AI Greenscreen) 的新選項。點擊這個選項，然后在屏幕中間的對話框里輸入一段文字描述，只用不到5秒的時間，TikTok 就可以根據(jù)文字描述生成一張豎版畫作，用作短視頻的背景：

只要想象力到位，短視頻的背景就可以放飛，讓你盡情穿梭于各個虛擬場景。所有應用AI綠幕制作的視頻，都會打上#aigreenscreen標簽。

TikTok 用的這個文字轉(zhuǎn)圖片模型，還是非常簡單的。盡管目前AI綠幕所生成的背景還偏油畫風格，沒有任何寫實色彩。但風格遷移的痕跡明顯，而且用的顏色也都鮮亮明快，給人一種耳目一新的感受。

以上就是2022年8月ISUX行業(yè)設計趨勢速遞，喜歡記得收藏轉(zhuǎn)發(fā)，以備不時之需查看。

原文地址：騰訊ISUX

作者：ISUX設計

轉(zhuǎn)載請注明：學UI網(wǎng)》ISUX「八月」行業(yè)設計趨勢速遞

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

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

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

操作很簡單，大家看完記得練習哦。直接開始今天的教程吧，yeah…

● 相信大家小時候都玩過超級馬里奧、魂斗羅等游戲。

下圖是馬賽克像素風典型的代表游戲之一。回想起來那都是童年的歡樂時光啊~

● 下面用文字簡單的介紹了一些關(guān)于像素畫的知識

● 給大家整理的一些像素風格的海報（案例來源于互聯(lián)網(wǎng)，僅做參考）

● 除了像素畫海報之外還有與之對應的像素字體下圖來源于互聯(lián)網(wǎng)，僅做示意。

● 這里我們用到上圖03和06的技法思路，像素的趕腳類似PS的半調(diào)效果，或者是仿色擴散，以文字設計為基礎使用的仿色擴散的效果來呈現(xiàn)。

設計思路&步驟解析

01：先設計完字體部分(這里暫不講字體設計部分)，不會字體設計的同學，使用一款好看的字庫字體也是可以的。

02：合并所有筆畫，在AI中使用路徑偏移，參數(shù)設置如下，對象-路徑-偏移路徑。

03：取消編組，用2種顏色區(qū)分。

04：勾勒鋼筆連接每個邊，紅色圓圈標注部分為示意。

05：接著給字體填充黑白漸變，注意白與黑之間的明暗過度。

06：最終效果如下，將漸變后的字體在PS中選中，圖像-模式-灰度-拼合。

07：圖像-模式-位圖-擴散仿色。

大家不要局限于做像素風格就非得像我用這種方法去呈現(xiàn)，我們只要抓住海報的主體，呈現(xiàn)是由一個小的單元格組合拼接而成就可以了。AI同樣也可以做出矢量像素海報。。。

這是在AI做出的像素化效果，這里給大家拋磚引玉一下。

選中漸變完之后的字體，AI菜單欄-對象-柵格化，參數(shù)設置如下，最終位圖再轉(zhuǎn)矢量就可以啦。

08：最終并為其添加色彩與排版就完成了~

我們先看幾組網(wǎng)上的案例展示吧，大概認識下這類風格的一些表現(xiàn)形式，版面的構(gòu)圖元素，以及顏色的一些使用等。

不難發(fā)現(xiàn)我們目前所看到的孟菲斯風格是非常潮的，強烈的色彩組合與碰撞，幾何形狀的構(gòu)成，甚至一些海報當中也會出現(xiàn)潮流的插畫小元素，非常具有趣味性，以及強一些畫面視覺沖擊表現(xiàn)。

孟菲斯風格版面元素構(gòu)成

孟菲斯平面設計特征可以歸納為：

1、高明度的色彩組合；線條、圖案的隨機排列搭配；幾何元素的大量運用和空間填充。

2、各式各樣的幾何圖案是“孟菲斯設計”經(jīng)典元素之一，以正方形、圓形或三角形這類規(guī)則圖形為主。

3、與傳統(tǒng)設計強調(diào)有序不同，“孟菲斯”的設計背景喜用凌亂與自由的組合方式。

不管是細瘦的直線、粗體的波浪線，還是點狀圖案亦或3D結(jié)構(gòu)圖形，你都能在孟菲斯作品里找到。

下圖舉例了孟菲斯在平面中的一些表現(xiàn)！

咱們分析完孟菲斯的一些構(gòu)成元素表現(xiàn)形式之后就好開始下手了，下圖是以人物為主體的表現(xiàn)形式。

為了方便大家觀察我將版面中的元素進行了拆解，大致分為人物、文字對話框、一些線條元素和版面中的配色。

文字對話框&文字編排：

版面中的人物主體：

版面中的色彩搭配、字體&線條：

以上就是拆解完的樣式，這里我們?yōu)榱嗽黾影婷娴娜の缎?，我使用了手寫字體以及隨意裝飾的線條活躍版面氣氛，色彩的組合上使用了純色與漸變的組合碰撞，圖形構(gòu)成上表現(xiàn)模擬了電腦頁面對話框的組合形式搭配上文字編排，以上都是為了盡可能的符合孟菲斯的一些風格表現(xiàn)而存在的。

這是我做的另外一張孟菲斯的海報，根據(jù)之前給大家總結(jié)的要素：

*幾何圖形構(gòu)成

*強烈的色彩組合

*簡單圖形&插圖

*簡單圖形&插圖

圖形的制作比較簡單用 AI 3D工具就可以完成。

*幾何圖形構(gòu)成

*幾何圖形構(gòu)成

*靚麗/怪誕/潮流

當時找素材的時候找到這只鳥的時候，發(fā)現(xiàn)嘴非常的有意思，以及鳥本身的顏色也是符合孟菲斯的色彩要求的（一個巧合罷了），扣完圖之后給鳥加上一個外描邊增強趣味性。

*強烈的色彩組合

純色與漸變色（高飽和度&低飽和度）、（明與暗）以及色彩在版面中的一個過度關(guān)系。

最終組合版面中的主體與文字排版&構(gòu)圖，以及配色孟菲斯風格的海報就完成了，只要掌握了他們的元素構(gòu)成風格與表現(xiàn)就好做了，希望這2張海報可以給到大家一個啟發(fā)。

所以我們只要能模擬出撕紙的效果差不多就能做了。

下圖是案例展示部分。

我們來看下撕紙效果的一個具體制作方式，基本上都是在PS中完成的。

下圖是關(guān)于PS畫筆的預設：

常規(guī)畫筆、干介質(zhì)畫筆、特殊效果畫筆、濕介質(zhì)畫筆。

給人物添加一個蒙版，這里我使用的是干介質(zhì)畫筆，分別給他們換上顏色即可。

選擇下圖第二種干介質(zhì)畫筆，以及它們在不同模式下的樣式效果。

接著在人物的邊緣用干介質(zhì)畫筆（溶解模式）涂抹邊緣，撕紙的效果就出現(xiàn)了，接著加入黑白相間的素材。

為了模擬撕紙的效果，我隨意設置了一些紋理，讓紋理保持一種不規(guī)則的狀態(tài)。咱們動手制作一些素材使用(特殊效果畫筆)，新建一個畫布，使用畫筆涂滿即可，導出圖片當做素材就OK了，涂抹的時候畫筆的大小折中就行，避免效果不理想（大家多嘗試就行）。

最終規(guī)劃版面的文字編排就完成了。

大家多多練起來吧，希望對你有所幫助。

作者：大熊

轉(zhuǎn)載請注明：學UI網(wǎng)》拿捏3種設計風格！

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

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

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

1.優(yōu)化對象

云效是企業(yè)內(nèi)部的效能研發(fā)平臺，輔助公司員工研發(fā)產(chǎn)品。本項目的優(yōu)化內(nèi)容是針對它的項目協(xié)同能力，該部分的主要功能是“創(chuàng)建并管理項目”和“線上協(xié)同推動項目流轉(zhuǎn)”。

2.設計依據(jù)

由于是自用產(chǎn)品，因此缺乏有效的數(shù)據(jù)驗證，需要找到合理的設計依據(jù)。所以我們聯(lián)系業(yè)務方開展針對員工的訪談，以職位為基礎分類，梳理他們的工作流程；根據(jù)不同的工作階段，收集各個用戶角色的使用痛點；最后將痛點進行了分析和整理，將重點問題進行了分類匯總，最終總結(jié)出結(jié)論——效率低。因此本期的優(yōu)化目標也明確下來了，就是對項目協(xié)同進行辦公提效。

3.提效內(nèi)核

在開始設計前要搞明白一件事，那就是項目協(xié)同的基礎構(gòu)成是什么？它們分別是“流轉(zhuǎn)”和“角色”。

為了方便理解，筆者把項目協(xié)同系統(tǒng)比喻成工廠，把項目推進比喻成商品制造，項目從策劃到上線，就如同商品在一條流水線上會經(jīng)歷多個加工點，從原材料到最終完工上市。這條流水線在項目協(xié)同中可以它稱為“流轉(zhuǎn)”，而在流水線上的加工點們，其實就是公司員工，我們稱他們?yōu)椤敖巧?，角色需要完成相應的任務，才能將項目從一個節(jié)點流轉(zhuǎn)至下一個節(jié)點。因此“流轉(zhuǎn)”和“角色”共同構(gòu)成了項目協(xié)同系統(tǒng)。

所以提效的關(guān)鍵就在于“角色能否順利完成任務”，同時“項目能否進行順利流轉(zhuǎn)”。滿足這兩點，項目協(xié)同系統(tǒng)才能高效運行，從而到達辦公提效。

因此我們可以得出一個公式：“辦公提效=角色完成任務的效率x流轉(zhuǎn)順暢程度”。即用戶能在順暢的流轉(zhuǎn)過程中，高效地完成各節(jié)點的任務。再結(jié)合訪談結(jié)果，本次的設計目標逐漸清晰：

提升項目流轉(zhuǎn)效率：梳理生命周期，滿足全流程覆蓋；搭建消息體系，提升信息觸達率

提升任務完成效率：概念優(yōu)化，降低學習成本；搭建高坪效頁面，提升閱讀和操作效率；多維度展示，提升決策管理能力

 

1.項目流轉(zhuǎn)全覆蓋

舊版云效只覆蓋了產(chǎn)品和開發(fā)，而本期我們要做全流程角色的覆蓋，因此筆者從角色和工作兩個層面重新梳理了產(chǎn)品生命周期，角色層面包括了從產(chǎn)品，設計師，開發(fā)和測試，即產(chǎn)品研發(fā)的全流程參與的員工；工作層面包括了從需求策劃一直到上線的全工作流程。主要目標是梳理出各角色需要完成的任務，同時確認在流程上的流轉(zhuǎn)節(jié)點。

在本期方案中項目流轉(zhuǎn)還是采用手動為主。舉個例子，如產(chǎn)品在云效上創(chuàng)建了一個需求，并在線撰寫了文檔，此時他可以將需求流轉(zhuǎn)給設計師，設計師收到需求后和產(chǎn)品溝通需求細節(jié)和排期，然后開始設計介入，此時產(chǎn)品即可將該需求的狀態(tài)就變?yōu)榱恕冈O計中」，以此類推角色持續(xù)推動需求流轉(zhuǎn)，直至完成上線。

在未來我們將會實現(xiàn)高度自動化的流轉(zhuǎn)方式。比如完成某些任務后能進行自動化流轉(zhuǎn)，再舉個例子：設計師在云效上直接上傳設計終稿，產(chǎn)品確認后可自動流轉(zhuǎn)到下一流程節(jié)點。

2.打通辦公消息提醒體系

經(jīng)訪談發(fā)現(xiàn)，項目流轉(zhuǎn)存在信息傳遞不及時的卡點，需要提升用戶觸達?？紤]到公司現(xiàn)有觸達方式中，美事和企業(yè)郵箱的普及度較高，依托這兩款產(chǎn)品能做到全公司的消息觸達。于是筆者與業(yè)務方梳理了消息提醒的場景，包括了「待辦提醒」和「異常提醒」兩部分。以下可以舉兩個案例進行分享。

自動化待辦提醒：需求負責人完成創(chuàng)建后會自動流轉(zhuǎn)到參與人，告知對方被分配了相應的事項。

自動化監(jiān)測提醒能力：舊版項目流轉(zhuǎn)是由負責人全權(quán)監(jiān)測，無形中增加工作成本。優(yōu)化后方案以系統(tǒng)監(jiān)測為主，負責人為輔。當系統(tǒng)監(jiān)測到異常時（主要是臨近逾期或已經(jīng)逾期），會自動在美事里推送未完成的內(nèi)容，用戶可點擊查看詳情，并及時處理。

1.概念提效

舊版的產(chǎn)品概念復雜，存在重復性內(nèi)容，如「項目」和「產(chǎn)品」，如“產(chǎn)品”和“項目”這兩個概念的相似度就很高，很多新用戶難以理解。同時不符合業(yè)界定義的認知，如「迭代」，本應該是需求的合集，但是舊版二者卻是并列關(guān)系，造成了理解成本高的問題。

在優(yōu)化方案中，我們將概念扁平化，合并相似度較高的概念，放棄部分不常用概念。同時調(diào)研市面現(xiàn)有平臺的概念體系，做到盡可能符合業(yè)界認知。從而降低理解成本。

2.搭建高坪效頁面

工作事項作為平臺最基礎組成部分，主要問題是頁面交互方式老舊，體現(xiàn)在結(jié)構(gòu)分散且層級復雜；使用過程中跳轉(zhuǎn)頻繁，需要重新搭建高坪效的頁面。同時在閱讀瀏覽、新增內(nèi)容和語義理解方面都存在設計細節(jié)問題。筆者以需求詳情頁為例，說一下搭建高坪效頁面的方法。

頁面層級重構(gòu)：筆者采用了卡片分類法將頁面組件重新歸類組合，重構(gòu)新頁面，同時考慮到用戶的快速瀏覽習慣，將原有跳轉(zhuǎn)新頁面改為抽屜的展示方式，減少反復頁面跳轉(zhuǎn)帶來的體驗不佳。

看到有用的信息：合理控制信息密度，同時保證添加內(nèi)容的便捷性。設計吸頂?shù)膭?chuàng)建入口，點擊后可跳轉(zhuǎn)到預設位置去添加內(nèi)容。頁面上不會出現(xiàn)多余信息，有效降低頁面的信息密度。

快速看到想看的：隨著用戶在抽屜內(nèi)新增的內(nèi)容越來越多，頁面也會變的越來越長，為提升瀏覽效率，在左側(cè)設計快捷幀導航欄，點擊后能快速跳轉(zhuǎn)到相應位置，提升瀏覽效率。

低成本理解文案：本次在語義設計上做了調(diào)整，確保用戶低成本理解。以操作日志為例，日志里記錄了所有操作記錄，表達內(nèi)涵是“哪些用戶在什么時間進行了如何的操作”，因此設計由「用戶名」+「行為」+「結(jié)果」+「操作時間」組成的字段句式，使語義做到標準化且降低理解成本。

3.多維度展示

在舊版方案中大量使用列表作為展示方式。但單一維度列表僅僅強調(diào)了事項的主題，考慮到在實地的工作場景中，用戶是需要從多種維度去管理工作事項。

層級關(guān)系展示：需求存在父子級關(guān)系（一個需求可以被拆分成多個子需求，分期完成），因此需要能表達清楚層級關(guān)系的展示方式。筆者使用了樹形圖的展示方式，明確父子級關(guān)系。

進度展示：因為我們所參與的事項都是有起止日期的，什么時候開始，什么時候結(jié)束，中間需要干多長時間，都需要讓用戶有清晰的感知，從而提升管理效率。筆者采用了甘特圖，以事項進度的維度來管理決策，同時設計了拖拽功能方便用戶及時編輯進度。

流轉(zhuǎn)狀態(tài)展示：工作事項需要流轉(zhuǎn)的，因此需要以流轉(zhuǎn)狀態(tài)的維度去展示事項，能更好地幫助用戶感知事項所處的狀態(tài)，及時規(guī)劃流轉(zhuǎn)動向，從而提升事項流轉(zhuǎn)效率。筆者采用了看板的展示方式，以事項流轉(zhuǎn)狀態(tài)的維度來管理決策，用戶可拖拽事項，及時進行流轉(zhuǎn)。

 

回歸到辦公提效公式：“辦公提效=角色完成任務的效率x流轉(zhuǎn)順暢程度”。在“流轉(zhuǎn)”和“角色”兩個方面的優(yōu)化。

通過梳理產(chǎn)品生命周期將做到全流程覆蓋，同時搭建信息體系，提升流轉(zhuǎn)信息的觸達，進而提升項目流轉(zhuǎn)效率。再通過優(yōu)化概念，降低學習成本；搭建高坪效頁面，提升閱讀和操作效率；搭建多維度展示方式，提升決策管理能力，保障用戶在各節(jié)點完成任務的效率。

最終做到精準的辦公提效。

 

本次改版還在繼續(xù)中，我們會繼續(xù)以提效為目標持續(xù)優(yōu)化。B端產(chǎn)品不同于C端，尤其是企業(yè)類辦公產(chǎn)品，會經(jīng)常缺乏埋點導致缺乏有效的數(shù)據(jù)支持，因此不能像C端產(chǎn)品以數(shù)據(jù)作為設計依據(jù)。

需要設計師深入產(chǎn)業(yè)了解業(yè)務背后的運行邏輯，訪談目標用戶觀察其行為并收集其訴求。由此才能足夠了解業(yè)務，為企業(yè)用戶產(chǎn)出更優(yōu)秀的設計方案。

希望這份B端設計改版的內(nèi)容能夠?qū)Υ蠹矣兴鶐椭?

作者：58UXD

轉(zhuǎn)載請注明：學UI網(wǎng)》只要一個公式，帶你看懂協(xié)同辦公提效

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

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

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

借用一句傳統(tǒng)設計行業(yè)的經(jīng)典語錄，一個好的產(chǎn)品一定是“有用的、好用的、用過還想用的”，有用的主要由產(chǎn)品經(jīng)理把控，而好用、用過是否還想用就是交互設計的職責和價值了。工作內(nèi)容，交互大概可以總結(jié)為下面這幾點：

1、是針對行為的設計，讓原本的物理邏輯向用戶行為邏輯轉(zhuǎn)化；

2、平衡業(yè)務價值和用戶價值，腦海中永遠不要忘記“用戶價值”這幾個字；

3、以目標為導向，保證產(chǎn)品貼合用戶心智，用戶能更好的理解、使用產(chǎn)品，并獲得愉悅的使用體驗；

4、是通過功能架構(gòu)向信息架構(gòu)的重組，提升產(chǎn)品框架的擴展性、穩(wěn)定性等，交互更多的考慮到在不同場景下對可用性的要求，讓產(chǎn)品能長久持續(xù)的使用下去；

5、是對使用流程設計；

6、數(shù)據(jù)分析和用戶研究相關(guān)的工作，這兩者是交互展開工作的基礎支撐。

交互的價值是長期的和可持續(xù)的，沒有交互，短期內(nèi)看似不會出現(xiàn)問題，長期來看，對用戶留存、用戶滿意度等會有重大影響，市場環(huán)境不同于壟斷環(huán)境，功能堆砌過多后甚至都無法再動搖產(chǎn)品“難用”這個印象，但凡有類似競品，放棄產(chǎn)品可能性較大。

二、交互設計的產(chǎn)出物特點——交互稿與產(chǎn)品原型稿有什么差別

1、從內(nèi)到外的邏輯思維差異

行為邏輯是交互設計師思考的出發(fā)點，也是交互設計方式能否取得創(chuàng)新的關(guān)鍵點。物理邏輯或者業(yè)務邏輯是產(chǎn)品經(jīng)理更關(guān)注的要點，交互設計需要具備豐富的同理心，產(chǎn)品功能不同、用戶不同、場景不同都會影響到用戶使用時的感受和操作行為。簡單來說，交互設計師更多的站在用戶角度去思考原型的價值，是否容易被理解、好用甚至轉(zhuǎn)化，而產(chǎn)品的角度不可避免的會更多考慮業(yè)務、技術(shù)實現(xiàn)等方面，一個人做到面面俱到，是極其難且思維是很容易固化的，長期形成的思維差異會直接在原型圖中表現(xiàn)，最終影響到產(chǎn)品可用性。

以QQ音樂幾年前的版本（2017）和現(xiàn)版本（2021）為例，左側(cè)過往版本在首頁的信息組織形式上主要以分類的方式，而右側(cè)現(xiàn)版本中信息的組織形式中首頁的分類方式已經(jīng)很弱了，基本傾向于按用戶行為、需求去組織，比如根據(jù)用戶過往聽過的歌曲去推薦歌曲、歌單，每日30曲更是研究了用戶每日習慣、耐心做的信息整合，30首怎么得來的？根據(jù)什么樣的歌曲去推薦？這些都是行為研究的范疇，需要對用戶深度了解后方有最好的解決方案。

2.、設計規(guī)范的積累與創(chuàng)新

設計范式是交互設計師基本功的體現(xiàn)，包含設計規(guī)范和模塊范式兩個方面。設計規(guī)范是設計范式中的基礎，對規(guī)范的理解和創(chuàng)新也是衡量專業(yè)度最基礎的方面，這對原型稿是否成熟有很大關(guān)系，現(xiàn)有的交互規(guī)范大多基于iOS、Material design、微軟設計規(guī)范的基礎上優(yōu)化的，國內(nèi)比較流行的設計規(guī)范還有Ant design等，本文不對此做過多討論，這里重點談談設計范式。

范式，指用戶在長期對于互聯(lián)網(wǎng)產(chǎn)品使用過程中產(chǎn)生的用戶心智，比如用戶對設置模塊的預期、對個人信息模塊的預期等。也可以理解為對于不同產(chǎn)品功能模塊的記憶，設計時需要非常熟練的從腦海中調(diào)用，這樣做的好處是不容易太偏離用戶長期積累的心智，熟練應用范式是創(chuàng)新的前提。

比如表格編輯器的設計范式，不管是現(xiàn)在的飛書、谷歌文檔、釘釘、石墨等協(xié)同辦公產(chǎn)品，都在20年前微軟office的ribbon設計模式中兜兜轉(zhuǎn)轉(zhuǎn)，尤其是表格編輯器，在長期的使用過程中記類的習慣是很難輕易被改變的，筆者親身經(jīng)歷過一款表格編輯器產(chǎn)品的迭代，易用性（易操作、易學、易見）中易學性指標評分是最高的，現(xiàn)在想起來也跟行業(yè)范式接近不無關(guān)系。另外關(guān)于一些編輯器右鍵操作、鍵盤操作快捷鍵是否滿足了用戶需求都是極其重要的。不過辦公類產(chǎn)品發(fā)展到現(xiàn)在已不再像20年前純工具類屬性了，協(xié)同屬性必將帶來編輯器再一次的創(chuàng)新。

設計范式需要長期的積累，對范式理解不夠深入，通常是要么畫不出來可用的原型，要么畫出來的原型會被問到一個問題——“這個…看起來有點說不出來的奇怪”。在理解了基礎范式之后，我們才能做出真正的創(chuàng)新，雖然近兩年交互形式越來越穩(wěn)定，但真正理解了范式之后的創(chuàng)新也能幫助產(chǎn)品快速占領(lǐng)用戶心智，形成特定印象，繼而占領(lǐng)市場。設計范式并非不可創(chuàng)新，而是在不必要的時候盡量遵循范式能最大限度去降本增效，減少不必要的用戶誤解或開發(fā)成本。

3.、多端設計交互方式

比如基本的差異點有：

• Mobile的用戶行為多為單線任務，而PC是多線任務，比如pc可以多窗口很便捷的切換，用戶可以一邊聊天一邊收郵件；
• Mobile端用戶操作時間更加碎片化，PC操作時間更加系統(tǒng)、專一；
• PC的界面也遠大于Mobile，導致信息結(jié)構(gòu)差異較大；
• 兩者交互事件也存在很大差別，PC可以針對對象進行hover，多上下滾動，少左右滑動（依據(jù)鼠標特性）等；
• 設計控件的規(guī)范差異較大。

本文并不詳細贅述差異點，總的來說，這些差異點在具體的原型稿設計中會體現(xiàn)的比較明顯，這些也是專業(yè)性的一個方面。下面將舉2個例子來說明：

1.樹狀結(jié)構(gòu)

樹狀結(jié)構(gòu)是一個PC端經(jīng)常應用的控件，適用于層級結(jié)構(gòu)的展示、選擇等交互操作，高效而清晰，但其在移動端展示時卻不能照搬，由于屏幕、移動端手指交互等限制，在移動端該控件既不高效也不清晰。比如常見的將文件移動到文件夾的操作，桌面端的交互可以用樹狀結(jié)構(gòu)，而移動端更適合層級結(jié)構(gòu)。

2.面包屑導航

面包屑在桌面端是一個非常普遍的控件，可以有效的承載層級關(guān)系展示、快速導航定位的功能，比如不同層級的文件夾展示與導航等。但在移動端，因為屏幕大小、移動端用戶操作碎片化等原因，導致用戶對面包屑節(jié)點的記憶、層級操作上都遠不如桌面端，甚至會影響到信息的展示效率，因此移動端在層級關(guān)系的展示與切換上通常不會用面包屑，而是左上角返回按鈕或系統(tǒng)級別的返回。當然面包屑在移動端也并非一無是處，如果面包屑各節(jié)點承載的展示作用具備極強的參考意義，比如這些文件夾節(jié)點同時承載著組織關(guān)系的顯示，則面包屑也還是可以用的。

總結(jié)下來：面包屑在移動端盡量別用，但如果其各層級節(jié)點同時有極強的參考意義，則可用。

4.、方法論的掌握和運用

方法論在交互稿中的體現(xiàn)是比較隱晦的，準確來說，這一點是針對思維差異點的補充，如交互設計十原則、“F型”頁面設計理論（近幾年有爭議）等視覺動線，也包含發(fā)現(xiàn)問題的一些方法，比如KANO模型、用戶體驗地圖、卡片分類等方法論的應用，這些對于用戶行為維度的研究結(jié)果也會支撐著交互稿的科學性，這里不做展開闡述。比如用戶體驗模型示意圖如下，用戶體驗模型是建立在用戶角色模型之上的，前提是需要大量的用戶深度訪談資料為基礎，用以系統(tǒng)、全面、科學的研究用戶行為和探索用戶需求。

用戶體驗地圖

除了以上列舉出來的，還有一項重要的方法是數(shù)據(jù)分析，這一點是容易被輕視的，但確是最具備參考價值和衡量工作結(jié)果的，交互關(guān)注的數(shù)據(jù)和產(chǎn)品有很多差異，具體一點，比如對于一個項目中，產(chǎn)品更多關(guān)注的是衡量功能結(jié)果的數(shù)據(jù)，通常包含使用數(shù)據(jù)PV/UV、轉(zhuǎn)化率等，而設計師更多關(guān)注CTR、停留時長、轉(zhuǎn)化漏斗中跟操作行為相關(guān)的數(shù)據(jù)，行為是交互研究的對象，所以行為數(shù)據(jù)結(jié)果能為具體的方案設計提供衡量指標。

5、交互稿中的UI考量

簡單來說，就是不能給UI挖坑，沒有交互的設計，UI上與產(chǎn)品之間的溝通會非常頻繁，也主要會出現(xiàn)以下幾個常見問題。

1.信息結(jié)構(gòu)與優(yōu)先級的落地

信息布局既需要考慮功能的業(yè)務優(yōu)先級，也需要考慮用戶行為優(yōu)先級，同時還需要考慮到UI排版的難度。這中間基本都會有矛盾存在，做好平衡是必備技能。有時候需要逼著產(chǎn)品給出功能優(yōu)先級，排版是有限的，也有一定審美要求的專業(yè)度，交互稿需要為UI規(guī)避一些明顯的坑，比如最典型的例子——功能都很重要、文案過長等，當產(chǎn)品同學也不確定自己所畫功能是否能被用戶理解、操作的時候，會喜歡用文案去進行解釋，比如button上寫10個字這種，交互需要給UI提前做避坑。

2.規(guī)范

設計是一個系統(tǒng)，任何需求在畫交互稿時都應考慮到對系統(tǒng)的適應或沖擊，這就要求交互設計師不僅要非常熟悉設計系統(tǒng)，而且必須是系統(tǒng)的制作人之一，設計系統(tǒng)是一項耗時耗力的工作，前期耐心打磨，后期適應、修改，如此才能把握住用戶體驗的一致性。

3.邊界情況

主要包含用戶交互中與前端、服務端的交互，比如操作事件的定義、反饋；加載的形式與技術(shù)方案；空狀態(tài)；弱網(wǎng)、斷網(wǎng)等等，這些邊界頁面的考慮都定義清楚，能有效避免UI的返工。

4.保真度與實現(xiàn)效果

交互稿如果保真度較低，會導致UI在實際設計的時候?qū)换ジ逍薷妮^大，導致頁面架構(gòu)、交互注釋等返工修改，造成不必要的時間資源浪費，也會對項目進度造成影響。一般來說，成熟的交互稿是比較接近UI稿而又不是UI稿的一種狀態(tài)，將UI中的坑避免之后，UI設計師需要做的就是更表現(xiàn)層的設計，比如與前端工程師的實現(xiàn)匹配、色彩、柵格、間距、字體字號等等。

6、詳盡的Use Case考量

Use Case（用例）指功能、交互的定義和詳細描述，用例描述的細節(jié)程度決定開發(fā)時反復溝通的頻率，具體包含的細節(jié)很多，大到功能流程的設計，小到某個交互事件的定義和枚舉；從前端用戶與系統(tǒng)的交互事件，到服務端與前端的功能聯(lián)動等，都涉及到，總之，只要用戶看到的、點擊/滑動/hover等交互行為涵蓋到的，都應該被定義，以期減少開發(fā)過程中遇到的問題和溝通成本，這里不做過多闡述。

三、交互稿背后的價值——交互設計只是畫稿子的嗎？

顯然不是！如果說一個項目交互階段持續(xù)了3天，那繪制交互稿最多能花費1天。

交互是一個橫向能力比較高的職業(yè)，很多交互設計師也改行去做了產(chǎn)品、用研或者UI，所以多多少少都會具備這幾者的一些技能。交互設計師通常會有多重隱藏的技能是必須掌握的。

1、項目中堅守用戶價值

用戶價值在項目中很容易就讓步于業(yè)務價值、項目排期、技術(shù)方案等，交互就是在這中間說“不”的人，潤物細無聲，在每個項目中盡量減少用戶價值的損耗，最后匯聚而成的產(chǎn)品整體體驗還是有很大差別的。

—交互在組織架構(gòu)上，一般是會歸屬于設計部門的，所以在部門中也承擔了一線跟用戶和數(shù)據(jù)接觸的人，即便有數(shù)據(jù)分析師、用研同學的幫助，也需要有主動跟蹤這些問題的意識，不然設計出來的交互稿很難不出問題。

3、可用性測試等結(jié)果追蹤

可用性測試在一些稍大的項目中是體驗設計環(huán)節(jié)中的定性維度核驗步驟，需要結(jié)合用戶反饋對方案進行可用、好用測試，并不是指在流程上能跑通的技術(shù)測試，而是校驗用戶對于方案的接受程度、滿意程度，也順便發(fā)現(xiàn)一些問題，后續(xù)進行優(yōu)化。

更多的結(jié)果追蹤形式，比如還有SUS可用性量表（B端產(chǎn)品可用阿里云UES量表等）、用戶滿意度、NPS跟蹤等等，目的在于定量的給用戶體驗打分，確保用戶體驗的衡量是有章可循的。

易用性量表

4.、直接驅(qū)動業(yè)務增長

增長黑客和用戶增長設計的概念前幾年也已在業(yè)內(nèi)為大家所熟知，AARRR增長模型（獲客、激活、轉(zhuǎn)化、留存、推薦/傳播）中，交互可依賴對用戶的了解和用戶行為的洞察，通過比如文案、微動效、轉(zhuǎn)化漏斗優(yōu)化、信息梳理、布局設計等，也可以幫助業(yè)務在各階段直接提升對應的業(yè)務指標，甚至將體驗設計師熟悉的體驗地圖轉(zhuǎn)化繪制為用戶增長地圖，在用戶使用的全鏈路行為節(jié)點做設計所擅長的增長賦能。

5、項目流程管理

交互需要更早的參與到需求中，在需求出現(xiàn)之前的交互參與能讓需求更加合理，而在交互稿畫完之后，也需要實時的去跟進UI、開發(fā)，有一些技術(shù)難題需要跟開發(fā)密切合作，開發(fā)說“”實現(xiàn)不了”是經(jīng)常碰到的一句話，那是否是真的實現(xiàn)不了，可能跟不同的團隊、人、項目排期有關(guān)了，有時候并不是真的實現(xiàn)不了，或許只是開發(fā)不想做或者他之前沒做過，這個就需要PK了，當然有的真的很難實現(xiàn)或者性價比很低的設計，就需要對交互稿進行調(diào)整了。除此之外，有的公司還要求交互有整體管理能力，這就另說了。

四、沒有交互會帶來什么？

產(chǎn)品團隊或許不都有交互崗位，但不可以沒有好的交互設計！

1、短期內(nèi)產(chǎn)品使用體驗很奇怪

很多人畫出來的原型稿甚至是交互稿都遇到過“用起來很奇怪”這個問題，其實是因為設計者對用戶心智、用戶行為、控件規(guī)范、產(chǎn)品范式等的不熟悉造成的這個問題，一個“夾生”的東西即便邏輯合理也必然會帶來“夾生”的體驗。此外，范式和規(guī)范的使用只是執(zhí)行時的一個選擇而已，對某規(guī)范的使用未必真正解決當前場景下的問題，交互設計師更多的是通過對業(yè)務的梳理、用戶的洞察來做選交互范式和規(guī)范的篩選，找到合適的，才能價值最大化。

2、長期下產(chǎn)品“難用”印象的形成

任何行業(yè)，任何產(chǎn)品，產(chǎn)品研發(fā)者可能都不是實際使用者，術(shù)業(yè)有專攻，對用戶的理解是一項長期經(jīng)驗積累的過程，合乎邏輯的，不一定是易用的，易用的不一定是好用的。筆者的經(jīng)驗來看，用戶的使用行為既是“傻”的，也是孕育著無窮無盡智慧的，尤其是B端產(chǎn)品，用戶使用的方式可能超乎想象。因此對用戶行為理解的深度決定了產(chǎn)品與用戶之間的默契度，圍繞一個痛點市場上總不至于只有一個產(chǎn)品，如何讓你的產(chǎn)品成為用戶真正的朋友，需要有專業(yè)的人來研究用戶行為，交互這個專業(yè)便也是因此而生的。

如今互聯(lián)網(wǎng)紅利愈發(fā)消失殆盡，或許由于資金原因交互崗位并沒有存在于所有公司或團隊，但交互設計的專業(yè)度一定永遠存在，崗位的橫向兼并融合并不能磨滅交互的專業(yè)度，因為交互堅守的是用戶體驗的底線，讓產(chǎn)品變得或好用、或高效，最終驅(qū)動業(yè)可持續(xù)增長，便是這最大的價值！

作者：陳悅

轉(zhuǎn)載請注明：學UI網(wǎng)》交互設計的價值是什么？

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

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

藍藍設計( www.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司