WIN8設(shè)計特性淺談和騰訊微博MS首版設(shè)計思路分享

0 評論 2062 瀏覽 0 收藏 33 分鐘

作者:dengxuecui(崔登學(xué))? miaotong(佟淼)

10月,一個收獲的季節(jié),微軟的新一代操作系統(tǒng)window8悄然而至,同時,我們的微博客戶端團(tuán)隊,也搭上了第一波win8應(yīng)用的末班車,設(shè)計并推出了騰訊微博MS版本。本文將結(jié)合騰訊微博MS版本的設(shè)計過程以及對win8系統(tǒng)特性的認(rèn)識,聊聊win8操作的平臺的應(yīng)用設(shè)計。

文章很長,請選擇有價值的部分閱讀,或許你敢把它讀完呢…

本文索引:

1.?????Windows8—再構(gòu)想

2.?????Win8的系統(tǒng)特性

3.?????Win8的交互特性

4.?????Win8的視覺特性-Metro進(jìn)化

5.?????騰訊微博MS首版的設(shè)計思路

6.?????Win8平臺應(yīng)用設(shè)計建議

一、????Windows8—再構(gòu)想

關(guān)鍵詞:后PC時代

《Windows8 guide》開篇第一段即言明:“如今超過三分之二的PC是移動設(shè)備,比如筆記本、上網(wǎng)本、平板電腦。幾乎每一臺PC都有無線連接的能力”。所以,win8的設(shè)計更多的考慮了移動設(shè)備和觸控體驗(yàn),更加的關(guān)注的是用戶和應(yīng)用關(guān)系,而不是操作系統(tǒng)本身。雖然保留了大部分windows7的基礎(chǔ)特性,但win8系統(tǒng)旨在創(chuàng)造更優(yōu)的觸控體驗(yàn),建立新的良好的生態(tài)系統(tǒng)。

如果說蘋果完成了后pc時代的基礎(chǔ)性創(chuàng)新,那win8的出現(xiàn)則意味著傳統(tǒng)PC的全面遷徙。以ipad、iphone為代表的無線觸摸產(chǎn)品的強(qiáng)烈沖擊,讓微軟意識到PC戰(zhàn)場其實(shí)也已經(jīng)徹底轉(zhuǎn)移了,而win8操作系統(tǒng)就是在這種情形下微軟的一次再構(gòu)想。

二、????Win8的系統(tǒng)特性

Win8系統(tǒng)有很多不同一般的操作體驗(yàn),這里筆者摘取了一些更能體現(xiàn)其設(shè)計理念的特性進(jìn)行介紹,更多詳盡的特點(diǎn)就不在此贅言了。

Win as One

在win8系統(tǒng)中,程序是以應(yīng)用的形式存在的,它有應(yīng)用市場,用戶可以進(jìn)行應(yīng)用服務(wù)的購買,讓人不禁聯(lián)想到,這更像IOS、安卓等無線領(lǐng)域的,但不同在于,win8試圖通過系統(tǒng)的平臺,將安裝在該平臺上的所有應(yīng)用進(jìn)行有機(jī)的聯(lián)系,強(qiáng)調(diào)應(yīng)用間的協(xié)同和共享,給用戶帶來完整、生態(tài)化的體驗(yàn),也讓每一個在此生態(tài)系統(tǒng)內(nèi)的應(yīng)用“Win as One”。

1.???Charms(超級按鈕):高于任何應(yīng)用的系統(tǒng)整合工具欄

 

在任何時候,用戶都可通過在屏幕右側(cè)邊緣向左滑動或?qū)⑹髽?biāo)懸停至屏幕右側(cè),呼出Charms。Charms是個樞紐般的系統(tǒng)工具欄,通過這里,用戶可以快速的進(jìn)行搜索、分享、設(shè)置等操作。

2.???搜索:系統(tǒng)層級的整合搜索,帶來更全面快捷的搜索與信息檢索體驗(yàn)

 

搜索可查詢的范圍不再僅限于程序和文件,幾乎遍及操作系統(tǒng)和互聯(lián)網(wǎng)整個環(huán)境中。用戶不僅可以在一個應(yīng)用中查詢關(guān)鍵字,而且還可以快速切換到其他應(yīng)用,或者在幾個應(yīng)用直接來回切換搜索結(jié)果。簡化了用戶操作,無需重新輸入關(guān)鍵詞,就可以直接在新的應(yīng)用程序下獲得不同方面的搜索結(jié)果。

3.???共享:系統(tǒng)層級的整合分享,使應(yīng)用之間更開放,信息和內(nèi)容傳遞沒有界限

用戶可以在任何時候,把任何內(nèi)容直接通過分享,分享至支持該內(nèi)容分享的應(yīng)用中,使信息得到開放無障礙的流動和擴(kuò)散。

4.???貼靠視圖:一屏兩用,應(yīng)用共處之道

 

5.???動態(tài)提醒:無處不在,讓信息處理更加及時準(zhǔn)確

Win8的動態(tài)提醒機(jī)制主要通過兩種方式來實(shí)現(xiàn):動態(tài)磁貼和系統(tǒng)toast。在start界面你可以設(shè)置動態(tài)的磁貼以實(shí)時顯示每個應(yīng)用里的最新更新,在任何時候你的應(yīng)用都可以通過實(shí)時toast來對用戶進(jìn)行重要信息的提醒或者應(yīng)用操作的提醒,toast是可以被用戶主動滑走消失的,toast中可以直接顯示新消息的內(nèi)容。

前衛(wèi)的觸控體驗(yàn)

就在最近,當(dāng)被問及企業(yè)用戶喜歡Windows 8操作系統(tǒng)的什么特性時,身為微軟掌舵人的史蒂夫·鮑爾默給出了非常簡潔的回答:觸摸、觸摸、觸摸!

Win8非常注重觸控體驗(yàn),排除基本的觸控操作不說,其很多關(guān)鍵系統(tǒng)操作都是依靠比較高級手勢操作進(jìn)行的,雖然需要一定的學(xué)習(xí)成本,但因?yàn)槭怯脩舨坏脤W(xué)習(xí)的操作,而且習(xí)慣之后確實(shí)也會給整體體驗(yàn)帶來更加流暢、快捷的感受,這一點(diǎn)筆者本人還是比較欣賞的。另外通過這樣的高級手勢設(shè)定,win8使得用戶的操作僅通過觸摸屏幕就可以完全掌控,ipad也有類似的手勢操作,但那僅僅是作為輔助操作存在,相對而言,win8貫徹的更加徹底,同時也更加流暢和便捷。

1.???語義縮放

Win8的橫向流動界面可以無限延長,加之其內(nèi)容為主的設(shè)計思維,在很多頁面用戶都不得不面對long long的滑動導(dǎo)航壓力,比如win8的start(開始)界面,在這樣的界面,系統(tǒng)增加了一步高級手勢操作,用戶可通過雙指捏合,將當(dāng)前界面縮小為純導(dǎo)航視圖,并進(jìn)行快速導(dǎo)航跳轉(zhuǎn)。此視圖跟正常視圖其實(shí)是兩個界面,應(yīng)用設(shè)計者可以根據(jù)自己的情況自行設(shè)計該視圖的樣式和操作。

2.???應(yīng)用切換

Win8支持真正的多進(jìn)程管理,而且是沉浸式操作體驗(yàn),所以怎樣切換應(yīng)用,又是一個難題。Win8的解決方案是,用戶可以通過左側(cè)的邊緣向右滑動,可以直接切換為上一個應(yīng)用程序,整個過度非常流暢、快速。

3.???選擇操作

Win8的選擇操作使用了向下拉選的高級手勢,選擇操作可以在默認(rèn)界面直接進(jìn)行,不需要多一個編輯態(tài),也不需要再設(shè)置一個多選框,更加直接,但也需要學(xué)習(xí)成本。

4.???關(guān)閉程序

Win8沒有返回的物理按鍵,提倡沉浸式體驗(yàn)的設(shè)計理念,也造成了每個應(yīng)用都沒有關(guān)閉或者退出按鈕,那么用戶怎樣關(guān)閉一個應(yīng)用呢?只需要手指從屏幕頂端下劃至屏幕下半?yún)^(qū),伴隨流暢的動畫,應(yīng)用關(guān)閉。

5.???多進(jìn)程管理

用戶可以在屏幕左側(cè)向右滑動一小段距離再向回滑動,呼出當(dāng)前進(jìn)程管理。

6.???呼出工具欄

 

Win8應(yīng)用中把大部分操作工具,都放在隱藏的工具欄中,固定的導(dǎo)航也經(jīng)常放在隱藏的導(dǎo)航欄中,用戶可以通過屏幕上邊緣下滑或者下邊緣上滑,呼出工具欄和導(dǎo)航欄。

對傳統(tǒng)鼠鍵操作的平衡考量

Win8系統(tǒng)不僅僅有主推觸摸體驗(yàn)的metro界面,也保留了Windows之前窗口操作的桌面系統(tǒng),一方面照顧到windows用戶的使用習(xí)慣,另一方面也因?yàn)樵谖磥聿欢痰囊欢螘r間內(nèi),win8的很大一部分用戶依然會以鼠鍵操作為主要使用方式。另外,在metro界面的所有觸摸操作,均有相對應(yīng)的鼠鍵操作實(shí)現(xiàn)方式。

三、???Win8的交互特性

Win8 metro界面沿用了WP7的視覺風(fēng)格,并且在交互上也繼承了其簡單、快速、內(nèi)容為主等等的特質(zhì),像動態(tài)磁貼之于動態(tài)磁貼,橫向列表之于全景視圖,全局分享和搜索之于HUBS…Win8很多交互形式都是基于WP7的進(jìn)化和發(fā)展。他們在精神上是互通的,在這里偶也無恥的鏈一下自己去年的一篇文章–《WP7交互特性淺析及APP設(shè)計探究》,有興趣的可以參考閱讀哦。

其實(shí)win8的大部分特色的具體交互形式在上面的系統(tǒng)特性中都已經(jīng)做了很多介紹,這里主要進(jìn)行一些交互設(shè)計思維上的總結(jié),并結(jié)合實(shí)例進(jìn)行說明。

1.“Content not Chrome”– 內(nèi)容優(yōu)于形式,注重信息而非界面

這是win8設(shè)計的核心思維,Chrome在設(shè)計時候,提出的理念就是讓用戶更加關(guān)注網(wǎng)頁內(nèi)容,而忽視瀏覽器本身,win8將其拿來主義一番,并進(jìn)行了發(fā)揚(yáng),內(nèi)容為先,其次是界面。我們會看到下面提到的一些交互設(shè)計方向,都是以這一核心思想做指導(dǎo)的。

舉個手機(jī)的例子來形容這一點(diǎn)再貼切不過了。在iPhone之前很長一個時期內(nèi),手機(jī)的設(shè)計最重要的是硬件外觀設(shè)計,奇形怪狀,人們買手機(jī)的時候也非常注重外觀的美丑,而發(fā)展到現(xiàn)在,每一臺手機(jī)只有一個大屏幕,人們更加注重的卻是屏幕里面的東西了,對手機(jī)的外形已經(jīng)不再那么關(guān)系,當(dāng)有一天,手機(jī)漸漸無形了,我想我們也不會那么奇怪。其實(shí)界面的設(shè)計也是這個道理,一切的形式都是為了更好呈現(xiàn)內(nèi)容并讓用戶愉快的去接受而存在的。Win8將這一點(diǎn)作為其設(shè)計的指導(dǎo)思路。

2.?流動的導(dǎo)航,清晰的內(nèi)容流向,繼續(xù)或者回頭

以內(nèi)容為主導(dǎo)的交互界面,win8更希望通過內(nèi)容的流動去帶動或者吸引用戶的使用,希望通過用戶的潛意識去引導(dǎo)用戶。所以它的導(dǎo)航是和內(nèi)容在一起的,用戶感知的下一步是去向什么樣的內(nèi)容,而不是怎樣去走下一步。

3.?沉浸式的瀏覽與操作體驗(yàn),隱藏式的工具與導(dǎo)航操作

Win8的設(shè)計提倡給予用戶沉浸式的體驗(yàn),在有限的屏幕中,將內(nèi)容最大化的呈現(xiàn)給用戶,同時將固定的導(dǎo)航和工具隱藏在上下邊緣的工具欄和導(dǎo)航欄中。Windows不再是窗口,而是世界。

4.?橫屏瀏覽帶來的扁平架構(gòu)

Win8的頁面最大的特色就是流暢的橫屏瀏覽,基于內(nèi)容的導(dǎo)航架構(gòu),使win8的導(dǎo)航不在重要,而是直接把可能在其他平臺需要二級頁面的呈現(xiàn)的內(nèi)容,直接呈現(xiàn)出來。另外,橫屏空間的良好擴(kuò)展性,也使得整個系統(tǒng)的架構(gòu)更加扁平并且可用。

5.?橫屏操作體驗(yàn)大部分情況下明顯優(yōu)于豎屏操作

Win8的設(shè)備比例,大部分設(shè)備使用情景以及橫向滑動的系統(tǒng)操作等原因,造成了win8系統(tǒng)大部分情況下橫屏操作的體驗(yàn)要由于豎屏操作。

風(fēng)險

這不是微軟的軟文,所以win8還是有很多風(fēng)險和問題的:

l??用戶的潛意識最容易迷失

Win8提倡以內(nèi)容去引導(dǎo)用戶的瀏覽,希望通過用戶的潛意識去引導(dǎo)用戶。但其實(shí),一旦內(nèi)容的展現(xiàn)形式處理不夠好,用戶很容易在千篇一律的內(nèi)容面前迷失自己。

l??高昂的學(xué)習(xí)成本

各種高級手勢的運(yùn)用,需要用戶很高的學(xué)習(xí)成本,過高的操作門檻,在佩服其勇氣的同時,也不得不為其擔(dān)憂。

l??內(nèi)容也會疲勞

Win8的生命力在于內(nèi)容,好的內(nèi)容能夠在win8平臺上得到很棒的呈現(xiàn),但對形式的過分忽視,也會造成其對內(nèi)容的要求更加苛刻,因?yàn)楹茈y在win8平臺上用不一樣的表達(dá)方式來彌補(bǔ)某些內(nèi)容本身的不足。外對高質(zhì)量內(nèi)容的持續(xù)要求,也可能會造成后期的疲軟以及用戶的審美疲勞。

l??觸控與鍵鼠的混亂不堪

Win8十分激進(jìn)的注重觸摸體驗(yàn),但又不得不考慮大部分用戶的設(shè)備門檻和使用習(xí)慣,直接將Modern UI界面和Windows界面糅合在一起,造成不小的困擾。在設(shè)計每個觸摸體驗(yàn)的同時,又要考慮鍵鼠用戶的操作,也給設(shè)計本身帶來了很多困難。

四、???Win8的視覺特性-Metro進(jìn)化

從WP7開始的Metro風(fēng)格引發(fā)了鋪天蓋地的口水戰(zhàn)。有人說這是微軟最后的掙扎,也有人說這是不能回避的未來樣式??雌饋鞼P7和Win8好像是iPhone和iPad的區(qū)別,但其實(shí)Win8的平板更大程度上代表了所謂的Metro風(fēng)格,哦,應(yīng)該叫Modern UI或Windows 8 style。

貫穿始終的精髓

靈感來源-:

? 現(xiàn)代設(shè)計 — 包豪斯(簡潔、實(shí)用,減少元素,以突顯本質(zhì))

??國際主義平面設(shè)計風(fēng)格 — 瑞士平面設(shè)計風(fēng)格 (清晰強(qiáng)烈的柵格設(shè)計,強(qiáng)調(diào)版式設(shè)計,用文字的大小和層次來控制頁面的節(jié)奏)

???動態(tài)設(shè)計 — 電影藝術(shù)(世界級的動畫,用以激發(fā)用戶情感)

這樣的設(shè)計思路清晰的鋪開了“內(nèi)容高于形式”的主題,簡潔而又無邊界、拋棄繁復(fù)的無質(zhì)感元素,完美的詮釋了Metro風(fēng)格的設(shè)計精髓。

經(jīng)典風(fēng)格的進(jìn)化

雖然在Win8的設(shè)計上微軟依舊提供大量的“設(shè)計建議”,但微軟漸漸放開了設(shè)計師的手腳,在經(jīng)典的Metro風(fēng)格上做了大量的改進(jìn),這一切也是為了更好傳遞與展示信息。

??輕質(zhì)感?— 方形、色塊、直角看起來依舊是Win8的主要視覺風(fēng)格,但在越來越多的應(yīng)用中我們看到了漸變、投影、半透明以及輕量的擬物。

??更多的分辨率尺寸?— 與WP7的單一尺寸不同,Win8的設(shè)備分辨率最小是10‘’(1024×768),推薦尺寸是11‘’(1366×768)及以上。微軟提供了動態(tài)布局方式,可以縮小、放大或重新排列控件元素,從而適應(yīng)各個設(shè)備的可用視覺空間。

 

??優(yōu)秀的柵格系統(tǒng)?— 在推薦的1366×768分辨率上,柵格的sub-unit為5px,1 unit為20px,所有的間隔與區(qū)域劃分都以此為基礎(chǔ)。針對不同的分辨率,柵格系統(tǒng)也分為3種基本尺寸:1倍、1.4倍、1.8倍。這也要求在提供位圖資源的時候提供3種尺寸。

??動態(tài)磁貼?— Win8的動態(tài)磁貼提供了兩種尺寸、多種排版方式,設(shè)計師可以針對不同的推送內(nèi)容,選擇最有效的方式。你可以展示最新上傳的照片、正在聽的音樂、你的新提及、新郵件。用戶既可以直接在瓦片中閱讀提示信息,也可以對磁貼進(jìn)行選擇、刪除等操作。它會不斷吸引用戶回到你的沉浸體驗(yàn)中,是一扇吸引和激勵用戶的門。

???導(dǎo)向設(shè)計,從物理回歸界面 — WP7的物理后退鍵是一條連續(xù)的路徑, Win8的按鍵則全部移到了界面中。除了后退按鈕,還有語義縮放、超級按鈕、切換程序和關(guān)閉程序的手勢這一些列精彩紛呈的路徑選擇方式。當(dāng)然,在設(shè)計的時候,要利用視覺元素更有效的明確層級轉(zhuǎn)換的關(guān)系,降低用戶迷失的風(fēng)險。

??沉浸式體驗(yàn)?— WP7中還保留著狀態(tài)欄和工具欄,在Win8中這一切都被隱藏起來。Win8風(fēng)格希望用戶能夠沉浸內(nèi)容本身,而不是讓用戶去考慮每個按鈕的作用,讓用戶用自己的潛意識行為去操作。

?

五、???騰訊微博MS首版的設(shè)計思路

所有的應(yīng)用都是在解決用戶的問題,所有的設(shè)計都是在解決應(yīng)用和用戶的問題。這次騰訊微博MS首版設(shè)計的分享,我們決定以問題的形式呈現(xiàn)出來,解決了這些問題,我們也完成了該應(yīng)用的設(shè)計。

?騰訊微博MS呈現(xiàn)的核心內(nèi)容是什么

每一個win8的應(yīng)用設(shè)計之初都會被問及這樣一個問題:“This app is the best app in its category at____?”。我們的應(yīng)用擅長什么?我們的用戶能用它來做什么?我們該提供怎樣的功能和內(nèi)容?在這個核心想好之后,再去以此延伸去設(shè)計交互或視覺的呈現(xiàn)方式。

毫無疑問,我們所要做的就是將微博的信息完整、快速的呈現(xiàn)給用戶,并提供給用戶互動以及擴(kuò)展微博關(guān)系鏈的核心體驗(yàn)。

明晰了用戶需求和產(chǎn)品內(nèi)容的關(guān)系之后,我們所面對問題也就變成了產(chǎn)品設(shè)計本身和平臺的契合,以及用戶易用性與產(chǎn)品細(xì)節(jié)的打磨。

 

?糾結(jié)的主頁設(shè)計:流動的導(dǎo)航與無盡的微博主頁的關(guān)系

微博是個消息匯合的地方,最核心的部分是用戶的Timeline,這里的消息數(shù)量是無盡的,用戶在此獲取內(nèi)容的操作也是連續(xù)的。在win8平臺,最傳統(tǒng)的信息組織形式莫過于,將微博Timeline以呈現(xiàn)部分內(nèi)容的方式作為主頁的一部分進(jìn)行呈現(xiàn),如要獲取更多,則需要進(jìn)入下一級詳情頁(如下圖),這樣好處在于我們可以在首頁上展現(xiàn)更多的內(nèi)容以吸引用戶。但是卻發(fā)現(xiàn),我們的核心內(nèi)容卻沒有得到很好展示。

于是,我們放棄了最初的想法,嘗試了第二種結(jié)構(gòu)。為了呈現(xiàn)核心內(nèi)容,我們果斷放棄廣場、頻道等內(nèi)容的干擾,直接去除。為了方便用戶能夠盡快的處理自己的個人信息,我們在最開始的view保留用戶的個人中心,在其后則將所有的微博以相對規(guī)則的順序進(jìn)行排列,用一個個矩形承載每條微博的信息(如下圖)。

這樣的好處在于我們能將用戶timeline的微博全部呈現(xiàn),不必?fù)?dān)心被打斷。但是,由于矩形的相對規(guī)則排序,造成了我們不能保證每條微博都完整呈現(xiàn),用戶還是需要點(diǎn)進(jìn)每一條微博去瀏覽他的內(nèi)容,增加了用戶的操作壓力。另外,在橫屏瀏覽的信息流中,上下排布的微博信息,也給用戶的單向?yàn)g覽造成了困擾。

于是,我們改進(jìn)并實(shí)現(xiàn)了第三種方案。時間軸的設(shè)計讓無盡的微博主頁看上去更加活潑,卻又如此理所當(dāng)然。用戶可以在首頁就能完整的瀏覽每一條微博消息,單向的內(nèi)容瀏覽使用戶的行為更加的順暢自然。甚至,我們可以很自信的去掉首頁的LOGO,當(dāng)我們返璞歸真的思考內(nèi)容本質(zhì)的東西,你就會發(fā)現(xiàn),你希望給用戶呈現(xiàn)的將不再是某種形式,而是某種氣質(zhì)。

??怎樣在茫茫Win8應(yīng)用中尋找自己的獨(dú)特氣質(zhì)

?

我們先來看看商店里的一些應(yīng)用,在其他平臺的風(fēng)格中,Win8風(fēng)格堪稱先鋒,但當(dāng)鋪天蓋地的方塊、直角迎面而來,用戶就很難記住那些看起來差不多的應(yīng)用了。那么,在視覺設(shè)計中我們又該怎樣體現(xiàn)自己的獨(dú)特氣質(zhì)呢?

1.????主頁的進(jìn)化

設(shè)計初期,我們保守的嘗試了經(jīng)典Win8風(fēng)格。我們發(fā)現(xiàn)自己的目光被那些絢爛的大色塊奪走了。同時,這樣的布局,對微博的文字閱讀也不是一種很好的

方式。在第二、第三稿的時候,我們?nèi)サ袅藵u變,調(diào)整了背景色,將微博以規(guī)整統(tǒng)一的無漸變方形呈現(xiàn)。內(nèi)容雖然明顯了,但微博閱讀的完整性以及圖片的優(yōu)勢卻依舊沒有充分體現(xiàn)出來…

在心理學(xué)中,人類對圖片的短時記憶會比文字更快速,閱讀的時候一張配圖會讓人更快速的定位到上次閱讀的位置,而如果是簡單的文字語句則很難做到這點(diǎn)。于是在最終的時間軸方案中,我們充分的考慮了Win8的大尺寸屏幕,為微博的文字和圖片呈現(xiàn)方式制定了特殊的策略:按時間順序排序的每塊微博區(qū)塊為固定寬度,圖片均以固定寬度無邊界顯示。微博區(qū)塊的高度則根據(jù)屏幕進(jìn)行自動適應(yīng),保證文字全部顯示,圖片高度則根據(jù)屏幕高度和文字高度進(jìn)行相應(yīng)裁剪。同時也設(shè)定了最小高度,避免微博區(qū)塊出現(xiàn)太過于強(qiáng)烈的高低落差。

個人中心的排版也拋棄一般的色塊,大尺寸的頭像,三圍頁的list排布,用高亮色的數(shù)字和強(qiáng)對比色的提示來高效的展示信息。

2.????藍(lán)色,延續(xù)的DNA

在設(shè)計上我們延續(xù)了騰訊微博的經(jīng)典色調(diào)藍(lán)色,但針對整體思路我們將藍(lán)色的明度降低,用清透的效果營造出一種舒適柔和的氛圍,減少環(huán)境色對閱讀的干擾。

3.????細(xì)節(jié),簡潔與簡陋的一步之差

極簡風(fēng)格最怕的就是看起來像沒有設(shè)計過,為了避免這種現(xiàn)象的出現(xiàn),我們用簡單的樣式配合獨(dú)特的排版方式,在視覺和交互上都增加更多考究的細(xì)節(jié)。

l??Timeline的不同 — 用時間線貫穿始終;采用了圓形頭像平衡畫面;配合時間軸的旋轉(zhuǎn)刷新動畫;大尺寸展示的圖片策略。

l??搜索頁、個人資料頁 — Tab頁減少層級跳轉(zhuǎn);去除不必要的邊框等Chrome元素。

?讓架構(gòu)層次處理更扁平,給用戶更少的全屏跳躍

在win8中能讓用戶迷失的除了流動不做區(qū)分的內(nèi)容,還有就是太多的全屏跳轉(zhuǎn)。沉浸式體驗(yàn)不應(yīng)該存在于應(yīng)用的每個頁面,在合理的信息區(qū)分之后,扁平化的架構(gòu)處理才更加符合win8的用戶。

?觸控與PC的抉擇

寫操作是微博的核心體驗(yàn)之一,考慮了用戶在Win8平臺進(jìn)行寫操作時,更加有可能選擇使用鍵盤輸入微博內(nèi)容,我們在進(jìn)行提及多人以及插入話題功能時,同時考慮了觸屏輸入和鍵盤輸入兩種模式下的不同操作反饋,借鑒了PC端微博寫操作的操作體驗(yàn)。

在win8的設(shè)計中,鍵鼠的操作設(shè)計并不作為主要設(shè)計因素,但是卻必須要考慮。很多時候我們多考慮一點(diǎn),用戶就會方便很多。

六、???Win8平臺應(yīng)用設(shè)計建議

l??不要過分遵守win8的設(shè)計指引,指引里的一切都是建議或者不建議,應(yīng)用的設(shè)計應(yīng)該做綜合的考慮,平衡用戶、平臺和自己的內(nèi)容,再去做抉擇。

l??Win8應(yīng)用為內(nèi)容而生,設(shè)計之前請先想清楚你的應(yīng)用能給用戶帶來什么,然后合理的安排你的內(nèi)容層次。

l??Win8的導(dǎo)航是流動的,但也是易迷失的,所以我們更應(yīng)該在內(nèi)容的呈現(xiàn)形式上做不同的區(qū)分,以此來增加用戶對其的辨識和聚焦,減少迷失。

l??Win8的工具欄和固定導(dǎo)航欄都是隱藏的,但并不是說界面上就不應(yīng)該出現(xiàn)這些,應(yīng)用的核心操作以及用戶最常用的操作,還是建議適當(dāng)?shù)脑趹?yīng)用界面就予以呈現(xiàn)。

l??Metro UI不是大方塊,讓那些言論見鬼去,在保持輕量和內(nèi)容為主的前提下,適當(dāng)?shù)脑黾咏缑嬉曈X層次和其他圖形或者無圖形的展現(xiàn),是有利于用戶對內(nèi)容的辨識以及舒適閱讀的。

l??在主要滿足的觸摸體驗(yàn)的同時,也適當(dāng)考慮下鼠鍵用戶的操作體驗(yàn),這能給你帶來口碑。

l??盡量減少操作的層級,win8的橫向?yàn)g覽已經(jīng)帶來了更加扁平的信息架構(gòu)的機(jī)會,不要揮霍掉。

l??沉浸式體驗(yàn)沒錯也很好,但并不是說就要做各種的全屏頁面跳轉(zhuǎn),合理安排信息的主次,使交互操作更加輕量和可預(yù)期,請為用戶省點(diǎn)力。

l??Win8的操作系統(tǒng)一般都可以提供比較可靠的硬件平臺,所以請保持你的應(yīng)用的動態(tài)與流暢。

l??謹(jǐn)慎考慮豎屏操作,可以為愛選擇放手。

七、???小結(jié)

整體的感覺win8操作系統(tǒng)還是非常快速、流暢、直接的,這是一次嘗試,微軟試圖把人們對PC的操作習(xí)慣向更觸摸更移動的方向遷移,但還有比較長的路要走。但是win8的設(shè)計哲學(xué)還是很應(yīng)該得到認(rèn)可的,也希望在不久的將來,大家說到簡單、直接、快速這幾個詞的時候,聯(lián)想到的不僅僅是李小龍,還有這樣一個敢于嘗試的操作系統(tǒng)。

(本文出自Tencent MXD Blog)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!