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

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

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

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

為什么他們總是揪著(zhù)我的設計細節不放？

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

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

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

如何加強設計邏輯性解決這3大難題,PS教程,

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

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

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

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

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

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

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

如何加強設計邏輯性解決這3大難題,PS教程,

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

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

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

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