在使用以上內(nèi)容時(shí)，需要切記一個(gè)原則：需要的場(chǎng)景，合理的出現(xiàn)

設(shè)計(jì)方法論——復(fù)雜界面下的響應(yīng)框架

Web設(shè)計(jì)布局中存在靜態(tài)布局、流式布局、自適應(yīng)布局、響應(yīng)式布局、彈性布局；其中響應(yīng)式布局可以保證在任何終端上都能顯示出讓人滿意的效果，所以在復(fù)雜界面的設(shè)計(jì)下普遍采用『響應(yīng)式設(shè)計(jì)』。

響應(yīng)式設(shè)計(jì)一般糅合了靜態(tài)布局+彈性布局+流式布局，再搭載媒體查詢技術(shù)使用（分別為不同的分辨率定義布局）。

在該體系下，使用響應(yīng)的布局規(guī)則需要依據(jù)頁(yè)面元素的屬性與業(yè)務(wù)要求結(jié)合判斷，例如：列數(shù)較多的表格，場(chǎng)景要求每列都需要顯示全，且預(yù)估用戶可接受適當(dāng)范圍的橫向滾動(dòng)，再設(shè)定好部分重要的固定列后，采取靜態(tài)局部的方式來(lái)展示該長(zhǎng)表格。

設(shè)計(jì)方法論——卡片式設(shè)計(jì)原則

在B端場(chǎng)景中，為了增加信息展示的形式，在列表識(shí)設(shè)計(jì)的基礎(chǔ)上，引入了卡片式設(shè)計(jì)。相應(yīng)的，我們需要知道卡片式設(shè)計(jì)有哪些優(yōu)點(diǎn)，才能在合適的場(chǎng)景使用。

卡片式設(shè)計(jì)的創(chuàng)新點(diǎn)主要體現(xiàn)在空間利用上、內(nèi)容突出上、跨終端能力以及視覺(jué)傳達(dá)上，謹(jǐn)記以上點(diǎn)可以指導(dǎo)關(guān)鍵運(yùn)用場(chǎng)景的判斷。

相關(guān)閱讀：從列表式UI中升華探討：卡片式UI有哪些創(chuàng)新點(diǎn)

此外還有『有意義的動(dòng)效設(shè)計(jì)』『頁(yè)面布局方法論』『灰度測(cè)試』『多語(yǔ)言下的字體規(guī)范』等設(shè)計(jì)方法論需要去掌握和了解。

三、全鏈?zhǔn)皆O(shè)計(jì)師能力模型

評(píng)定一個(gè)設(shè)計(jì)師的能力是否優(yōu)秀，除了需要掌握必備的專業(yè)技能外，還需要包括各項(xiàng)達(dá)標(biāo)的通用技能。

專業(yè)技能決定設(shè)計(jì)師可以站的多高，通用技能決定設(shè)計(jì)師可以走的多遠(yuǎn)。

通用技能主要包括溝通能力、協(xié)作能力、項(xiàng)目把控能力、設(shè)計(jì)落地能力、總結(jié)能力、創(chuàng)新能力等。

• 溝通：確定溝通目標(biāo)，提取雙方溝通重點(diǎn)，反推需要收集的信息；
• 協(xié)作：了解對(duì)方工作規(guī)劃側(cè)重點(diǎn)與KPI目標(biāo)，找到規(guī)劃交集；
• 項(xiàng)目把控：時(shí)刻謹(jǐn)記四象限工作法，重要的事情有規(guī)劃分階段輸出；緊急的事情快輸輸出保證進(jìn)度，可后期迭代；
• 設(shè)計(jì)落地：明確設(shè)計(jì)方案帶來(lái)的效益，還需要考慮『用戶需求/場(chǎng)景』與『開(kāi)發(fā)資源』，在業(yè)務(wù)側(cè)得到認(rèn)可，獲得支持，達(dá)成共贏。傳送門：設(shè)計(jì)師如何更好的展示創(chuàng)新設(shè)計(jì)方案。
• 總結(jié)歸納：對(duì)于項(xiàng)目，學(xué)會(huì)提取核心業(yè)務(wù)邏輯+關(guān)鍵交互細(xì)節(jié)。有一個(gè)小竅門是，階段性的給自己做的項(xiàng)目提取關(guān)鍵詞，關(guān)鍵詞的提取即是項(xiàng)目的最小單元的總結(jié)。
• 創(chuàng)新：養(yǎng)成跨界研究學(xué)習(xí)的能力，除了多去體驗(yàn)同行業(yè)的產(chǎn)品外，跨界的其他行業(yè)的體驗(yàn)往往會(huì)帶來(lái)新的靈感，因?yàn)轶w驗(yàn)的本質(zhì)是一致的。

通用能力的培養(yǎng)往往是慢慢磨練和積累，循序漸進(jìn)，需要結(jié)合自身性格打造符合自己的能力風(fēng)格。

四、設(shè)計(jì)師工具集

工欲善其事必先利器，稱手的工具可以讓設(shè)計(jì)事半功倍。

1. 戰(zhàn)略層、范圍層

產(chǎn)品前期的階段，更加注重創(chuàng)意的提出或者核心的理念，需要制定設(shè)計(jì)方向。這個(gè)時(shí)候的關(guān)鍵點(diǎn)在于洞察問(wèn)題，包括：目標(biāo)人群、用戶需求、應(yīng)用場(chǎng)景、場(chǎng)景痛點(diǎn)動(dòng)機(jī)、商業(yè)目標(biāo)、機(jī)會(huì)分險(xiǎn)成本等。

該階段的行動(dòng)項(xiàng)需要執(zhí)行頭腦風(fēng)暴、問(wèn)卷調(diào)查、用戶訪談、焦點(diǎn)小組、任務(wù)角色共情圖、故事板等，其中大部分都可以通過(guò)手繪快速推進(jìn)，其中可以結(jié)合便利貼、工具尺等等。

在范圍層還設(shè)計(jì)到的知識(shí)點(diǎn)：心智模型、卡片分類、KANO模型、品牌層次理論等。

2. 結(jié)構(gòu)層、框架層、表現(xiàn)層

產(chǎn)品中期的階段，涉及到較多的產(chǎn)出物與知識(shí)點(diǎn)，其中：

1. 思維導(dǎo)圖的工具可以選擇XMind、Mindmanager；OS X系統(tǒng)推薦使用MindNode，希望線上協(xié)作的話可使用Process On。
2. 低保真原型最常使用的即Axure，強(qiáng)烈建議配合典型頁(yè)面庫(kù)、組件庫(kù)、控件庫(kù)使用，快速調(diào)出各項(xiàng)需要的元素可以極大提高原型制作效率。
3. 高保真視覺(jué)設(shè)計(jì)稿里最常規(guī)的就是萬(wàn)能的PS，條件允許的話推薦使用Sketch，這款軟件只能在OS X系統(tǒng)下運(yùn)行，但是確實(shí)越來(lái)越多設(shè)計(jì)的選擇和標(biāo)配。
4. 高還原交互展示可以運(yùn)用的軟件比較多，其中墨刀最常見(jiàn)，希望更精細(xì)化的展示可選擇Principle或者Protopie。

動(dòng)效設(shè)計(jì)主要使用Adobe After Effects，F(xiàn)ramer和Adobe Animate也可以考慮。

設(shè)計(jì)工具多種多樣，選擇合適且大眾的，即高效又好協(xié)作。

3. 其他：項(xiàng)目管理、歸納、總結(jié)

團(tuán)隊(duì)協(xié)作推薦藍(lán)湖，該軟件下設(shè)計(jì)師可以高效交付設(shè)計(jì)稿，產(chǎn)品經(jīng)理清晰表達(dá)需求和邏輯，工程師高效查看標(biāo)注與自動(dòng)生成代碼，輕松上手，高效協(xié)作。其他可選擇Teambition、Worktile等。

結(jié)語(yǔ)

本章主要介紹了用戶體驗(yàn)設(shè)計(jì)師的整體能力框架，旨在幫助大家更加系統(tǒng)和分階段地學(xué)習(xí)用戶體驗(yàn)。

在體系化的能力框架指導(dǎo)下，新人設(shè)計(jì)師需要快速找到自己的優(yōu)勢(shì)方面加以強(qiáng)化，弱勢(shì)方面加以補(bǔ)充，時(shí)刻明白下一步目標(biāo)。

接下來(lái)的文章將會(huì)為大家逐步介紹上述相關(guān)的設(shè)計(jì)方法論。

相關(guān)閱讀

從列表式UI中升華探討：卡片式UI有哪些創(chuàng)新點(diǎn)

本文由 @小偉同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議