三端差異性對(duì)比

本文中提到的客戶端為 ipad 端

產(chǎn)品體驗(yàn)差異

硬件設(shè)施差異

數(shù)據(jù)流向差異

web 端

PC上的瀏覽器 ---data---> 我們的服務(wù)器 ---data---> PC上的瀏覽器

客戶端

http 通訊的情況下

客戶端 ---data---> 我們的服務(wù)器 ---data---> 客戶端

我們的服務(wù)器 ---data---> 蘋(píng)果的服務(wù)器 ---data---> 客戶端

微信端

手機(jī)上的微信端 ---data---> 微信服務(wù)器 ---data---> 我們的服務(wù)器 ---data---> 手機(jī)上的微信端

注:我們的服務(wù)器向主動(dòng)和微信企業(yè)號(hào)通信,可以訪問(wèn)微信的接口,由微信服務(wù)器和微信客戶端通信,原理都相似,就不畫(huà)圖了.

主要指導(dǎo)原則

客戶端

宗旨:移動(dòng)端更偏重體驗(yàn)!

關(guān)鍵詞:^[1]

• 遵從：UI能夠更好地幫助用戶理解內(nèi)容并與之互動(dòng)逗嫡，但卻不會(huì)分散用戶對(duì)內(nèi)容本身的注意力加匈。
• 清晰：各種大小的文字應(yīng)該易讀，圖標(biāo)應(yīng)該醒目叉存，去除多余的修飾，突出重點(diǎn)度帮，很好地突顯了設(shè)計(jì)理念歼捏。
• 深度：視覺(jué)的層次和生動(dòng)的交互動(dòng)作會(huì)賦予UI新的活力稿存，不但幫助用戶更好理解新UI的操作并讓用戶在使用過(guò)程中感到驚喜。
  引用自<iOS8設(shè)計(jì)規(guī)范>

原則:^[2]

• 首先瞳秽，去除了UI元素讓?xiě)?yīng)用的核心功能呈現(xiàn)得更加直接并強(qiáng)調(diào)其相關(guān)性瓣履。
• 其次，直接使用iOS的系統(tǒng)主題讓其成為應(yīng)用的UI练俐，這樣能給用戶統(tǒng)一的視覺(jué)感受袖迎。
• 最后，保證你設(shè)計(jì)的UI可以適應(yīng)各種設(shè)備和不同操作模式腺晾，這樣用戶可以在不同場(chǎng)景下舒適地享用你的應(yīng)用燕锥。

特點(diǎn):

1. 客戶端只要通過(guò)用戶的觸摸,拖拽來(lái)完成交互.
2. 屏幕比較大.
3. 便攜性適中

原理:客戶端是一個(gè)基于蘋(píng)果公司的iOS操作系統(tǒng)上面的一個(gè)軟件(進(jìn)程),相對(duì)于 PC 來(lái)說(shuō),性能略差,不處理過(guò)于復(fù)雜的邏輯.所以需要和服務(wù)器來(lái)進(jìn)行交互,如果把服務(wù)器比喻為數(shù)據(jù)的加工者,那么客戶端就是數(shù)據(jù)采集以及數(shù)據(jù)展示者.當(dāng)然客戶端也可以有瀏覽器,只不過(guò)性能比 PC 上的瀏覽器略差,但是客戶端的瀏覽器的獨(dú)特之處在于他可以和客戶端之間進(jìn)行一些交互(比如點(diǎn)擊客戶端網(wǎng)頁(yè)上的某個(gè)按鈕,彈出客戶端的提示框).

局限性

1. 客戶端的局限性是他的性能沒(méi)有 pc 好
2. 屏幕在功能設(shè)計(jì)上的局限性也是有的,這也是屏幕,體積的雙刃劍
3. 點(diǎn)觸沒(méi)有鼠標(biāo)精準(zhǔn),這也是客戶端本身的局限性,也是一把雙刃劍

優(yōu)點(diǎn)

1. 交互性較強(qiáng),手指操作靈活
2. 便攜,走到哪拿到哪
3. 持久化存儲(chǔ)方便,可以針對(duì)用戶這個(gè)點(diǎn),提升很強(qiáng)的定制化

14900839448012.jpg

web 端

宗旨:web 端相對(duì)比較偏功能和內(nèi)容!

特點(diǎn):

1. web 端只要通過(guò)鼠標(biāo)點(diǎn)擊來(lái)完成交互
2. 屏幕很大,鼠標(biāo)較小,所以點(diǎn)擊可以很精準(zhǔn).
3. 便攜性基本沒(méi)有

原理: web 端是通過(guò)瀏覽器來(lái)對(duì)服務(wù)器進(jìn)行交互的,其實(shí) web 端的瀏覽器也是一個(gè)軟件(進(jìn)程),其功能強(qiáng)大,相比服務(wù)器,網(wǎng)頁(yè)就是信息的采集者和展示者, web 端想和服務(wù)器交互有兩種方式.

1. html 通過(guò)http(短連接)來(lái)進(jìn)行表單提交,服務(wù)端返回?cái)?shù)據(jù)的時(shí)候,利用瀏覽器進(jìn)行渲染.
2. html 通過(guò) js 來(lái)進(jìn)行一些事件的驅(qū)動(dòng)來(lái)讓瀏覽器做一些事情,并發(fā)送 http(短連接)來(lái)和服務(wù)器進(jìn)行交互,服務(wù)端返回?cái)?shù)據(jù)的時(shí)候,利用js 和瀏覽器進(jìn)行一系列事件的觸發(fā).

局限性

1. pc 攜帶不便是他致命的弱點(diǎn),誰(shuí)沒(méi)事拿著電腦到處跑啊?
2. 通過(guò)網(wǎng)址來(lái)登錄,沒(méi)有點(diǎn)擊就出現(xiàn)的效果好
3. 復(fù)雜持久化存儲(chǔ)機(jī)制不完善,開(kāi)發(fā)者不能利用 web 端去給做一些針對(duì)用戶個(gè)性化的持久化存儲(chǔ)

優(yōu)勢(shì)

1. 可以進(jìn)行復(fù)雜的操作
2. 屏幕大,看著很爽

web端的優(yōu)勢(shì)就是源于性能較好的 PC 端和強(qiáng)大的瀏覽器來(lái)和用戶進(jìn)行一系列較復(fù)雜的操作.

14900816447614.jpg

功能強(qiáng)大,一個(gè)界面布滿所有功能.

微信端

宗旨:微信端設(shè)計(jì)更加輕量級(jí),簡(jiǎn)單功能的完成,一些信息的傳遞.

特點(diǎn):

1. 微信端主要靠下面的選項(xiàng)欄和發(fā)消息(發(fā)送指定消息,返回給用戶一些信息)來(lái)完成交互
2. 屏幕較小
3. 便攜性較強(qiáng)

原理:前面我們提到,客戶端是一個(gè)基于蘋(píng)果公司的iOS操作系統(tǒng)上面的一個(gè)軟件(進(jìn)程),相對(duì)于 PC 來(lái)說(shuō),性能略差,那么微信端就是微信這個(gè)軟件給一些公司提供的接口,微信的用戶量較大,所以可以通過(guò)向一些有意向在微信上展示自己信息的公司收費(fèi),然后他們給我們提供接口,讓我們可以再微信上展示一些我們自己的信息(按照他們的要求),所以微信端的開(kāi)發(fā)是我們的后臺(tái)開(kāi)發(fā)人員通過(guò)他們的接口給騰訊的服務(wù)器提供數(shù)據(jù),騰訊的服務(wù)器再去通知他們的客戶端進(jìn)行一些我們公司的信息展示

微信端的功能可以劃分為兩種

1. 我們提供按照要求給他們服務(wù)器數(shù)據(jù),他們服務(wù)器傳遞數(shù)據(jù)給微信,微信在他們的軟件上進(jìn)行一些展示(按照一種特定的形式)
2. 我們給他們一個(gè)鏈接地址(web 端的頁(yè)面),他們用軟件內(nèi)的瀏覽器進(jìn)行一些展示.

局限性

1. 既然使用別人的軟件去展示你的信息,那么就要按照人家的規(guī)矩來(lái).
2. 目前微信提供的服務(wù)還不是很豐富,所以對(duì)業(yè)務(wù)展示來(lái)說(shuō),不能很好地支持,只能展示一些比較簡(jiǎn)單的信息.

優(yōu)點(diǎn)

1. 微信的用戶基數(shù)大,讓用戶了解我們產(chǎn)品的代價(jià)較低,所以進(jìn)行一些基本信息的展示效果很不錯(cuò).可以通過(guò)新本信息去吸引用戶去下載我們的 app
2. 用戶在接受我們信息的時(shí)候代價(jià)較低,人人都玩微信,獲取我們信息很方便.

附:
ios8設(shè)計(jì)規(guī)范 中文版 完整版

1. 引用自《iOS8設(shè)計(jì)規(guī)范》 ?

2. 引用自《iOS8設(shè)計(jì)規(guī)范》 ?