編輯導(dǎo)語(yǔ)：交互設(shè)計(jì)師在進(jìn)行產(chǎn)品的頁(yè)面設(shè)計(jì)時(shí)，要照顧到很多角度的畫面，比如不同板塊、不同功能的交互設(shè)計(jì)都有不一樣的標(biāo)準(zhǔn)，所以在進(jìn)行交互稿的創(chuàng)作時(shí)有很多需要注意的地方；本文作者分享了關(guān)于交互稿的一些注意事項(xiàng)，我們一起來(lái)了解一下。

最近星球里的產(chǎn)品設(shè)計(jì)訓(xùn)練營(yíng)在做一個(gè)跑腿代購(gòu)的 APP，收到不少交互稿，包括如下面這張首頁(yè)。

其實(shí)這張交互稿算是完成度比較高的了，可能由于作者以前做視覺比較多，畫面的細(xì)節(jié)處理還是比較到位，例如陰影、背景漸變、優(yōu)惠券樣式等。

但是從體驗(yàn)設(shè)計(jì)的角度，還是有很多地方可以優(yōu)化的。

我提出一些建議后，他進(jìn)行了修改，修改之后的方案我會(huì)放在后面。

這里先分析一下問題：

一、搜索框是否要展開？

很多 APP 都有在首頁(yè)可以看到，只是有的收起有的展開。

這個(gè)方案中，把搜索框展開，放在當(dāng)前定位的下面，占據(jù)了一整行的位置，有必要嗎？

跑腿代購(gòu) APP，用戶的主要操作應(yīng)該是：

• 直接下單
• 查看當(dāng)前訂單
• 瀏覽可選商品

會(huì)一上來(lái)就使用搜索功能的，應(yīng)該是極少數(shù)。

既然是極少數(shù)情況才會(huì)用到的功能，在界面頂部這么顯眼的地方占據(jù)一整行，就有些浪費(fèi)了。

還不如把搜索功能收起，放到定位和消息同一行，省下來(lái)的空間說(shuō)不定可以多露出點(diǎn)下面更有用的信息。

二、提供什么搜索？

以現(xiàn)在的技術(shù)水平，一個(gè) APP 給用戶提供什么搜索，主要還是看用戶需要什么，其次再考慮可實(shí)現(xiàn)性。

那么對(duì)于一個(gè)以跑腿代購(gòu)為主，外賣、電商為輔的 APP，用戶可能有什么搜索需求呢？

橫向?qū)Ρ纫幌鲁Ｓ玫耐赓u和購(gòu)物類 APP，答案可能是：

• 商品
• 店家
• 訂單
• …

這個(gè)方案里，直接把搜索范圍限制在了“快遞單號(hào)查詢”，就有點(diǎn)迷惑了。

如果是 APP 內(nèi)的單號(hào)，應(yīng)該直接用其它方式提醒或展示給用戶，不能指望用戶把單號(hào)記下來(lái)，下次查詢。

如果是 APP 外的單號(hào)，用戶為什么不直接百度或者用菜鳥等更加專業(yè)的快遞查詢工具，非要跑著這個(gè)做跑腿代購(gòu)的 APP 來(lái)查單號(hào)呢？

對(duì)于這個(gè)搜索功能，我的建議是：

• 采用模糊搜索，允許用戶搜索商品、店家、訂單等信息
• 如果沒有運(yùn)營(yíng)能力，可以放“搜索”、“想買什么”等提示
• 如果有運(yùn)營(yíng)能力，可以放關(guān)鍵詞推薦

三、交互要考慮運(yùn)營(yíng)嗎？

理論上運(yùn)營(yíng)計(jì)劃確實(shí)應(yīng)該由運(yùn)營(yíng)或者產(chǎn)品來(lái)做，但是一般出交互稿時(shí)，還處于“腦暴”階段，并沒有特別明確的運(yùn)營(yíng)計(jì)劃。

但是交互稿上又不可能完全無(wú)視運(yùn)營(yíng)，畢竟現(xiàn)在大部分 C 端產(chǎn)品都是高度依賴運(yùn)營(yíng)的。

所以就導(dǎo)致，交互稿必須考慮運(yùn)營(yíng)，而且是大膽設(shè)想多過縝密計(jì)劃。

這個(gè)交互稿就對(duì)運(yùn)營(yíng)模塊有所計(jì)劃，雖然不一定到最后能實(shí)施，但這樣的交互稿才是團(tuán)隊(duì)合作需要的。

要說(shuō)有什么可以優(yōu)化的點(diǎn)，還是有兩點(diǎn)：

福利要有吸引力：

「新人專享福利大禮包」，這句話是沒錯(cuò)，可就是看起來(lái)沒什么吸引力?，F(xiàn)在網(wǎng)上各種禮包、紅包這類詞太多了，用戶早就麻木了。

建議：如果寫“首單免費(fèi)”、“新人五折”……這類的，能讓用戶秒懂的具體福利，反而更有吸引力。

雖然想這些東西理論上是運(yùn)營(yíng)的責(zé)任，但是稍微動(dòng)動(dòng)腦子，就可以把方案設(shè)計(jì)得有吸引力一些，難道不是事半功倍的事嗎？

運(yùn)營(yíng)模塊要考慮維護(hù)成本：

優(yōu)選模塊的這類運(yùn)營(yíng)圖，需要經(jīng)常更新的，例如淘寶會(huì)根據(jù)大數(shù)據(jù)貼上當(dāng)前用戶可能感興趣的商品摳圖。

又是大數(shù)據(jù)，又是海量摳圖的，創(chuàng)業(yè)小公司肯定承擔(dān)不起，所以到最后變成了設(shè)計(jì)師的每日負(fù)擔(dān)，很花時(shí)間可又未必能創(chuàng)造什么實(shí)際價(jià)值（何必給自己挖坑）。

建議：要么這里就換成直接拿商品縮略圖就能展示的樣式，不需要額外改圖了；要么換成一張圖的 banner，做一張圖總比做三張圖負(fù)擔(dān)小。

四、優(yōu)化后的方案

這位同學(xué)，改了一版就把問題都解決了，看來(lái)之前給的建議都切實(shí)理解了。

交互設(shè)計(jì)就是這樣，不同的人咋看眼去，好方案壞方案好像沒有很大區(qū)別。

如果問題不解決，埋下的坑就要等到后面的視覺、開發(fā)、測(cè)試等落地階段，才會(huì)逐一發(fā)現(xiàn)，然后返工。

而懂行或者做熟練的人，開始時(shí)就會(huì)預(yù)計(jì)到以后可能的問題，一手控制研發(fā)和運(yùn)維成本，另一手提高體驗(yàn)和轉(zhuǎn)化率。

不知道大家還有什么交互心得，可以在評(píng)論區(qū)分享一下。

#專欄作家#

作者：Z Yuhan，一名前華為騰訊留英設(shè)計(jì)師；公眾號(hào)：體驗(yàn)進(jìn)階。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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