有

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：莫貝網(wǎng)

 如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

很多移動(dòng)互聯(lián)網(wǎng)的產(chǎn)品經(jīng)理和設(shè)計(jì)師都是從傳統(tǒng)互聯(lián)網(wǎng)轉(zhuǎn)過(guò)去的，我們之前積累下的一些經(jīng)驗(yàn)，有一些可以在移動(dòng)側(cè)繼續(xù)使用，有一些則行不通，這或許要從移動(dòng)互聯(lián)網(wǎng)跟傳統(tǒng)互聯(lián)網(wǎng)的區(qū)別說(shuō)起。

區(qū)別

 

1、終端設(shè)備

傳統(tǒng)互聯(lián)網(wǎng)：主要的接入終端是計(jì)算機(jī)。計(jì)算機(jī)是高度標(biāo)準(zhǔn)化的設(shè)備，無(wú)論是Mac陣營(yíng)，還是PC陣營(yíng)（其他的架構(gòu)不討論了）。具體體現(xiàn)在：

• 絕大部分個(gè)人計(jì)算機(jī)使用的硬件是標(biāo)準(zhǔn)化的，并且功能強(qiáng)大多樣
• 絕大部分屏幕的分辨率在1024px及以上，尺寸較大
• 軟件終端比較統(tǒng)一，都是瀏覽器（暫時(shí)不考慮客戶(hù)端產(chǎn)品），并且由于Web標(biāo)準(zhǔn)的存在，不同的瀏覽器（或者說(shuō)不同的內(nèi)核）對(duì)于前端的解析相差不大
• 技術(shù)標(biāo)準(zhǔn)相對(duì)統(tǒng)一，比如用HTML寫(xiě)結(jié)構(gòu)；用CSS寫(xiě)表現(xiàn)；用JS寫(xiě)前端行為；用PHP、JSP等寫(xiě)后端；用MYSQL等管理數(shù)據(jù)庫(kù)等。做出來(lái)的東西基本上認(rèn)為是跨平臺(tái)的

 

移動(dòng)互聯(lián)網(wǎng)：主要的接入終端是手機(jī)和各種pad。拿手機(jī)來(lái)說(shuō)，標(biāo)準(zhǔn)化程度遠(yuǎn)遠(yuǎn)不及計(jì)算機(jī)。具體體現(xiàn)在：

• 硬件設(shè)計(jì)不夠標(biāo)準(zhǔn)。有的手機(jī)用按鍵，有的手機(jī)用觸屏。有的用方向鍵，有的用軌跡球。有的帶有全鍵盤(pán)，有的用屏幕鍵盤(pán)等等
• 分辨率千奇百怪，特別是android陣營(yíng)。尺寸相對(duì)較小
• 平臺(tái)不統(tǒng)一。雖然主流智能手機(jī)也 基本上是ios和android兩種。但是，加上后起的Windows Phone，加上日落西山的塞班，加上非智能機(jī)上面的Kjava等，平臺(tái)很多，開(kāi)發(fā)APP相互不兼容。而移動(dòng)Web應(yīng)用（使用手機(jī)瀏覽器訪(fǎng)問(wèn)的）不論從技 術(shù)上還是體驗(yàn)上都不夠成熟。即便是同一種平臺(tái)，有時(shí)在前端的表現(xiàn)也有較大差異，特別是android陣營(yíng)

2、使用場(chǎng)景和使用環(huán)境

傳統(tǒng)互聯(lián)網(wǎng)：

• 大部分情況下，使用傳統(tǒng)互聯(lián)網(wǎng)的場(chǎng)景相對(duì)正式一些，使用的環(huán)境也更加穩(wěn)定。比如，我們可能會(huì)把筆記本電腦放在桌子上，一動(dòng)不動(dòng)上2小時(shí)網(wǎng)。
• 使用環(huán)境決定了，傳統(tǒng)互聯(lián)網(wǎng)的接入會(huì)比較穩(wěn)定。
• 接入速度相對(duì)快

 

移動(dòng)互聯(lián)網(wǎng)：

 

• 大部分情況下，使用移動(dòng)互聯(lián)網(wǎng)的場(chǎng)景會(huì)更加隨意一些，隨時(shí)隨地，使用環(huán)境也更加復(fù)雜。比如，地鐵上（可能晃動(dòng)）、廁所里（可能時(shí)間短）、排隊(duì)的時(shí)候（可能匆忙）、被窩中（可能光線(xiàn)昏暗）。
• 使用場(chǎng)景和環(huán)境決定了，移動(dòng)互聯(lián)網(wǎng)的應(yīng)用會(huì)更加碎片化。
• 接入速度相對(duì)慢，接入不穩(wěn)定。

 

 

3、其他方面

傳統(tǒng)互聯(lián)網(wǎng)：

• 資費(fèi)與流量：大部分是在一定時(shí)間內(nèi)不限制流量的計(jì)費(fèi)方式。

 

移動(dòng)互聯(lián)網(wǎng)：

• 資費(fèi)與流量：國(guó)內(nèi)大部分是包月限制流量的方式，并且費(fèi)用相對(duì)較貴。
• 與計(jì)算機(jī)不同的特色設(shè)備。如：GPS模塊、重力感應(yīng)器等。

基于以上的不同，或許從產(chǎn)品設(shè)計(jì)層面來(lái)看，會(huì)有如下的思路：

 

設(shè)計(jì)思路

1、結(jié)合移動(dòng)互聯(lián)網(wǎng)和移動(dòng)設(shè)備的特點(diǎn)，揚(yáng)長(zhǎng)避短。

典型案例：

TalkBox以及微信的語(yǔ)音聊天

因?yàn)榇蟛糠智闆r下，在手機(jī)上輸入文字比較麻煩，而說(shuō)話(huà)則容易很多。所以在手機(jī)上，使用非即時(shí)的語(yǔ)音交流，要比使用文字方便快捷。

 

iPhone晃動(dòng)撤銷(xiāo)輸入

在手機(jī)上輸入了大量文字，想撤銷(xiāo)重新輸入怎么辦呢？使用刪除鍵一個(gè)一個(gè)字的刪一定不是最好的辦法。在iPhone上，我們只要晃一下手機(jī)（向一個(gè)方向晃動(dòng)），就可以將輸入的文字撤銷(xiāo)了。

 

通訊錄

 

天然的真實(shí)關(guān)系SNS。

切水果

移動(dòng)設(shè)備“特有”(算是特有吧)的觸控和劃動(dòng)操作可以做到很多用鍵盤(pán)鼠標(biāo)無(wú)法感受到的體驗(yàn)。比如切水果這種游戲，如果在計(jì)算機(jī)上用鼠標(biāo)操作，將樂(lè)趣大減。但在移動(dòng)設(shè)備上，就很有趣了。

Clear

在計(jì)算機(jī)上，我們使用鼠標(biāo)可 以的點(diǎn)擊屏幕上的內(nèi)容，理論上講可以到像素。但是在手機(jī)上，如果使用手指操作，就沒(méi)辦法這么了。手勢(shì)的出現(xiàn)在一定程度上緩解了這個(gè)問(wèn)題，它提 供了一種不需即可操作的可能。例如Clear這款To Do List app，它可以使用手勢(shì)完成大部分的操作。例如，向下滑動(dòng)可新建項(xiàng)目；在某項(xiàng)目上向右滑動(dòng)可將其標(biāo)記“已完成”；向左滑動(dòng)可以刪除等。

2、考慮移動(dòng)互聯(lián)網(wǎng)的使用環(huán)境，做合適的改進(jìn)。

典型案例：

夜間模式

有很多用戶(hù)有睡前閱讀的習(xí)慣，他們經(jīng)常會(huì)關(guān)掉燈，臥在被窩里閱讀電子書(shū)。在相對(duì)黑暗的環(huán)境下，平時(shí)的淺色底色深色文字的設(shè)計(jì)會(huì)很刺眼，這就產(chǎn)生了傳統(tǒng)互聯(lián)網(wǎng)上可能不會(huì)遇到的問(wèn)題。于是就有了“夜間模式”，將背景色和文字色的對(duì)比降低，看起來(lái)就柔和多了，適合睡前閱讀。

 

內(nèi)容預(yù)讀

在移動(dòng)環(huán)境下，網(wǎng)絡(luò)經(jīng)常是不穩(wěn)定的。所以在設(shè)計(jì)在線(xiàn)閱讀應(yīng)用的時(shí)候，可以在網(wǎng)絡(luò)通暢的時(shí)候從服務(wù)器預(yù)讀2、3頁(yè)內(nèi)容。這樣，如果發(fā)生短暫的網(wǎng)絡(luò)中斷，也依然可以獲得流暢的閱讀體驗(yàn)。

 

3、考慮移動(dòng)互聯(lián)網(wǎng)的使用場(chǎng)景，思考適合的產(chǎn)品。

典型案例：

微博

微博雖然不是移動(dòng)互聯(lián)網(wǎng)專(zhuān)有的應(yīng)用，但是相比于其他的需要發(fā)送內(nèi)容的應(yīng)用（例如博客），它更適合在移動(dòng)環(huán)境中使用。因?yàn)橹荒軐?xiě)140個(gè)字，所以它適合利用零散時(shí)間，碎片化的分享一下自己的小心情，小感悟，小牢騷等。

 

instagram

首先，想要把自己的見(jiàn)聞最快速最生動(dòng)的分享給朋友的話(huà)，照片一般比文字更合適。其次，在圖像處理方面，傳統(tǒng)互聯(lián)網(wǎng)上，大家也會(huì)處理照片并分享。但是 那時(shí)候，我們可以更多的接受較為復(fù)雜的操作。而在移動(dòng)中，處理圖片最適合的方式就是，選一種效果，應(yīng)用。別提供各種滑塊讓我調(diào)了。

LBS

用PC的年代，我很難想象走到一個(gè)地方，拿出電腦，選一下我現(xiàn)在所在的位置，搞什么“簽到”。

 

大眾點(diǎn)評(píng)

我們總是會(huì)有一些臨時(shí)的，或者不確定的需求。比如跟朋友逛街累了，想喝杯咖啡。或者來(lái)到了一個(gè)陌生的地方，想找餐館吃飯。這時(shí)候我們可能不會(huì)隨時(shí)帶著電腦，但是會(huì)隨時(shí)帶著手機(jī)。打開(kāi)手機(jī)就能看到附近的各種餐館還有評(píng)價(jià)，很好的解決了這些“臨時(shí)性”的需求。