偏差經常不知不覺滲入我們的設計。通過了解、消除這些認知偏見，可以幫助我們改善用戶體驗和服務質量，確保決策的一致和中立性。
供應鏈資源整合是企業發展態勢。企業對內部多崗位協作、企業與企業間的協作效率有更多訴求。
企業級服務系統的智能在線處理、數據準確、信息安全等特征，成為企業實際作業的得力助手。（以下簡稱B端）
系統提供商也便對業務型產品、設計、開發、運營等人才有更多需求。
在C端浪潮中，設計師通過創造用戶流暢和驚喜的體驗，發揮了顯而易見的價值。
然后B端系統的業務復雜特性，普遍認知產品經理、開發會體現更大的價值。
設計師作為中間角色，難免「尷尬」，甚至淪為產品經理原型的高保真繪制人員，缺少發言權，或初次接觸對海量信息無從下手。究本質原因：
未直接接觸業務方和用戶，無法對需求場景有深入的了解，缺少系統性設計分析、設計判斷能力
我在幾年的實戰中，運用辛老師 「交互設計五要素」 基礎原理，融合于B端業務體系，形成一套自己的思維圖譜。（以下簡稱五要素）
從「五要素」出發，會更快速地get到關鍵設計點，抱著開放的態度與產品討論方案，總會愉快地達成一致，順利對接開發。
就像我們寫小說「講故事」一樣：時間地點人物、有什么目標、使用什么工具，完成什么事情，故事才完整?；贐端實際業務場景的五要素，阿飛解說如下：
角色：
老板、運營、銷售、物流、采購、庫管、財務等（不同崗位日常事項不同）
權限：
主子賬號（涉及到模塊間的操作權限、數據權限）
用戶目標：
B端一般是具有明確的作業目標，更地完成工作。老板一般希望節約人力成本，且可即時響應客戶需求
商業目標：
為客戶賦能、提升下單率、支付率、新業務滲透力、裂變等
業務目標：
產品會不斷的迭代，了解當下需求中的業務目標
設計目標：
基于以上目標，設計需符合用戶思維習慣，提高處理效率，同時避免誤操作等
任何場景下，人的行為都是有「目標動機」
當以「目標」為出發點，可以增強設計判斷力，輸出有效方案。另外真正有價值的商業目標一般都是和用戶終極目標所吻合。
時間、地點是場景的必要組成
When：
隨時隨地在線或工作日期間，如：售后客服需要隨時在線；財務人員一般工作日處理任務
Where：
辦公室、倉庫、戶外等。需考慮線上線下結合，系統是為用戶的線下作業場景服務
臺式電腦、筆記本電腦、手機、平板、掃碼槍、PDA、打印機、肢體、智能運輸車等
互聯網媒介又包含web網頁端，web客戶端，小程序，H5，App等
系統功能承載在媒介中，媒介承載在實際作業下使用的工具，存在多終端配合使用。比如倉庫移動作業時，會使用到平板進行盤查核對等。
需要完成什么事？通過典型的任務流分析是否可達到目標
△ 倉庫移動作業場景
B端復雜業務下，設計師主動了解用戶實際的場景后，五要素作為必需思考元素，經過實戰驗證，帶給設計師的機遇價值至少有2方面：
1. 對設計師自身：
有利于設計分析、判斷思維體系的完善，考慮更全面；所輸出的方案符合用戶思維和習慣，更容易得到各方的認可
2. 對于業務價值
可作為考量產品方案可行性的判斷準則
另外，產品原型一般基于「功能」本身，而設計師從用戶實際場景規劃用戶的任務流，可以優化產品邏輯，補全缺失場景，也會給予創造性解決方案
比如「開發票」功能 ：
在需求評審中，針對于「A向B申請開票，A撤銷申請不需要B操作同意」這點，我提出建議：「需要B線上同意」
首先確實是要避免無謂的用戶線上流程操作，但針對這點，我分析如下：
所以「A撤銷申請B需要線上操作同意或拒絕」
△ 打印發票
以「五要素」的分析思維的表述，最終與產品、技術達成一致。
在設計中，考慮到「A申請撤銷」的單據，對于雙方都是需要優先確認和處理的。所以除有即時消息通知外，列表中我做了2點設計：
（若不這樣，在分頁列表中特殊單據很有可能從第二頁后才出現，用戶都發現不了）
△ 狀態操作參考框架示例-原創
回顧下B端交互設計五要素
設計師的分析、判斷能力是非常重要，五要素則作為系統性的思維支撐。
B端浪潮中，設計師仍有很大的機遇和價值。基于五要素分析，會對業務有所優化和補充，或提出創造性的解決方案。
設計不僅是一種技能，而是對事物本質的感知和洞察能力
交互設計五要素不僅對設計師有幫助，同時對產品、運營等人員同樣具有價值。
文章來源：站酷 作者：Aber UX設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
專注設計理論書籍，大多偏底層原理的知識，特意整理過往的筆記與設計心得分享一下。對設計的學習，要知其然，也要知其所以然。
以上都是近年來的幾本閱讀筆記和心得總結，一直在慢慢整理中。特意分享給各位作為參考交流，本文還有諸多不足，望各位批評指證。
此篇為構圖與形狀的第二節，開始深入原理的探討，第三節是關于構圖與形狀與人類知覺關聯的深層內容。
理論不同于軟件和技法，短時間的學習就能看到進步，不能現學現賣。它是一種所謂的“種樹”過程，靠的是日積月累，是一種學習、消化、迭代的過程，一種由量變到質變的過程。需要堅持不懈、持之以恒。
僅作免費交流與啟發，請勿商用! 謝謝！
參考書籍：
《繪圖構圖學》常銳倫
《圖像語言的私密》Molly.Bang
《攝影構圖學》本.克萊門茨，大衛.羅森菲爾德
《圖解藝術》郭書宣
《迷情黑白》Marcos Mateu-Mestre
《設計元素.造型與空間》丹尼斯.M.普哈拉
《藝術與視知覺》魯道夫.阿恩海姆
文章來源：站酷網
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
頭腦風暴是一種常用的設計方法，能夠幫助設計師開闊思維，快速獲取大量靈感與方案，當然，這是在理想的情況下。實際上，很多頭腦風暴是漫無目的，效率低下，毫無收獲的。而頭腦風暴需要很多人參與，如果浪費了大家的時間而一無所獲，那發起者簡直尷尬到能摳出兩室一廳。
那么，設計師如何才能地組織一場頭腦風暴呢？下面我將按“開始前”，“進行中”，“結束后”的順序，介紹整個頭腦風暴流程中提率的一些心得體會。
我們一定是為了解決某個問題，而不是為了閑聊組織頭腦風暴的。所以我們要先明確問題是什么，才能引導大家幫助我們。
我們可以試著用一句話去概述它，注意必須要具體，不能太含糊。“如何設計一張海報”就是一個很糟糕的描述。試著把目標用戶、業務目標、場景加進這句話，比如“如何設計一張能夠吸引應屆畢業生加入XX設計中心的朋友圈海報”。
明確具體問題后，我們還需要將它進行拆解成一個個關鍵問題，這樣才能有序展開討論，而不是漫無目標地侃大山。比如剛剛提到的那個問題，就可以拆成“應屆生的關鍵詞是什么”、“應屆生找工作時最關心什么”、“XX設計中心的關鍵詞是什么”、“什么樣的元素能夠代表設計師”、“什么樣的朋友圈海報形式比較吸引人”等等。
有了明確的問題和關鍵問題后，我們要做的就是將它們在頭腦風暴按步驟上提出來，讓大家跟著我們的節奏去展開腦洞，這也就是頭腦風暴的流程。一場頭腦風暴往往包含背景介紹、多輪腦暴、闡述想法、投票等環節，作為組織者需要詳細規劃每個環節的順序、時間，特別是需要控制總時長（盡量別超過一個半小時），預留中場休息的時間，畢竟大家很難長時間集中注意力。
一般來說頭腦風暴里有三種角色，主持人、記錄員和參與者。參與者的職責不用介紹了。主持人的職責是帶著大家按節奏討論，記錄員的職責是記錄大家的想法和拍照，缺一不可。
參與人員的數量一般在5-10之間，人數太少收集不到足夠的想法，人數太多討論效率低，耗時長。參與人員的身份需要根據你想解決的問題確定，如果是比較大型的項目，參與的人員需要多元化，把產品經理、程序員都拉進來，方便獲得不同視角的觀點，也能夠提高合作方的參與感。在我們上面舉的海報例子中，如果能拉應屆設計師加入腦暴，將非常有幫助。
除了筆、便利貼、A4紙，我們還需要準備一份寫了每個步驟需要完成任務的PPT，幫大家明確任務。
大家的工作都比較忙碌，所以請至少提前一天邀請大家參與頭腦風暴，并且簡單交代背景，提供一些資料，方便大家提前消化。
首先要簡單跟大家介紹一下背景信息，以及接下來的大概流程，活躍一下氣氛，帶大家進入狀態，講段子也算是新世紀設計師的必備技能了。
頭腦風暴的目的并不是要獲得考慮得非常周全、詳細，能夠直接落地的方案，而是大量的想法和靈感。所以我們需要鼓勵大家在短時間（5-10分鐘）內輸出盡可能多的想法（四五十個不算多），不要太糾結可行性、成本等細枝末節的問題。
作為主持人，切記不要當場對參與者的想法做出負面評論，或者談論執行細節的事情，以免打擊參與者的積極性。如果有領導參與，要注意避免領導的威壓影響其他參與者打開腦洞。
互聯網從業者大多是思維活躍的可愛人兒，開一個頭他們就能嘮上一天，所以主持人一定要留意時間，按照既定計劃，當大家偏題時引導大家回歸到對主題的討論上。
如果整場頭腦風暴的時間超過半個小時，就需要給大家安排中場休息的時間，可以提前準備一些零食和飲料，幫助大家放松，以便接下來能夠集中注意力接著討論。
記錄員應該將大家的想法和每輪討論、投票的結果記錄下來，方便后面回溯和汲取靈感。拍照也是很重要的工作，這將為最后的設計提案提供寶貴的圖片資料，讓整個設計流程展現在決策方面前，提高說服力。
主持人應該將簡單總結一下大家討論、投票的結果，表達對大家百忙之中參與頭腦風暴的感謝，為下次拉人做情感鋪墊（開玩笑）。
會后需要及時對頭腦風暴的結果進行整理和分析，并將結論以郵件的形式同步給參與者（表達對參與者的尊重）和領導（同步工作結果）。整理時可以按可行性和效果兩個維度劃分idea，找出比較平衡的方向。
頭腦風暴是很有效但也很容易浪費時間的一種設計方法，開始前詳細規劃，進行中穩穩把控，結束后及時總結與同步，能夠幫助我們提率。
另外，頭腦風暴只是為我們提供了靈感和方向，并不一定要選擇獲得票數最多的方案執行，還是需要根據實際做判斷，不要過于機械。
文章來源：站酷 作者：失靈
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
首先利用CSS設置好盒子的大小，然后擺放盒子的位置。最后把網頁元素比如文字圖片等等，放入盒子里面。
盒子模型由元素的內容邊框border內邊距padding和外邊距margin組成
盒子里面的文字和圖片等元素是內容區域，盒子的厚度我們稱為盒子的邊框
盒子內容與邊框的距離是內邊距，盒子與盒子之間的距離是外邊距
語法
border:border-width粗細|border-style樣式|border-color顏色
邊框綜合設置
border: 1px solid red; 沒有順序
表格的細線邊框
cellspacing=“0” ,將單元格與單元格之間的距離設置為0
border-collapse:collapse; 表示相鄰邊框合并在一起
padding屬性用于設置內邊距，是指邊框與內容之間的距離
屬性
padding-left左內邊距padding-right右內邊距padding-top上內邊距padding-bottom下內邊距
簡寫
2個值 padding: 上下內邊距 左右內邊距 ；
4個值 padding: 上內邊距 右內邊距 下內邊距 左內邊距 ；
內盒尺寸計算（元素實際大?。?/span>
盒子的實際的大小 = 內容的寬度和高度 + 內邊距 + 邊框
margin屬性用于設置外邊距。margin控制盒子和盒子之間的距離，屬性和簡寫與padding相同
盒子必須指定寬度（width）然后就給左右的外邊距都設置為auto
盒子內的文字水平居中是text-align:center, 而且還可以讓行內元素和行內塊居中對齊
塊級盒子水平居中 左右margin 改為 auto
代碼
* {
padding:0; /* 清除內邊距 */
margin:0; /* 清除外邊距 */
}
注意
行內元素為了兼容性， 盡量只設置左右內外邊距， 不設置上下內外邊距
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，取兩個值中的較大者這種現象被稱為相鄰塊元素垂直外邊距的合并
解決方案
盡量給只給一個盒子添加margin值
對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者
解決方案
可以為父元素定義上邊框
可以為父元素定義上內邊距
可以為父元素添加overflow:hidden
按照優先使用寬度（width）內邊距（padding）外邊距（margin）
原因
margin有外邊距合并還有ie6下面margin加倍的bug所以最后使用
padding會影響盒子大小，需要進行加減計算，其次使用
width沒有問題，經常使用寬度剩余法高度剩余法來做
塊級元素會獨占一行，從上向下順序排列
行內元素會按照從左到右順序排列，碰到父元素邊緣則自動換行
讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示
將盒子定在瀏覽器的某一個位置
因為行內塊元素可以實現多個元素一行顯示但中間會有空白縫隙
因為行內塊元素不能實現盒子左右對齊
元素的浮動是指設置了浮動屬性的元素
會脫離標準普通流的控制并可以移動到指定位置
讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段
浮動最早是用來控制圖片，實現文字環繞圖片的效果
可以實現盒子的左右對齊等等
選擇器 { float: 屬性值; }
屬性值
none（元素不浮動（默認））left（元素左浮動）right（右浮動）
浮
加了浮動的盒子是浮起來的，漂浮在其他標準流盒子的上面
漏
加了浮動的盒子不占位置，它原來的位置漏給了標準流的盒子
特
浮動元素改變display屬性， 類似轉換成行內塊元素，但是元素之間沒有空白縫隙
浮動和標準流的父盒子搭配
實際的導航欄中不直接用鏈接a而是用li包含鏈接(li+a)
li+a語義更清晰
直接用a搜索引擎容易辨別為有堆砌關鍵字嫌疑而影響網站排名
浮動元素與父盒子的關系
子盒子的浮動參照父盒子對齊
不會與父盒子的邊框重疊，也不會超過父盒子的內邊距
浮動元素與兄弟盒子的關系
在一個同一個父級盒子中，如果前一個兄弟盒子是浮動的，那么當前盒子會與前一個盒子的頂部對齊
在一個同一個父級盒子中，如果前一個兄弟盒子是普通流的，那么當前盒子會顯示在前一個兄弟盒子的下方
浮動元素不占用原文檔流的位置，會對后面的元素排版產生影響
父級元素因為子級浮動導致內部高度為0，清除浮動后，父級會根據浮動的子盒子檢測高度，父級有高度就不會影響下面的標準流
選擇器{clear:屬性值;} clear 清除
屬性值
left清除左浮動right清除右浮動both同時清除左右浮動
是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如<div style=”clear:both”></div>，或則其他標簽br等亦可
優缺點
通俗易懂，書寫方便，但是添加許多無意義的標簽，結構化較差
可以給父級添加：overflow為hidden|auto|scroll都可以實現
優缺點
代碼簡潔，但是內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素
:after 方式為空元素額外標簽法的升級版，.clearfix:after { content: ""; display: block; height: 0; clear: both;visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 專有 */
優缺點
符合閉合浮動思想結構語義化正確，但是由于IE6-7不支持:after，使用zoom:1觸發hasLayout
方法
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
優缺點
代碼更簡潔，但由于IE6-7不支持:after使用zoom:1觸發hasLayout
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。
手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品，為你的產品設計注入靈感。
--精美時尚的天氣??手機app--
--精美時尚的天氣??手機app--
--精美時尚的天氣??手機app--
--手機appUI設計--
（以上圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
網頁中超過95%以上的信息都是通過文字的形式呈現。 然而，頁面文字并非毫無章法的隨意呈現。事實上，更具可讀性、視覺效果以及獨特排版和布局的網頁文本設計，更能吸引用戶，提升用戶愉悅度。這也是為什么越來越多的設計師日益重視網頁排版設計的重要原因。
BS界面是基于瀏覽器的界面，隨著人們對于用戶體驗要求的不斷提高，BS界面的設計要求也越來越高，
接下來為大家分享一下我收集到的案例：
（以上圖片均來源于網絡）
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
更多精彩文章：
ui界面設計之網站設計案例欣賞(一)
巧奪天工科技控制臺能夠很好地完成智能交通的規劃建設和管理，對接處警信息、監控信息、交通流量信息...
隨著5G技術發展，大數據、人工智能、互聯網技術不斷提升，巧奪天工科技深刻認識到每一個控制臺線纜管理能力的提升、人機環境和諧處理以及對操作人員工作和提高力準確度背后對應的是給行駛在交通道路上的公民提供更安全的保障。巧奪天工科技控制臺能夠很好地完成智能交通的規劃建設和管理，對接處警信息、監控信息、交通流量信息、交通事件的受理，對交通管制、交通誘導、交通信息燈控制等實現各級聯動協作、調度指揮、輔助決策、信息處理等功能。從而達到報警便利、接警快捷、調度暢通、出警有力。
方案展示
交通指揮中心-調度臺
交通指揮中心-調度臺
交通指揮中心-調度臺
交通指揮中心-調度臺
方案對應產品展示
雙工位數據分析工作站ED-LB9106
虛擬化數字沙盤ED-SP9500
組合式多媒體工作站ED-SP9703
一體化造型壁燈
通道式電視造型墻
巧奪天工科技研發的全金屬控制臺、操作臺、操控臺、調度臺、監控臺、工作臺、工作站、電子沙盤、大數據展示設備、智控儲物柜等信息化設備均采用人體工程學設計、科學線纜管理、優質精良選材。
文章來源：站酷