如何加強(qiáng)網(wǎng)頁設(shè)計(jì)邏輯性解決這3大難題發(fā)布者：本站     時(shí)間：2022-01-10 15:01:51

交互設(shè)計(jì)師的核心競爭力應(yīng)該是什么?對(duì)于不同的人來說答案可能不一樣，而我認(rèn)為應(yīng)該是在發(fā)現(xiàn)、分析和解決問題過程中貫穿的設(shè)計(jì)表達(dá)「邏輯性」。在面對(duì)復(fù)雜信息架構(gòu)產(chǎn)品的設(shè)計(jì)時(shí)，結(jié)構(gòu)化、強(qiáng)邏輯的設(shè)計(jì)思考與表達(dá)過程也尤為重要。

如何提高交互設(shè)計(jì)過程的「邏輯性」?需要指出的是，這并不能簡單地和「邏輯思維能力強(qiáng)」進(jìn)行等同(事實(shí)上，作為非常重要的通用崗位能力，合作的產(chǎn)品經(jīng)理與開發(fā)在這方面完全可以比我們強(qiáng))。我在兩年來的實(shí)習(xí) & 工作中，雖然被 Leader 與同事們貼過幾次「邏輯思維能力強(qiáng)」的標(biāo)簽，但也同樣被挑戰(zhàn)過「為什么設(shè)計(jì)目標(biāo)是這樣的」、「設(shè)計(jì)目標(biāo)與解決方案的關(guān)聯(lián)在哪里」、「這里的信息層級(jí)有點(diǎn)亂」等問題，也有過在和業(yè)務(wù)方的「撕逼大戰(zhàn)」中潰敗、無奈接受自己的創(chuàng)意被砍的經(jīng)歷。

反思自己遇到這些問題的原因，還是在設(shè)計(jì)與表達(dá)過程中的「邏輯性」不夠強(qiáng)，在思考深度上不夠追根究底，前期偷懶跳過了一些需要邏輯推導(dǎo)串聯(lián)的步驟，才導(dǎo)致了后續(xù)的痛苦「掉坑」。而在加強(qiáng)了設(shè)計(jì)過程的「邏輯性」后，再遇到以下這些問題，也許你可以和我一樣變得豁然開朗。

為什么他們總是揪著我的設(shè)計(jì)細(xì)節(jié)不放？

之前我們以設(shè)計(jì)師的身份作為 Owner 驅(qū)動(dòng)了某業(yè)務(wù)的首頁改版項(xiàng)目，而我身為主交互設(shè)計(jì)師，在前期的設(shè)計(jì)分析過程中運(yùn)用了一套比較合理的方法論和流程，因此改版的整體方向與梳理出的頁面內(nèi)容框架是比較受到業(yè)務(wù)方的認(rèn)同的，可最終方案的需求 & 交互評(píng)審過程卻成了我有史以來最虐心的一次經(jīng)歷。雖然大家都認(rèn)同頁面的基礎(chǔ)框架，但對(duì)框架里放什么內(nèi)容、內(nèi)容的細(xì)節(jié)該如何設(shè)計(jì)等卻眾說紛壇;而我在解釋這些細(xì)節(jié)部分為什么做成這樣時(shí)，因?yàn)槿狈蚣茉O(shè)計(jì)階段那樣邏輯清晰、有理有據(jù)的推導(dǎo)過程，多多少少有些底氣不足，最終不得不接受被打回修改方案的結(jié)果。

問題出在我的「設(shè)計(jì)邏輯」主要聚焦在宏觀框架層面(甚至用了一大堆設(shè)計(jì)方法論與用研過程來支撐)，但卻沒有貫穿到對(duì)每一個(gè)內(nèi)容模塊、每一個(gè)交互細(xì)節(jié)的思考中去。對(duì)細(xì)節(jié)部分的信息歸納與優(yōu)先級(jí)梳理不充分，自然也就難以解釋清楚為什么放這些內(nèi)容、為什么這么排列等問題。但是頁面模塊的細(xì)節(jié)太多，每個(gè)都像設(shè)計(jì)宏觀框架時(shí)那樣把用戶體驗(yàn)地圖、卡片分類等方法祭出來支撐解決方案顯然是不現(xiàn)實(shí)的，所以我之前設(shè)計(jì)模塊細(xì)節(jié)時(shí)都比較隨性，并無太多分析推導(dǎo)流程。

師兄在注意到這個(gè)問題后，和我討論提出了「微鏈路」的解決方案建議，就是在進(jìn)行每個(gè)具體模塊的設(shè)計(jì)時(shí)，在確定模塊的基礎(chǔ)框架布局后，用一套迷你版的用戶體驗(yàn)鏈路(類似流程圖，但內(nèi)容比操作跳轉(zhuǎn)更豐富)來快速梳理用戶瀏覽、分析和進(jìn)一步探索模塊中內(nèi)容的過程，先看什么、后看什么、可能有哪些條件判斷與分支操作等，從中分析提煉出模塊中每個(gè)具體信息(標(biāo)題、標(biāo)簽、文本、富媒體等)的優(yōu)先級(jí)，再分類歸納進(jìn)基礎(chǔ)框架，確定最終解決方案。這么一來，模塊內(nèi)的信息優(yōu)先級(jí)就變得和頁面一級(jí)內(nèi)容框架一樣清晰了，解決方案「為什么放這些內(nèi)容、為什么內(nèi)容這么排列」的問題也得到了解答。

如何加強(qiáng)設(shè)計(jì)邏輯性解決這3大難題,PS教程,

以上是打碼處理過的「微鏈路」過程圖一張……

遇到直接給詳細(xì)線框圖的產(chǎn)品經(jīng)理，我該怎么辦？

作為一個(gè)討厭受空間限制的交互設(shè)計(jì)師，我不反感甚至喜歡口頭提需求的業(yè)務(wù)方與產(chǎn)品經(jīng)理，這樣自己可以有更多的設(shè)計(jì)發(fā)揮空間(當(dāng)然，也得面臨溝通修改成本更高的問題);而當(dāng)被產(chǎn)品經(jīng)理直接塞來接近交互稿甚至高保真的詳細(xì)線框圖時(shí)，內(nèi)心就會(huì)變得異常不愉快。這也是我之前一直試圖推動(dòng)改革和產(chǎn)品經(jīng)理的協(xié)同模式的重要?jiǎng)訖C(jī)。

但是我理想的交互產(chǎn)品并行協(xié)同模式(之前的文章有詳細(xì)提到)并不適合于所有業(yè)務(wù)場景，在項(xiàng)目有著強(qiáng)業(yè)務(wù)訴求驅(qū)動(dòng)、時(shí)間周期也緊急的情況下，產(chǎn)品經(jīng)理直接提供詳細(xì)線框圖能讓項(xiàng)目整體的效率變得更高，這樣的情況還是不可避免的會(huì)遇到。

遇到之后該怎么辦呢?我之前主要就做做優(yōu)化交互細(xì)節(jié)、補(bǔ)充遺漏場景的事情，有時(shí)甚至就默許給視覺直接出方案，自己內(nèi)心的成就感變得非常低，情緒上也一直比較抵觸接這樣的需求。

在經(jīng)過了一段時(shí)間的掙扎與迷惘后，我逐漸悟出了一點(diǎn)解決竅門：在拿到產(chǎn)品經(jīng)理的線框圖后，先有意識(shí)克制自己不去關(guān)注交互細(xì)節(jié)的合理性、有沒有漏掉特殊場景等，而是進(jìn)行逆向推理，從線框圖中抽象出頁面的信息框架，分析每個(gè)框架要解決的本質(zhì)業(yè)務(wù)/用戶訴求，再對(duì)框架之間的并列、從屬等層級(jí)關(guān)系，按照自己的想法重新梳理歸納，這樣很容易發(fā)現(xiàn)產(chǎn)品的線框圖在信息架構(gòu)上的混亂錯(cuò)漏之處，再拿出疑問去和對(duì)方討論，設(shè)計(jì)更合理的整理解決方案。

用戶體驗(yàn)設(shè)計(jì)不應(yīng)該只是對(duì)界面交互、視覺、動(dòng)效體驗(yàn)細(xì)節(jié)的「查漏補(bǔ)缺」(這只是交互設(shè)計(jì)師工作的一小部分)，而應(yīng)該是不斷追求從更高的維度(信息架構(gòu)/全鏈路體驗(yàn) -> 品牌傳達(dá)/商業(yè)模式 -> 社會(huì)價(jià)值)來抽象思考與解決問題。

如何加強(qiáng)設(shè)計(jì)邏輯性解決這3大難題,PS教程,

創(chuàng)意從何而來？從「神來一筆」到「有跡可循」

設(shè)計(jì)方案的創(chuàng)新性不夠也是之前一個(gè)令我苦惱的問題，總覺得自己按照方法和流程推導(dǎo)出來的解決方案雖然沒有大錯(cuò)，卻給不了人眼前一亮的感覺，而偶爾萌生的創(chuàng)意，基本都屬于「神來一筆」的類型，并沒有太多支撐依據(jù)去說服業(yè)務(wù)方(業(yè)務(wù)方典型態(tài)度：呀這個(gè)不錯(cuò)——成本有點(diǎn)高/好像不是很符合我們的業(yè)務(wù)定位——列為P2的需求/直接砍掉吧)，最終成功落地上線的也是寥寥。

作為一個(gè)典型理性思維的交互設(shè)計(jì)師，在狹義交互設(shè)計(jì)領(lǐng)域的創(chuàng)意突破(想法很多和動(dòng)效相關(guān)，但是產(chǎn)品主要使用場景在PC端瀏覽器，客觀限制較大)受限之后，我開始將目光放向了品牌設(shè)計(jì)領(lǐng)域，結(jié)果取得了前所未有的靈感迸發(fā)效果。

我先是想起了業(yè)務(wù)方屢屢提到的幾個(gè)和產(chǎn)品品牌定位相關(guān)的 Slogan、關(guān)鍵詞等，再結(jié)合產(chǎn)品的內(nèi)容特性，從中聯(lián)想到了一些可以具象化的元素——網(wǎng)絡(luò)、神經(jīng)、雷達(dá)、聲波，接下來將這些元素融入到自己的方案設(shè)計(jì)中去(可以融入的地方很多，背景紋理、圖標(biāo)、控件輪廓、Footer 頂部等)，有效緩解了之前那種和同類產(chǎn)品過于同質(zhì)化的效果。