分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言
如果你要設計以真實場景為主的banner或者主視覺，往往都會在各大網站圖庫里找半天，挑挑選選可能都找不到滿意的，或是容易和別人用到一樣的圖片。想要找到一張?zhí)貏e的又獨一無二的難上加難，而且自己也沒時間建模和拍攝
AI圖片的生成為這個痛點找到了更好的解決方案，這篇文章就是要和大家分享一下使用AI制作好用的圖庫素材照片，我將會按照真實工作場景搭配設計落地方案來和大家分享AI使用經驗，讓你看了就學會，學會就馬上能用
用結構化方式思考咒語
以下需求是我設計中要用到的素材，我希望可以有一張【穿西裝并且手提公文包的男士站在摩天大樓前】的寫實照片當作首圖，首先先想一下我們需要的素材大概畫面的呈現，思考的框架可以參考以下，以下內容為了方便關鍵詞我會用中文，但是實際操作中Prompt都必須使用英語
通過結構化思維來描述這樣就不會有遺漏，也更能使畫面完整，另外像我的英語并不是很好，就會把寫好的內容通過Deep L或是chatgpt來進行翻譯
關鍵詞的使用
prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，the whole body of the figure is presented, —ar16:9
在輸入關鍵詞的時候，我通常會把重要的內容放在前面，有時加在后面的關鍵詞不容易被機器人識別。個人的一點小經驗，在描述的最后一定要加上需要的參數，為了在后續(xù)的設計中更好適配尺寸需求，所以我選擇加上尺寸參數16:9，以下就是我通過關鍵詞生成的圖片
如果覺得結果都不滿意，可以重新用相同的Prompt再生成。AI好玩的地方就是它的隨機性，像是Promp就不建議非常詳細，因為這樣反而會有意想不到的優(yōu)質圖片產出
機器人生成以后就要開始挑選圖片了，如果對左上的結果比較滿意，就點擊v1，讓機器人針對這個圖片再去生成四張新的圖片，雖然左上效果不錯，但是手部有些奇怪，所以需要通過在該基礎上再次生成，來挑選沒有問題的圖片
這里說明一下U（upscaler）和V(variation)的區(qū)別，U就是選擇這張圖，然后會放大這張圖片畫質更加清晰，V則是會針對你選擇的圖片再生成四張圖，與你選擇的圖片做輕微的調整。1-4的排序為：1是左上，2是右上，3是左下，4是右下
重新生成的左上圖可以看到手部還是有問題，但是右上那張就還不錯，可以選擇這張來用或是再重新生成一遍
prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，shot on 16mm, —ar16:9
這里我想要換一個畫面角度，所以選擇使用【shot on 16mm】,這種通常是電影、紀錄片、廣告拍攝使用的，所以使用這個關鍵字去生成圖片畫面會有一種電影感，角度上我覺得更好一點。
最后說一下，我是用的版本是V5，產出的1024??1024高解析圖片，但是我個人感覺還是不夠清晰，所以會搭配圖片放大工具來一起使用。我常用的圖片放大工具http://replicate.com/sczhou/codeformer，放大效果清晰度都非常好，而且處理速度也很快，重點是免費！?。≈苯由蟼鲌D片無需更改任何參數，使用默認預設清晰度絕對夠用，畫質太高也沒有太大意義，反而會影響網站加載速
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
平臺一致性的問題
按鈕的位置非常重要
為什么"確定"按鈕在右側效果更好
按鈕放置在角落還是放在一起？
結論
大家好，我是西瓜～
這次我們聊一個設計知識點，這個知識點平日會被設計師忽視，因為它太過于默許，但我們應該知道的是，很多默認的東西也是有自身的知識結構支撐，久而久之被人忽視了。
大家應該都見到過彈窗、表單里的"確定"和"取消"按鈕吧，這兩個按鈕大家還記得會放在頁面中的哪個位置嗎？"確定"按鈕是完成任務的主要操作，而"取消"按鈕是輔助操作，它主要的作用是用于返回到起點屏幕而放棄任務。那么，根據它們的功能，最佳的按鈕順序是什么？"確定"按鈕應該放在"取消"按鈕之前還是之后呢？
可能這時候很多設計師會按照習慣，選擇遵循一致性，采用一些常見的組件樣式進行操作。雖然這看起來似乎是解決問題的方法，但實際上并非如此。這并沒有回答哪種位置對用戶更有效以及為什么，單純遵循已有組件并不足以讓設計師有更好的思維和主動思考的意識。
"一致性"是設計師中常用的一個詞。然而，這常常也被用作一個借口，讓設計師不深入思考用戶面臨的設計問題，如果一個設計師都不知道為什么一致性的規(guī)則存在，那么遵循這種設計慣例又有什么意義呢？
如果某種設計慣例對用戶來說是有害的，那么設計師是否應該盲目遵循它，僅僅因為要追求一致性？體驗極差的設計樣式和結果是否應該因為設計師希望迎合大家都默認的設計一致性而繼續(xù)存在？這其實本質就是個問題...
現在網上有很多組建和參考，都被設計師天天借鑒和廣泛使用，因為它們適用于用戶。但關鍵在于，設計師永遠不應該滿足于墨守成規(guī)的選擇設計的一致性，將其作為做設計的唯一理由，我們關鍵還是要理解為什么應該以某種方式而不是其他方式來設計用戶界面。
這時候有的設計師可能會主張通過賦予操作按鈕更多的視覺重量和清晰明了的標簽來突出界面中的操作按鈕，而不是僅關注按鈕的位置，雖然操作按鈕的視覺重量和標簽是需要考慮的重要設計方面，但它們并不是唯一的方面。
真正一名有思想，會獨立思考的設計師會綜合考慮每個設計方面對用戶的影響，而不只是關注其中的一個方面，對于設計師來說，最難的是確定主要操作和次要操作的最佳放置方式。這就是我為什么關于"確定"/"取消"按鈕的位置進行說明的原因。
當我們在使用設計組建框架前進行考慮時，你可能會開始明白哪個位置會對用戶效果更好一些，我們可以通過分析設計對用戶的影響來解決這個問題。
有些設計師認為，將主要操作放在左側，在次要操作之前，對用戶來說更好，因為它更近，所以點擊所需時間更少，這看起來好像有點道理，但我們不能忽視一個問題，即在選擇要執(zhí)行的操作之前，用戶會查看所有選項，這意味著大多數用戶不會在不查看旁邊的次要操作按鈕的情況下盲目地點擊主要操作按鈕。
他們將首先看到左側的主要操作，然后再看右側的次要操作，然后他們會將視線轉回主要操作按鈕進行點擊。這里總共涉及到三個視覺注視點，在多個方向上分散了用戶的注意力。
與將主要操作放在左側相比，將主要操作放在對話框的右側，將次要操作放在左側，用戶只需注視每個按鈕一次，并在主要操作按鈕上結束。這樣一來，視覺注視的數量就減少了，并且在一個方向上產生了更流暢的視覺流動。
用戶只關注每個按鈕一次，并最終停留在主要操作按鈕上，將主要操作放在左側可能會使用戶更容易點擊，但從用戶的心理過程和視覺注視速度來看，將主要操作放在對話框的右側實際上更快。
當用戶點擊“取消”操作按鈕時，他們期望的是產品不進行任何操作，而是將他們返回到起始屏幕位置，因此，"取消"按鈕的功能類似于"返回"按鈕。
當用戶點擊“確定”操作按鈕時，他們期望產品進行按鈕所表示的操作，并將他們帶到下一個屏幕。因此，"確定"按鈕的功能類似于"下一步"按鈕，將次要操作按鈕放在左側，將主要操作按鈕放在右側，可以與用戶期望的"后退"和"下一步"按鈕功能相匹配。
這類似于分頁按鈕的放置方式，將用戶帶到下一頁的按鈕位于右側，將用戶帶回先前頁面的按鈕位于左側。這種按鈕位置的安排是有效的，因為它與用戶從左到右的閱讀和導航方向相吻合，其中右側是前進方向，左側是后退方向。
對話框中的"確定"和"取消"按鈕應該遵循類似的交互模式，因為它們的功能類似于分頁按鈕，另外這種左右方向模式也是用戶熟悉的。將主要操作放在右側，將次要操作放在左側，可以使對話框按鈕對用戶更易于理解和使用。
將按鈕放置在對話框的右下角更容易被用戶點擊，因為這符合【古騰堡圖表】。在古騰堡圖表中，右下角區(qū)域是終端區(qū)域，用戶在掃視后的最終目的地。
將按鈕放在終端區(qū)域可以使用戶在視覺掃描時看到他們最后需要執(zhí)行的主要操作，這不僅改善了視覺流動，還改善了任務流程。用戶在掃視過程中不會錯過主要操作按鈕，當他們經過時，他們的目光會停留在上面，從而可以立即點擊它。
掃視對話框并采取行動變得更快更容易，因為用戶的目光最終會落在主要操作按鈕上。
我們需要考慮另一個問題，那就是我們應該將按鈕放在角落還是放在一起，當將主要操作和次要操作放在對話框的角落時，這與左右導航方向相吻合，這是很好的映射。然而，由于"確定"和"取消"按鈕并不是導航按鈕，因此并不需要遵循方向映射，有時候這樣做可能帶來更多的弊端。
較大的視覺分離使得比較操作變得困難，并將一個操作與另一個操作隔離開來 如果產品頁面即將執(zhí)行用戶無法撤銷的關鍵操作，那么用戶可以看到"取消"按鈕和"確定"按鈕是很重要的。在這種情況下，"取消"按鈕的功能可能類似于"上一步"按鈕，但它更重要，因為它充當安全按鈕以防止任何更改。
將"取消"按鈕放置在最左下角的危險在于，由于兩個按鈕之間的視覺分離較大，可能會導致用戶忽略它。將"取消"按鈕與"確定"按鈕放在一起可以讓用戶更輕松地在一次注視中查看和比較這兩個操作，以選擇最佳操作。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
如果軟件操作速度提升了，那么在相同時間內，我們可以有更多時間和精力用于方案的思考，提升工作效率。這也是我們經常看到很多B端產品，在系統(tǒng)做快捷鍵的原因之一。在日常軟件的使用中，我們要盡可能的多使用快捷鍵，減少鼠標操作。舉個實例：
比如，“保存” 用鼠標操作：點擊界面開始菜單 - 調出下拉菜單 - 找到“保存”按鈕再點擊，這一系列動作需要點擊 3 次鼠標，花費3～4 秒。如果使用快捷鍵，光靠下意識的動作，就可以在 0.1 秒內完成操作。
下面整理了一些常用的 Figma 快捷鍵使用技巧，幫助我們提升Figma的操作效率，更快更好的完成工作，節(jié)省時間，以便更專注地思考方案。
文章末尾附 Axure RP9、 Sketch提高效率的常用技巧。
快捷鍵：【Ctrl + Shift + ?】 ，打開 Figma 的快捷鍵面板，可查看 Figma 的所有快捷鍵，方便快速查找。
快捷鍵是【K】，在設計中縮放是經常要用到的功能，在 Figma 中，按一下【K】鍵進行縮放，就可以完全保證比例。
快速畫出環(huán)形進度條的方法，先畫一個圓，然后鼠標拖動兩下就完成了。如下圖：
在桌面或文件夾，選擇需要填充的圖片【Command + C】。點選Figma中待填充元素【Command + V】。填充成功，如下圖：
選中一個已經調整好樣式的元素（圖形或文字），第一步：【Command + option + C】，第二步：【Command + option + V】就可以把樣式復制粘貼下來。如下圖：
對于使用組件的元素，在調整的時候需要修改組件母版，才會對每個組件生效。當有很多組件時，我們可以通過任意組件，點選右側“跳轉回組件母版”icon，快速定位至母版。如下圖：
第一步：點選右側“跳轉到組件母版”icon，右側紅框處
第二步：自動定位到該組件母版
選擇一組陣列中的多個元素之后，可以隨意交換任意兩個元素之間的位置，其他的不受影響，還能直接拖動調整它們的間距。如下圖：
快速批量修改顏色。比如下面九個元素中有三個是紅色，當我想要批量修改這三個紅色元素的時候，我不需要一個個選擇這三個元素，只需要批量選擇，然后在右側屬性欄那里，選擇想修改的那個紅色，直接改顏色，三個元素的顏色就會一起修改了。
快捷鍵【Alt+L】，可以直接將所有圖層折疊起來，這樣，不管之前展開了多少層，都能直接折疊，方便快速瀏覽整個系統(tǒng)的全貌。
使用鍵盤快捷鍵快速瀏覽圖層。快捷鍵【Tab】快速向 下 切換選中圖層，【Shift+Tab】快速向 上 切換選中圖層。
使用顏色樣式時，這里有一個小按鈕（下圖紅框標出），可以快速得在列表樣式和網格樣式之間進行切換，使用列表樣式能夠更方便瀏覽使用了哪些顏色，方便進行管理。
吸色工具的快捷鍵是【i】，當你按住【i】鍵不動時，移動光標，就能預覽顏色，而不是直接取色了，預覽的顏色就如下圖，是展示在右上角的。
快捷鍵是 【cmd/ctrl + D】，如下圖所示，向右下方復制一個元素，然后使用【cmd/ctrl + D】，會繼續(xù)向右下角復制元素，重復的是相關對象和操作中設計到的所有元素。
如果設計時輸入了一些文本，行高有問題，但是暫時又沒有很明確的行高參數，這個時候，只需要在行高這里輸入 auto，點擊回車，就可以把這些文字設置成自動行高了。如下圖紅框位置：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。 著作權歸作者所有。商業(yè)轉載請聯系作者獲得授權，非商業(yè)轉載請注明出處。
先問你一個問題。
拼多多、淘寶、京東這三家購物平臺，你認為它們的區(qū)別是什么？
或者換個方式問你。
買電器你去哪個平臺？買衣服你去哪個平臺？ 買垃圾袋你去哪個平臺？
是不是有了答案了？
沒猜錯的話， 大部分人的答案是：買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看，這就是一個購物心智模型，你的心里對這三家平臺已經產生了固有的心智，如果讓你去京東買衣服，你會不會覺得，有些別扭？沒錯，這就是心智模型。
百度百科對心智模型的定義是：
“深植我們心中關于我們自己、別人、組織及周圍世界每個層面的假設、形象和故事。并深受習慣思維、定勢思維、已有知識的局限?！?
關鍵詞是：故事、習慣、局限。
淘寶一開始就我們講了一個故事，一個萬能的集市，我們習慣在上面買衣服，但是也產生了局限性，那就是，當我們想買大額電器的時候，還是會選擇京東。
我個人對心智模型的理解是：
我們內心深處對一個事物的看法。
空口聊天多沒意思，下面舉個例子。
這是一尊陶俑，第一眼你覺得她像什么？
是不是覺得像米老鼠？
為什么？
因為陶俑的頭上的發(fā)髻和米老鼠標志性的耳朵很像。
如果你從沒見過米老鼠，你還會覺得她像米老鼠嗎？
一定不會。
這就是心智模型，你對頭頂的大圓形的心智是“米老鼠”，所以一旦你看到類似的形狀，米老鼠的形象就會浮現出來，這個發(fā)髻的形狀和你心里對米老鼠的形象產生了匹配。
對心智模型有沒有一點印象了？下面我們接著聊。
我不想用具體的界面來聊，那樣的話太散，我認為要想理解一個概念，最好還是從“面”的角度來說，所以下面我會舉一些商業(yè)上的案例來輔助理解。
心智模型有哪三種運用方式？
第一種：創(chuàng)建新的心智模型
第二種：改變舊的心智模型
第三種：匹配現有的心智模型
可以理解成一件事情的新生、改變和延續(xù)。
下面咱們一個個來。
第一種：創(chuàng)建新的心智模型
難度指數：難啊。
記得《盜夢空間》里最難的是什么嗎？
最難的不是盜夢，而是植入一個想法。
創(chuàng)建新的心智模型有異曲同工之妙，都是讓別人內心接收一個事物，需要刻意培養(yǎng)。
舉幾個例子。
當年外賣剛開始的時候，家家搞補貼，很多時候幾乎不花錢就可以點外賣，后來這些福利沒有了，為啥？
因為點外賣的心智已經培養(yǎng)好了，你離不開它了，所以平臺可以“不慣著你了”。
還有唯品會的正品低價、瑞幸一開始的星巴克平替，這些都是他們想要植入到用戶大腦中的心智。
為什么要費勁植入一個新的想法？
因為一旦植入了，就很難改變。
現在我身邊的很多朋友想買一些低價的品牌都會上唯品會，買咖啡會喝瑞幸，一旦用戶的習慣養(yǎng)成就很難改變，意味著什么？
意味著留存和轉化的成本更低了。
第二種：改變舊的心智模型
難度指數：也難。
《盜夢空間》里小李子的妻子被他植入了一個想法“你不在現實世界里”，當他和他妻子回到現實世界后，他妻子仍舊認為自己不在現實世界里，這個被植入的想法已經根深蒂固，很難改變。
所以改變舊的心智也不簡單。
例如小米最初主打極致性價比，后來想往高端路線走，很難，大家心里已經認準了小米就是“性價比之王”，也就是你的產品不僅要好還要便宜。
這就導致小米一漲價，大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價比，小米往高端發(fā)展，但是仍舊很難。
拼多多的百億補貼也是一樣的道理，一開始的砍一刀深入人心，大家對拼多多的心智已經成型：便宜，質量一般。拼多多想改變這個心智，推出百億補貼，并承諾假一賠十，就是想告訴大家，我拼多多，也是有正品好貨的。不過，效果嘛，見仁見智。
第三種：匹配現有的心智模型
難度指數：相對簡單。
其實匹配現有的心智模型，是相對最簡單的方法，市場已經幫你把用戶習慣培養(yǎng)好了，你直接使用，那肯定事半功倍，省時省力啊。
舉個例子，大家最近有關注小米的 13 Ultra 嗎？
小米和徠卡聯合研發(fā)的，主打徠卡調色的相機。
我有一個同事就直接把手里的微單換成了 13 Ultra，因為拍照足夠好看而且便攜。
這里不是要推銷手機啊，是想讓你們了解 13 Ultra 是個什么東西。
然后給大家看看它的手柄（一個配角，可以拆卸）。
是不是有些熟悉？和相機像不像？
這個手柄就是沿用了相機的心智模式。
小結一下：
心智模型有 3 種用法：
下面聊聊，咱們怎么做才能更加匹配用戶的心智模型？
同樣的，我不會拿具體頁面來舉例，還是希望把思考方式分享給大家，而不是某一個頁面的設計。
要想匹配用戶的心智模型其實就三步：
了解業(yè)務、了解用戶、競品調研。
或者可以這么說， 在懂業(yè)務、懂用戶的基礎上，還要了解行業(yè)內的通用做法。
1. 了解業(yè)務
一定要了解業(yè)務，為什么？
因為好的設計方案千千萬，但是匹配你的業(yè)務的方案才是好方案，如果不了解業(yè)務，可能設計出來的方案就是自嗨，例如網上很多的 dribble 風設計。
又比如說手機瀏覽器一般都把搜索框放到屏幕頂部，而夸克瀏覽器卻把搜索框放到了下面。
為什么？
因為夸克想推翻傳統(tǒng)的瀏覽器，想打造一款更年輕更好用的瀏覽器，把搜索框放到下面也是滿足他們的業(yè)務訴求，現在手機屏幕越來越大，搜索框放在下面手指操作更加方便。
所以，一定要先去了解業(yè)務。
拼多多和淘寶同樣都是電商平臺，可它們的用戶心智相差甚大，因為最后方案設計是服務于最初的業(yè)務目標的，業(yè)務不同，呈現的方案也不一樣，最后讓用戶形成的心智也不同。
2. 了解用戶
為啥？給老人和小孩設計的界面能一樣嗎？
就拿顏色和文字來說。
小孩喜歡高飽和、豐富的顏色，而老人則需要考慮在各種場景下都能看得清楚信息的顏色。
小孩喜歡圓潤的卡通字體，而老人需要識別度更高的字體，更大的字號。
不同的用戶，采用的設計一定是不同的，只有了解了他們的喜好和痛點，才能做出符合他們心智模型的設計。
3. 競品調研
為啥要競品調研呢？
因為競品和我們的產品類似，那么意味著用戶大概率重合度也高，甚至業(yè)務上都有一定相似度，那么意味著，競品的方案，大概率是經過市場驗證的符合用戶心智模型的方案。
你看，既然競品已經給咱們打了個樣，為何還要自己悶頭造輪子呢？
咱們目的是解決問題，又不是為了證明自己很厲害。
但是，不要誤解，我不是說照著競品抄，而是取長補短，所以不僅要調研，還要分析，分析就是把競品的優(yōu)劣勢找出來，好的地方咱們可以酌情借鑒，不好的地方，咱們也要避個雷嘛。
好了，小結一下，要想匹配用戶的心智模型，一定要了解業(yè)務、了解用戶，還要做競品調研了解市場的通識性做法。
以上。
文章來源：優(yōu)設網 作者：餿面包
首先說明，競品調研的方法有很多，本文只提供一種方法供參考，建議大家活學活用。建議從下面 4 個方面入手：
1. 調研背景
主要說一些為什么要調研，希望通過調研答達到什么樣的目的？是視覺升級、體驗升級還是為了提升轉化率？只有了解為什么做調研這件事情，才能知道從哪幾個維度調研。
2. 調研樣本
建議選幾個直接競品，再選幾個優(yōu)秀的次要競品也是可以的，可以幫助補齊盲點。
3. 調研維度
調研維度要根據調研目的來確定，例如如果是為了視覺升級，那么調研維度主要就集中在視覺效果上，如果是體驗升級，那么調研維度主要集中在交互體驗層面。所以維度的選擇一定是和此次調研的目的緊密相關的，不過，倒也不是說如果是視覺升級就只調研視覺方面的內容，而是咱們要有一個主要的調研方向，啥都想要，最后啥都做不好。
4. 結論
結論是最重要的，畢竟，做這次的調研不就是為了這份結論嗎？所以最后一定要有結論，也就是咱們通過調研得到了什么結論。
1. 調研背景
我公司這個項目是做一個官網的改版，官網主要就改版主要目標有兩個：
第一個目標是視覺體驗升級，拆解下來就是界面更好看，內容更好找。
第二個目標是提升用戶轉化率，更細致的拆解一下就是讓更多的用戶點擊「咨詢」按鈕。
可以得到關鍵詞：界面更好看、內容更好找、咨詢客服的人數更多。
好，咱們繼續(xù)，下一步是找樣本。
2. 調研樣本
前面提到過，樣本最好是直接競品+間接競品（主要是一線大廠競品）。所以這次調研我選擇了幾個直接競品的官網，以及華為、飛書等這樣的做的比較優(yōu)秀的產品進行輔助分析。
3. 選取調研維度
調研維度又可以分為兩大部分：整體結構、內容拆解。
了解整體架構是每個競品調研都離不開的步驟，可以幫助我們快速了解行業(yè)內的通識性做法，畢竟站在巨人的肩膀上才能看得更遠嘛。
①整體架構
我當時的做法是把主要競品的官網都截圖下來，然后一個模塊一個模塊的去分析，其實看下來你會發(fā)現，大家的做法都是有跡可循的。
看下面的圖片，我把他們類似的模塊用同樣的顏色框出來，框出來后就會發(fā)現，哦，原來，這就是行業(yè)內的通識性做法。
然后我把這種通識性做法歸納總結出來，發(fā)現，其實官網首頁可以劃分為四大板塊：
你看，看似有很多復雜內容的官網， 其實也就這幾個模塊，這樣看是不是就清晰多了。
既然咱們通過架構梳理來了官網的內容，下一步就進行內容的拆解了，拆解什么內容？就是拆解上面總結出來的規(guī)律呀。
②內容拆解
為啥要拆解內容呢？因為咱們競品分析的目的不就是要做到“人有我優(yōu)”嘛，咱們競品分析是為了青出于藍而勝于藍呀，所以咱們不能直接抄人家的內容，這是無效設計，咱們要做的是分析他們的優(yōu)點，然后借鑒，然后超越。
進行內容拆解的時候，建議先定幾個拆解維度，不然會沒有方向，這里我分了三個維度來進行拆解：
我就拿「建立認知」板塊來舉例。
官網首頁的建立認知是什么？
是讓進來的用戶對整個網站有一個基礎的認知，顧客來了，對店鋪總要有一個第一印象吧。
通過前面的架構拆解我們發(fā)現，首頁一般使用 4 種方法來對用戶建立認知，哪四種？banner、產品介紹、解決方案、產品優(yōu)勢
一個用戶看了 banner，瀏覽了產品介紹和解決方案，看了產品優(yōu)勢，是不是對咱們的產品有了一個認知了，這就是建立認知的過程。
那么咱們如何去分析呢？
我的做法是一個個板塊分析，有些麻煩啊，但是相信我，值得。
下面我就拿建立認知里面的“產品介紹”來舉例子，看看如何去分析產品介紹這個板塊。
使用 3 個維度來分析：
維度 1：用戶訴求（用戶進來之后的訴求）
產品介紹內容是否有我需要的產品和功能？是否滿足我的需求？
維度 2：業(yè)務策略（針對用戶訴求，業(yè)務是怎么解決的）
講清楚三個問題，即“我們的產品是什么”、“我們能做什么”、“我們有什么優(yōu)勢“
維度 3：常用表達形式（用什么樣的表達方式來實現策略）
分點描述：減少大段落文字，分點描述，增強閱讀性，降低理解成本
提煉賣點：將核心功能提煉出來，吸引用戶注意力，精準打擊，結合圖標提升可讀性
試用入口：視覺上強化按鈕，引導轉化
圖文結合：圖＞文，可視化表達降低理解成本，增強臨場感
拆解下來，是不是對產品介紹板塊很了解了，產品介紹板塊主要的目的就是為了講清楚咱們是誰，咱們的優(yōu)勢啊。王婆賣瓜，瓜雖好，但是咱們得讓來的人知道咱們的瓜好呀，所以表達方式也是至關重要的，用什么形式去表達這個板塊呢？其實競品已經有了很好的解決方案，那就是上面描述的。
你看，這樣一通分析，其實你的方案就自然而出來了，你知道往哪個方向去使勁了，而不是看別人有啥咱們就做啥。
文章來源：優(yōu)設網 作者：餿面包
如果想知道某個網站配色方式，除了打開開發(fā)人員工具或是檢視源碼，也有第三方服務可以使用，即使無法完整復制別人的配色，也能快速得知網站使用的顏色代碼或配色模式，取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡單的方式來完成這些工作呢？若你有類似的需求，接下來要介紹的服務或許可以滿足，這項服務會提取特定網頁使用的顏色，讓顏色相關信息更一目了然。
本文要介紹的「Alwane」是一個網頁色彩提取工具，可以在使用者輸入特定的網址后取得該網站使用的顏色代碼或描述，產生為調色盤鏈接，重新分類、編排各種顏色，最簡單的使用方式是輸入網站網址就能提取，也能顯示其他相關色彩，如果想分析、保存某個網站或品牌使用的顏色，Alwane 是個非常方便而且好用的工具。
除了將提取的顏色代碼以可視化方式呈現，還能夠以調色盤或是程序代碼方式呈現，包括 CSS 和 SASS 兩種顯示程序代碼，對于要取得特定的網站顏色來說很有用，若有類似需求的話不妨打開 Alwane 網站試試看。
網站鏈接：https://alwane.io/
使用教學
開啟 Alwane 網站后直接在左上角「Extract CSS Colors」輸入要提取顏色的網址，預設情況下會從 HTML 和 CSS 樣式表單取得顏色，如果某些情境下需要從 JavaScript 獲取顏色可在「Advanced」設定選項找到。
從提取后的色彩結果可以看到各種顏色分布，包括顏色的預覽、變量名稱和色碼（hex code），從左側可選擇為顏色重新分組、排序或是切換 CSS、SASS 色碼。
從上方選項切換調色盤或程序代碼模式，也能快速將所有 CSS 代碼復制到剪貼簿。
如果想要保存或分享網站的配色、調色盤、CSS 等信息，點選右上角「Generate」就能產生鏈接咯！
值得一試的三個理由：
柵格一直都是很多同學非常疑惑的地方，無論是柵格的日常使用，又或者是柵格在整個產品當中的作用，一直以來都有非常多的疑惑，今天就來聊聊柵格在實際工作如何使用，以及產品之間究竟有何區(qū)別。
上期回顧：
其實在說柵格的使用，我們就在討論網頁當中的布局方式，以及他們之間的不同點。
布局方式，本質上就是去處理窗口寬度與網頁內容的關系
用戶會使用瀏覽器打開不同尺寸的窗口寬度，而網頁內容究竟應該如何去適應這些窗口尺寸？
通常會分為：固定布局、流式布局、自適應布局、響應式布局
固定布局是一種最為簡單的方式，它的設計邏輯是將頁面當中的內容 “寫死固定” 在屏幕上，內容不會隨著本身窗口寬度進行改變，所有元素都使用 px 作為基礎單位
當然在固定布局當中，窗口大小與頁面內容會存在兩種基本關系：窗口過大則將頁面元素進行居中，窗口過小則展示橫向滾動條
固定布局的好處是這種方式相對簡單，只需將頁面設計好即可，不會存在太多兼容性的問題（因為也壓根沒有考慮兼容性的相關問題）
固定布局通常出現在 老舊的政府項目、網頁的登錄注冊中
流式布局是最基礎的變化布局，它的設計邏輯是將頁面當中的元素設計成可以流動的 “水” ，通過在頁面，設計不同的“杯子”容器來裝下頁面內容
這里的“水”一般指的是 文字、圖標、以及一些頁面重復出現的元素。而杯子通常是我們設計的容器，它高度固定，只會變化其寬度，比如卡片、外層容器控制寬度 等等...
因為“杯子”的限制，也就導致水會根據杯子的寬度進行延展流動，進而形成流式布局
使用流式布局可以通過較低的開發(fā)成本，來實現一個頁面當中多尺寸的小范圍適配，如果屏幕尺寸跨度較大，則會比較困難
而流式布局最常使用的方式就是通過柵格系統(tǒng)，來確定整個“杯子”的寬度，進而讓“水”能夠在頁面當中實時滾動展示
這里有兩個需要注意的點：
在研發(fā)層面，杯子的大小是需要進行限制的，通常會去設定它的最大值與最小值，當它超過最大值則居中對齊，當他
在流式布局當中，窗口超過其最大值則固定左側，右側空白補充；窗口小于其最小值則展示橫向滾動條
比如與上方同樣的案例，將頁面當中內容的文字實現成流式布局，并且將其流體布局的寬度限制為 200px - 120px，這時則會形成頁面的寬度變化，會導致內容發(fā)生直接的變化
流動的“水” 需要去考慮它漫出的情況，即在“水杯”高度固定的情況下，整個寬度無法裝下如此多“水”的情況，通常我們可以使用 “...” 進行標注。這個思路后續(xù)在響應式布局當中也會體現
自適應布局是將差別較大的屏幕尺寸，去創(chuàng)建多個不同的設計稿，每一個設計稿去對應 一個用戶實際的尺寸范圍。改變屏幕分辨率就可以去切換不同的設計方案
通俗一點來說，自適應就是去單獨設計桌面端、平板端、移動端的頁面，并且將它們三者進行獨立，而系統(tǒng)通過不同尺寸間的 屏幕斷點/瀏覽器 UA 等...（實際前端判斷遠比這個更加復雜，但是為了方便理解可以暫且這么認為），進而適應出不同的設計頁面
而通俗一點來說，自適應是使用多套代碼去對應多個頁面，并且都是在業(yè)務非常復雜的情況下進行使用，在國內當中最常使用便是 桌面端與移動端 的產品
比如 語雀 當中的 桌面端與移動端就是一個典型案例，他通過判斷用戶的使用設備，將頁面拆分為了，桌面端、移動設備端、小程序（單獨設計適配的）。因此只需要將每種設備的設計思路分析清楚即可
自適應布局與柵格
自適應主要是表達多個設備尺寸下進行切換的 布局方式，在不同的設備之間，也是需要去使用流式布局以及其他布局方式
而不同的設備之間，屏幕分辨率的差異就會涉及到一個關鍵點，屏幕斷點
屏幕斷點
屏幕斷點，又叫媒體查詢 @media，因為在整個設計當中，屏幕尺寸是極其復雜的，除了我們常見的尺寸：1920、1080、1440、1366
用戶還可以通過調整窗口的大小，進而改變網頁尺寸。而屏幕斷點，最主要是判斷屏幕的寬度，來確定目前的尺寸究竟應該采取什么設計方案
比如在設計一款成熟的 B 端產品時，因為商業(yè)的緣故我們作為各大平臺（釘釘、企微、飛書）的 ISV（合作上架），產品上架到不同平臺時，需要對不同平臺尺寸進行調整，比如釘釘為 1024px、企微為 980px、飛書為 1280px，這時為了滿足用戶的實際場景，會將這幾類特殊的尺寸作為屏幕斷點進行對應的布局設計，以滿足不同產品當中的最佳實踐
關于屏幕斷點的媒體查詢，是在前端 CSS3 代碼當中，提供給用戶校驗整個屏幕的寬度，比如在下圖前端代碼當中，則代表在屏幕尺寸小于 480px 時，使用 字體大小為 16px
而確定斷點才是這其核心，這里給大家提供兩個思路，實際設計當中還會更為復雜：
物理斷點：也就是屏幕當中，已經劃分好的斷點方式，比如顯示器的全寬大小、不同設備之間的屏幕分辨率差異
設計斷點：在設計過程當中，一些必要的屏幕尺寸。比如上方講到不同平臺的設計問題
其實屏幕斷點不是最終目的，最終還是想通過屏幕斷點，將頁面當中不同的不同元素的處理方式實現在設計稿中，如果不需要，完全可以不考慮增加屏幕斷點。
這里先多聊一句，其實響應式的大規(guī)模普及，是源自 2015 年 Google 的倡導（可以看到 Google 旗下的很多產品都采取的響應式布局，例如 YouTube），它最初的目的非常簡單，就是為了提高響應式在移動終端上的運行效率。因為在 2015 年時，安卓 生態(tài)下的屏幕尺寸多到可怕，以至于需要有一套解決辦法來讓用戶運行并使用。
響應式布局是確保一個頁面當中所有的設備（桌面端、平板端、移動端）都能夠展示出非常滿意的效果，進行產生的一種技術方案。它更像是 流式布局與自適應布局 的結合，它能夠通過對屏幕尺寸的快速響應，進而對頁面的內容進行更為細致的變化。
通俗一點來說就是通過一套代碼去實現多個頁面，并且將多個頁面的內容進行細化，進而能夠快速適配多個設備。
對于多個設備，最主要是調整頁面柵格數量、水槽寬度、頁面距進行適應，比如在 YouTube 當中，就是通過響應式布局，讓頁面實時響應進行處理。
響應式布局與柵格
比如以 Ant Design Pro 的頁面進行拆解，你會發(fā)現它在 575、767、991 的尺寸中，頁面布局發(fā)生變化，然后根據屏幕斷點之間的頁面布局，采用向下兼容的適配方式，Ant design Pro 屏幕斷點可以劃分為 320、576、768、992、1200，響應策略如下圖：
你會發(fā)現布局其實是依賴于柵格，而柵格的使用，正是由于不同的布局所導致。只有通過柵格，才能夠確定流式布局的比例、響應式布局的變化方式，但是在 B 端產品當中，并不是所有頁面都需要使用柵格，經?？吹揭恍┳髌芳鋵嵤菫榱藮鸥穸鴸鸥?
在 B 端產品當中在，真正使用柵格的地方更多是工作臺、官網，而其他相對復雜的頁面是沒辦法使用柵格，而對我們每一個產品而言，可以優(yōu)化的點就是在屏幕尺寸較小的情況下，默認讓整個產品導航菜單收起，以提供給用戶更多展示內容。
文章來源：優(yōu)設網 作者：CE青年
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.88yangsc.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
什么是柵格？我這里就不做說明了。很多優(yōu)設的文章都寫的很清晰了。這篇文章僅從我最開始接觸柵格所遇到的困惑和部分設計師始終糾結的點來和大家一起討論討論。
B 端到底用什么尺寸進行設計？
要弄清楚用什么尺寸設計，首先要確定布局。我們常用的就是上下布局、左右布局、“T”字布局。其他布局基本上是這三者的延伸和拓展。上下布局一般是固定頂部，有點類似于 PC 網頁設計，實際上也差不多。現在的B端設計中很多都會搭配著這種布局用，比如幫助中心、消息通知，客戶入網申請等（這些我都遇見并做過）。左右布局和“T”字布局，一般固定左側，右側區(qū)域做自適應。
我們看一下百度統(tǒng)計最新出來的當前計算機分辨率數據，從統(tǒng)計的數據中可以看出，小尺寸的屏幕是越來越少了。但是不是我們就要用最小的尺寸或者用份額最大的 1920 進行設計了？
顯然不是按照這個維度來確定尺寸的。對網頁設計來說，設計師差不多都知道有一個 1200 有效內容區(qū)域的說法。如果沒有特殊要求，上下布局也是遵循這個原則的。設計師中絕大部分，包括我很多同事平時基本上用的 1920 和 1440 兩種尺寸來進行設計。對于 B 端來說，不管你采用 1920 或者 1440，在做上下布局頁面定寬設計的時候，遵循 1200 有效內容區(qū)域這個原則就是沒有問題的，看了很多文章上面舉例了 960、990、1024、1156 等等，大家都不用糾結，沒有特殊要求，這些都沒啥問題。
上下布局在 B 端設計中是一個補充，有的可能有，有的可能沒有，所以用 1920 還是 1440 最好還是根據左右布局來，保持統(tǒng)一。兩年前我看過一篇大廠寫的布局的文章，用的是 1280 的尺寸，記得是說因為考慮縮小瀏覽器會發(fā)生遮擋或者擠壓（別問我為啥還記得，因為當時對于尺寸糾結的太厲害，至今難以忘懷），現在因為技術等方面的發(fā)展，個人認為再用 1280 的做已經不合適了。1440 的尺寸目前做中后臺是比較通用的，大家也可以參考看一下螞蟻 Ant Design。至于 1920 的用來設計 B 端行不行呢？我認為也是可以的，我就用過，也沒用戶反饋說顯示有問題，我就當他沒問題了。不過我還是建議大家在做 B端設計的時候用 1440 的來做，特別是用戶群很復雜的情況下，方便低分辨率的電腦查看。當然如果我們給某一企業(yè)做定制服務，那就沒尺寸的問題了，照著客戶電腦尺寸來就行了。
現在有很多插件可以進行布局，軟件一般也有自帶布局功能。這里不做陳述：
這里介紹我常用的 sketch 布局。
這里我也創(chuàng)建了一個 1440 的網格系統(tǒng)，供大家參考，大家也可以根據自己的實際情況去建立自己的網格。
頂部高度沒有特殊要求建議不要超過 100px，我一般就是 60-80px 內設定的；左側可以根據目錄內容自己設定一下，一般 200 多就差不多了。邊距我一般設定 20px、24px。這樣再對剩下的距離做柵格就行了，列寬保持偶數即可。
有時候做柵格的時候會遇到一部分列寬是 42px，一部分列寬是 43px，這種設定也是可以的，回歸到柵格系統(tǒng)的意義，柵格本質上不是為了保證像素級精確，而是為了保證瀏覽視覺級別的秩序、協調與統(tǒng)一，所以大家沒有必要糾結。
“沒有絕對正確的柵格設計，只有最適合的柵格設計”，希望這篇文章可以幫助對柵格有疑惑的設計師們，同時也期待大家留言，大家一起學習探討。
文章來源：優(yōu)設網 作者：神經蛙
藍藍設計的小編 http://m.88yangsc.com
