實(shí)操 | 同一產(chǎn)品功能在不同終端下的設(shè)計(jì)異同

4 評(píng)論 14306 瀏覽 157 收藏 7 分鐘

目前手機(jī)已成為人們?nèi)粘W顭o(wú)法離開的物品,移動(dòng)端熱度也隨之不斷上升,與此同時(shí),用戶越來(lái)越希望能夠在Web、手機(jī)、PC等終端下可以輕松獲取和發(fā)布信息,并且在不同終端上保持?jǐn)?shù)據(jù)同步和核心功能同步。每種終端都有自己的優(yōu)勢(shì)和劣勢(shì),互聯(lián)網(wǎng)產(chǎn)品也更加注重在不同場(chǎng)景下的多端融合以及鏈性發(fā)展,那同一產(chǎn)品功能在不同平臺(tái)下又有哪些區(qū)別設(shè)計(jì)點(diǎn)呢?

一、移動(dòng)端和Web版的區(qū)別

先做個(gè)小科普歸納一下各種終端叫法:

20160607161335

1、頁(yè)面展示

具體的區(qū)別可以去百度知乎找找(或是直接看看手機(jī)QQ、PC版QQ和WEB QQ)。這里主要說(shuō)明一下站在用戶視角,移動(dòng)端和WEB版有哪些主要區(qū)別:

用戶最直觀的感受往往是頁(yè)面展示上的不同,WEB端偏重在同一個(gè)頁(yè)面中,根據(jù)各自重點(diǎn)盡可能多的展示信息,而移動(dòng)端則局限于手機(jī)屏幕大小,主要展示核心信息。同時(shí),移動(dòng)端更注重縮短用戶操作路徑,將用戶高頻使用點(diǎn)盡可能方便地推到用戶眼前。

2、操作習(xí)慣

這點(diǎn)比較容易理解,Web端基于電腦的鼠標(biāo)鍵盤操作,以點(diǎn)擊為主;而移動(dòng)端基于手機(jī),常見的操作除了點(diǎn)擊,還有長(zhǎng)按、下拉、左右滑動(dòng)等,不同的操作對(duì)應(yīng)不場(chǎng)景下的用戶使用習(xí)慣。

3、功能增減

同一產(chǎn)品在移動(dòng)端和WEB端基本都會(huì)有功能增減,主要基于功能是否屬于用戶高頻使用點(diǎn),以及終端特性的考慮,比如在手機(jī)上依靠GPS定位的相關(guān)功能、搖一搖、掃一掃等,這些就屬于移動(dòng)端的特有功能點(diǎn)。

二、實(shí)操-不同平臺(tái)下的設(shè)計(jì)要點(diǎn)

拿之前產(chǎn)品中的一個(gè)小功能點(diǎn)做個(gè)栗子吧:BTW,范例遠(yuǎn)談不上,本汪作為移動(dòng)產(chǎn)品經(jīng)理其實(shí)接觸WEB版的時(shí)間也相對(duì)較短,算是拋磚引玉,更算是在整理的過(guò)程中再給自己一次反思的機(jī)會(huì)。

功能點(diǎn):會(huì)議管理。功能比較簡(jiǎn)單,移動(dòng)端和WEB端功能基本保持一致。

客戶端創(chuàng)建頁(yè)面部分截圖:

app

WEB端創(chuàng)建頁(yè)面部分截圖:

WEBcreat

部分頁(yè)面上的細(xì)節(jié)說(shuō)明:

webnote

相同點(diǎn):

  • 流程:這個(gè)不管是哪個(gè)產(chǎn)品,多端上的核心流程大致相同,不然用戶在跨平臺(tái)使用時(shí)很可能就懵了。
  • 字段:以上小功能點(diǎn)是在創(chuàng)建頁(yè)面,因此字段大致相同,但是有些場(chǎng)景下需要區(qū)別考慮,尤其是在頁(yè)面概要展示和全局功能部分,移動(dòng)端往往只將用戶最需要的內(nèi)容放在用戶的眼前,該隱藏的考慮隱藏,該屏蔽的需要屏蔽。

主要區(qū)別點(diǎn):

  • 頁(yè)面布局:移動(dòng)端偏重將展示集中整合,WEB端可更多平鋪。
  • 容錯(cuò):移動(dòng)端的誤操作幾率相對(duì)較大,因此需要的更強(qiáng)容錯(cuò)機(jī)制(如在返回時(shí)的選擇確認(rèn))
  • 組件:各種復(fù)選、時(shí)間選擇等組件操作細(xì)節(jié)。

另外隨著H5開發(fā)方式的普及,現(xiàn)在不少產(chǎn)品通過(guò)制作H5頁(yè)面讓移動(dòng)端和WEB端共同調(diào)用來(lái)實(shí)現(xiàn)功能,這種方式的優(yōu)勢(shì)在于實(shí)現(xiàn)速度明顯更快(只開發(fā)一套總比開發(fā)兩套要快),劣勢(shì)在于一些細(xì)節(jié)可能不夠完善,比如由于分辨率造成展示不友好等。

三、幾個(gè)題外小問(wèn)題

1、做原型是在哪個(gè)環(huán)節(jié)?

大家拿到一個(gè)需求,往往會(huì)習(xí)慣性的先打開原型工具(我曾經(jīng)也是這樣,總覺得原型是需求產(chǎn)物,需求評(píng)審的時(shí)候主要就是評(píng)審這個(gè),得趕快做)。

sop

在上圖需求實(shí)現(xiàn)過(guò)程中,可以看到其實(shí)做原型是在比較靠后的位置,在此之前更重要的是:把解決用戶什么問(wèn)題、流程是什么樣、哪些是核心功能點(diǎn)整理清楚。

2、為什么功能越做越多?

這個(gè)問(wèn)題經(jīng)常碰到,“l(fā)ess is more”——道理誰(shuí)都知道,然而真實(shí)過(guò)程中確實(shí)很容易發(fā)生功能堆積的情況。大致的原因往往是自己或是團(tuán)隊(duì)YY提出各種奇葩的可能性,然后再YY地設(shè)計(jì)各種功能以求閉環(huán),為了1%出現(xiàn)的可能性而付出了讓99%的用戶體驗(yàn)差的代價(jià)。

3、為什么我感覺原型都畫不好看?

這個(gè)問(wèn)題,原型是用來(lái)表達(dá)思想的,不是用來(lái)好看的。

你又不是賣畫的。

4、最近我很迷茫不知道要做什么,是不是要看一些比較正面勵(lì)志的書?

勵(lì)志或雞湯的內(nèi)容不要看太多,牛的人不會(huì)一般不會(huì)告訴你曾經(jīng)發(fā)生過(guò)多苦的事情,再勵(lì)志那也是別人的人生。很多事情你看起來(lái)覺得很簡(jiǎn)單,真正做的時(shí)候就知道那都是淚哇!紙上得來(lái)終覺淺,絕知此事要躬行。

5、工作環(huán)境中很多人無(wú)所事事每天混日子,我感覺挺不平衡的怎么辦?

你確定要和low逼比low?

 

作者:臨公子(微信號(hào)公眾號(hào):臨公子的后花園),一枚喜歡理財(cái)、健身、不愛灌雞湯喜歡喝咖啡的美汪。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 學(xué)習(xí)了~

    回復(fù)
    1. 算個(gè)分享,相互學(xué)習(xí)~:)

      來(lái)自福建 回復(fù)
  2. 妹紙好心細(xì) ?? 是這樣:
    1、在移動(dòng)端中,2個(gè)時(shí)間段(年月日時(shí)分)同一行時(shí),不管加選擇開關(guān)或是固定字段展示,頁(yè)面都會(huì)顯得很擁擠,分辨率低的屏幕上會(huì)出現(xiàn)變形的可能。所以會(huì)議時(shí)間這個(gè)必選項(xiàng)是以這種方式展示。
    2、簽到時(shí)間/簽退時(shí)間的開關(guān)是需要展示給用戶選擇的,而對(duì)應(yīng)時(shí)間段是可隱藏的,因此拆分為兩行。:)

    來(lái)自福建 回復(fù)
  3. 問(wèn)個(gè)問(wèn)題:為什么APP端的會(huì)議時(shí)間不能一行展示,而不像簽到時(shí)間一樣放在下面一行呢?而且是點(diǎn)進(jìn)去選擇時(shí)間?能分享下當(dāng)時(shí)是怎么考慮的嗎?

    來(lái)自廣東 回復(fù)