WIN8設計pu)匭xing)淺(qian)談和騰(teng)訊微博(bo)MS首版(ban)設計思(si)路(lu)分享
WIN8設計��pu)匭��xing)淺(qian)談和騰(teng)訊微博(bo)MS首版(ban)設計思(si)路(lu)分享-移動閱(yue)讀二維碼

10月,一個收獲(huo)的季節(jie),微軟的新一代操(cao)作系統window8悄然而至,同時,我們的微博(bo)客戶端團隊,也搭(da)上了第一波win8應用(yong)的na)┌喑擔 杓撇?瞥雋頌teng)訊微博(bo)MS版(ban)本(ben)。本(ben)文將(jiang)結合騰(teng)訊微博(bo)MS版(ban)本(ben)的設計過程以及對win8系統特性(xing)的認(ren)識,聊聊win8操(cao)作的平台的應用(yong)設計。

文章很(hen)長,請選擇有價值的部分閱(yue)讀,或許(xu)你敢(gan)ye)閹ta)讀完呢…

本(ben)文索引︰

1.?????Windows8—再構想

2.?????Win8的系統特性(xing)

3.?????Win8的交互特性(xing)

4.?????Win8的視(shi)覺(jue)特性(xing)-Metro進化

5.?????騰(teng)訊微博(bo)MS首版(ban)的設計思(si)路(lu)

6.?????Win8平台應用(yong)設計建議

一、????Windows8—再構想

?關鍵詞︰後PC時代

《Windows8 guide》開篇第一段即言明︰“如今超過三(san)分zhong) C是移動設備,比re)綾bi)shi)潛ben)、上網本(ben)、平板電腦(nao)。幾乎每(mei)一台PC都jia)形尷  擁哪(na)芰Α薄Ksuo)以,win8的設計更多的mu)悸橇艘貧 璞負痛?靨逖椋 jia)的關注的是用(yong)戶和應用(yong)關系,而不是操(cao)作系統本(ben)身。雖(sui)然保留了大部分windows7的mu)ˇ匭xing),但win8系統旨在創造更優的觸控體驗,建立新的良(liang)好的生態系統。

如果說隻果完成(cheng)了後pc時代的mu)︵xing)創新,那win8的出現(xian)則(ze)意(yi)味著傳統PC的全面遷(qian)徙。以ipadiphone為代表的無線觸摸產品的強烈(lie)沖擊,讓微軟意(yi)識到PC戰場其(qi)實也已經(jing)徹底(di)轉移了,而win8操(cao)作系統就是在這種(zhong)情形下微軟的一次再構想。

二、????Win8的系統特性(xing)

Win8系統有很(hen)多不同一般的操(cao)作體驗,這里筆(bi)者摘取了一些更能體現(xian)其(qi)設計理念的特性(xing)進行介紹,更多詳盡(jin)的特點就不在此(ci)贅言yue)恕/p>

Win as One

在win8系統中,程序是以應用(yong)的形式存在的,它(ta)有應用(yong)市場,用(yong)戶可以進行應用(yong)服務(wu)的購買,讓人(ren)不禁聯(lian)想到,這更像IOS、安(an)卓(zhuo)等(deng)無線領域的,但不同在于,win8試圖(tu)通過系統的平台,將(jiang)安(an)裝在該(gai)平台上的所(suo)有應用(yong)進行有機(ji)的聯(lian)系,強調應用(yong)間(jian)的協同和共享,給用(yong)戶帶來完整、生態化的體驗,也讓每(mei)一個在此(ci)生態系統內的應用(yong)“Win as One”。

1.???Charms(超級按ci)︰高(gao)于任何應用(yong)的系統整合工具欄

WIN8設計��pu)匭��xing)淺(qian)談和騰(teng)訊微博(bo)MS首版(ban)設計思(si)路(lu)分享

在任何時候,用(yong)戶都可通過在屏幕(mu)右側邊(bian)緣向左(zuo)滑(hua)動或將(jiang)鼠標(biao)懸(xuan)停至屏幕(mu)右側,呼出Charms。Charms是個樞紐般的系統工具欄,通過這里,用(yong)戶可以快速的進行搜索、分享、設置等(deng)操(cao)作。

2.???搜索︰系統層級的整合搜索,帶來更全面快捷的搜索與信息(xi)檢(jian)索體驗

搜索可查詢的範圍(wei)不再僅限于程序和文件(jian),幾乎遍及an)cao)作系統和互聯(lian)網整個環(huan)境(jing)中。用(yong)戶不僅可以在一個應用(yong)中查詢關鍵字,而且還可以快速切換到其(qi)他應用(yong),或者在幾個應用(yong)直接來回切換搜索結果。簡化了用(yong)戶操(cao)作,無需重(zhong)新輸入關鍵詞,就可以直接在新的應用(yong)程序下獲(huo)得不同方(fang)面的搜索結果。

3.???共享︰系統層級的整合分享,使(shi)應用(yong)之間(jian)更開放,信息(xi)和內容傳遞沒有界限

用(yong)戶可以在任何時候,把(ba)任何內容直接通過分享,分享至支持zhi)媚諶莘窒淼撓τyong)中,使(shi)信息(xi)得到開放無障(zhang)礙的流(liu)動和擴(kuo)散(san)。

4.???貼靠視(shi)圖(tu)︰一屏兩用(yong),應用(yong)共處之道

 

5.???動態提醒︰無處不在,讓信息(xi)處理更加(jia)及時準(zhun)確

Win8的動態提醒機(ji)制主(zhu)要(yao)通過兩種(zhong)方(fang)式來實現(xian)︰動態磁(ci)貼和系統toast。在start界面你可以設置動態的磁(ci)貼以實時顯示每(mei)個應用(yong)里的最(zui)新更新,在任何時候你的應用(yong)都可以通過實時toast來對用(yong)戶進行重(zhong)要(yao)信息(xi)的提醒或者應用(yong)操(cao)作的提醒,toast是可以被用(yong)戶主(zhu)動滑(hua)走消失的,toast中可以直接顯示新消息(xi)的na)諶蕁/p>

前衛的觸控體驗

就在最(zui)近,當被問shi)捌笠滌yong)戶喜歡Windows 8操(cao)作系統的什麼特性(xing)時,身為微軟掌舵人(ren)的史蒂夫?鮑爾(er)默給出了非qian)<蚪嗟幕(mu)卮穡捍? ? ?/p>

Win8非qian)W zhong)觸控體驗,排除基本(ben)的觸控操(cao)作不說,其(qi)很(hen)多關鍵系統操(cao)作都是依靠比較高(gao)級手zhi)撇cao)作進行的,雖(sui)然需要(yao)一定(ding)的學習成(cheng)本(ben),但因為是用(yong)戶不得學習的操(cao)作,而且習慣之後確實也會給整體體驗帶來更加(jia)流(liu)暢、快捷的感受(shou),這一點筆(bi)者本(ben)人(ren)還gu)潛冉閑郎偷摹A磽wai)通過這樣的高(gao)級手zhi)粕瓚ding),win8使(shi)得用(yong)戶的操(cao)作僅通過觸摸屏幕(mu)就可以完全掌控,ipad也有類似的手zhi)撇cao)作,但那僅僅是作為輔助(zhu)操(cao)作存在,相(xiang)對而言,win8貫徹的更加(jia)徹底(di),同時也更加(jia)流(liu)暢和便(bian)捷。

1.???語義縮(suo)放

Win8的橫向流(liu)動界面可以無限延(yan)長,加(jia)之其(qi)內容為主(zhu)的設計思(si)維,在很(hen)多頁面用(yong)戶都不得不面對long long的mu)  己窖沽Γ 熱(re)in8的start(開始(shi))界面,在這樣的界面,系統增加(jia)了一步高(gao)級手zhi)撇cao)作,用(yong)戶可通過雙(shuang)指(zhi)捏合,將(jiang)當前界面縮(suo)小為純導航視(shi)圖(tu),並進行快速導航跳轉。此(ci)視(shi)圖(tu)跟正(zheng)常視(shi)圖(tu)其(qi)實是兩個界面,應用(yong)設計者可以根據自己的情況(kuang)自行設計該(gai)視(shi)圖(tu)的樣式和操(cao)作。

2.???應用(yong)切換

Win8支持真正(zheng)的多進程管理,而且是qian)chen)浸式jiang)僮魈逖椋 suo)以怎樣切換應用(yong),又zhi)且桓瞿煙狻in8的解(jie)決方(fang)案是,用(yong)戶可以通過左(zuo)側的邊(bian)緣向右滑(hua)動,可以直接you)謝晃 弦桓 τyong)程序,整個過度非qian)Aliu)暢、快速。

3.???選擇操(cao)作

Win8的選擇操(cao)作使(shi)用(yong)了向下拉選的高(gao)級手zhi)疲 ≡癲cao)作可以在默認(ren)界面直接進行,不需要(yao)多一個編輯(ji)態,也不需要(yao)再設置一個多選框,更加(jia)直接,但也需要(yao)學習成(cheng)本(ben)。

4.???關閉程序

Win8沒有返回的物(wu)理按鍵,提倡沉(chen)浸式體驗的設計理念,也造成(cheng)了每(mei)個應用(yong)都沒有關閉或者退(tui)出按ci)? 敲從yong)戶怎樣關閉一個應用(yong)呢?只(zhi)需要(yao)手zhong)zhi)從屏幕(mu)頂端下劃至屏幕(mu)下半(ban)區,伴隨流(liu)暢的動畫,應用(yong)關閉。

5.???多進程管理

用(yong)戶可以在屏幕(mu)左(zuo)側向右滑(hua)動一小段距(ju)離再向回滑(hua)動,呼出當前進程管理。

6.???呼出工具欄

Win8應用(yong)中把(ba)大部分操(cao)作工具,都放在隱藏的工具欄中,固定(ding)的導航也經(jing)常放在隱藏的導航欄中,用(yong)戶可以通過屏幕(mu)上邊(bian)緣下滑(hua)或者下邊(bian)緣上滑(hua),呼出工具欄和導航欄。

對傳統cheng)蠹cao)作的平衡考量

Win8系統不僅僅有主(zhu)推觸摸體驗的metro界面,也保留了Windows之前窗口操(cao)作的桌面系統,一huan)fang)面照顧到windows用(yong)戶的使(shi)用(yong)習慣,另一huan)fang)面也因為在未來不短的一段時間(jian)內,win8的很(hen)大一部分用(yong)戶依然會以鼠鍵操(cao)作為主(zhu)要(yao)使(shi)用(yong)方(fang)式。另外(wai),在metro界面的所(suo)有xie)?cao)作,均有相(xiang)對應的鼠鍵操(cao)作實現(xian)方(fang)式。

三(san)、???Win8的交互特性(xing)

Win8 metro界面沿用(yong)了WP7的視(shi)覺(jue)風格,並且在交互上也繼(ji)承了其(qi)簡單、快速、內容為主(zhu)等(deng)等(deng)的特質(zhi),像動態磁(ci)貼之于動態磁(ci)貼,橫向列(lie)表之于全景視(shi)圖(tu),全局(ju)分享和tui)閹髦 UBS…Win8很(hen)多交互形式都是基于WP7的進化和發展。他們在精神上是互通的,在這里偶也無恥的鏈一下自己去年的一篇文章《WP7交互特性(xing)淺(qian)析(xi)及APP設計pu)tan)究》,有興趣的mu)梢圓慰莢yue)讀哦。

其(qi)實win8的大部分特色的具體交互形式在上面的系統特性(xing)中都已經(jing)做了很(hen)多介紹,這里主(zhu)要(yao)進行一些交互設計思(si)維上的總結,並結合實例進行說明。

1.“Content not Chrome” 內容優于形式,注重(zhong)信息(xi)而非界面

這是win8設計的核心思(si)維,Chrome在設計時候,提出的理念就是讓用(yong)戶更加(jia)關注網頁內容,而忽視(shi)yu) 榔鞅ben)身,win8將(jiang)其(qi)拿來主(zhu)義一huan)   辛朔 錚 諶菸 齲 qi)次是界面。我們會看(kan)到下面提到的一些交互設計方(fang)向,都是以這一核心思(si)想做指(zhi)導的。

舉(ju)個手zhi)ji)的例子(zi)來形容這一點再貼切不過了。在iPhone之前很(hen)長一個時期內,手zhi)ji)的設計最(zui)重(zhong)要(yao)的是硬件(jian)外(wai)觀設計,奇(qi)形怪狀,人(ren)們買手zhi)ji)的時候也非qian)W zhong)外(wai)觀的美丑(chou),而發展到現(xian)在,每(mei)一台手zhi)ji)只(zhi)有一個大屏幕(mu),人(ren)們更加(jia)注重(zhong)的卻是屏幕(mu)里面的東西了,對手zhi)ji)的外(wai)形已經(jing)不再那麼關系,當有一天,手zhi)ji)漸漸無形了,我想我們也不會那麼奇(qi)怪。其(qi)實界面的設計也是這個道理,一切的形式都是為了更好呈(cheng)現(xian)內容並讓用(yong)戶愉(yu)快的去接受(shou)而存在的。Win8將(jiang)這一點作為其(qi)設計的指(zhi)導思(si)路(lu)。

2.?流(liu)動的導航,清晰的na)諶 liu)向,繼(ji)續或者回頭

以yue)諶菸 zhu)導的交互界面,win8更希望通過內容的流(liu)動去帶動或者吸(xi)引用(yong)戶的使(shi)用(yong),希望通過用(yong)戶的潛意(yi)識去引導jia)yong)戶。所(suo)以它(ta)的導航是和內容在一起的,用(yong)戶感知的下一步是去向什麼樣的na)諶藎 皇竊躚?呦亂徊健/p>

3.?沉(chen)浸式的瀏覽與操(cao)作體驗,隱藏式的工具與導航jiang)僮/strong>

Win8的設計pu)岢 櫨yong)戶沉(chen)浸式的體驗,在有限的屏幕(mu)中,將(jiang)內容最(zui)大化的呈(cheng)現(xian)zhi)yong)戶,同時將(jiang)固定(ding)的導航和工具隱藏在上下邊(bian)緣的工具欄和導航欄中。Windows不再是窗口,而是世界。

4.?橫屏瀏覽帶來的扁平架構

Win8的頁面最(zui)大的特色就是流(liu)暢的橫屏瀏覽,基于內容的導航架構,使(shi)win8的導航jiang)輝謚zhong)要(yao),而是直接把(ba)可能在其(qi)他平台需要(yao)二級頁面的呈(cheng)現(xian)的na)諶藎 苯映cheng)現(xian)出來。另外(wai),橫屏空間(jian)的良(liang)好擴(kuo)展性(xing),也使(shi)得整個系統的架構更加(jia)扁平jiang)?銥捎yong)。

5.?橫屏操(cao)作體驗大部分情況(kuang)下明顯優于豎屏操(cao)作

Win8的設備比例,大部分設備使(shi)用(yong)情景以及橫向滑(hua)動的系統操(cao)作等(deng)原因,造成(cheng)了win8系統大部分情況(kuang)下橫屏操(cao)作的體驗要(yao)由于豎屏操(cao)作。

風險

這不是微軟的軟文,所(suo)以win8還gu)怯瀉hen)多風險和問題的︰

l??用(yong)戶的潛意(yi)識最(zui)容易迷失

Win8提倡以yue)諶萑?加(jia)yong)戶的瀏覽,希望通過用(yong)戶的潛意(yi)識去引導jia)yong)戶。但其(qi)實,一旦內容的展現(xian)形式處理不夠好,用(yong)戶很(hen)容易在千篇一律(lv)的na)諶菝媲懊允?約骸/p>

l??高(gao)昂的學習成(cheng)本(ben)

各種(zhong)zhi)嘸妒質(zhi)頻腦(nao)擻yong),需要(yao)用(yong)戶很(hen)高(gao)的學習成(cheng)本(ben),過高(gao)的操(cao)作門檻,在佩(pei)服其(qi)勇氣的同時,也不得不為其(qi)擔憂(you)。

l??內容也會疲勞

Win8的生命(ming)力在于內容,好的na)諶菽芄輝in8平台上得到很(hen)棒的呈(cheng)現(xian),但對形式的過分忽視(shi),也會造成(cheng)其(qi)對yue)諶蕕囊yao)求(qiu)更加(jia)苛刻,因為很(hen)難在win8平台上用(yong)不一樣的表達方(fang)式來彌補某些內容本(ben)身的不足。外(wai)對高(gao)質(zhi)量內容的持續要(yao)求(qiu),也可能會造成(cheng)後期的疲軟以及用(yong)戶的審美疲勞。

l??觸控與鍵鼠的mu) 也豢/strong>

Win8十分激進的注重(zhong)觸摸體驗,但又不得不考慮大部分用(yong)戶的設備gai)偶骱褪shi)用(yong)習慣,直接將(jiang)Modern UI界面和Windows界面糅合在一起,造成(cheng)不小的困擾。在設計每(mei)個觸摸體驗的同時,又要(yao)考慮鍵鼠用(yong)戶的操(cao)作,也給設計本(ben)身帶來了很(hen)多困難。

四、???Win8的視(shi)覺(jue)特性(xing)-Metro進化

從WP7開始(shi)的Metro風格引發了鋪(pu)天蓋地的mu)謁 健S腥ren)說這是微軟最(zui)後的掙(zheng)扎,也有人(ren)說這是不能回避的未來樣式。看(kan)起來WP7和Win8好像是iPhone和iPad的區別,但其(qi)實Win8的平板更大程度上代表了所(suo)謂(wei)的Metro風格,哦,應該(gai)叫Modern UI或Windows 8 style。

美狮彩票网官网

美狮彩票网官网

靈(ling)感來源?︰

頁碼: 1 2 下一頁

本(ben)文鏈接︰http://www.mobileui.cn/win8-design-tencent-ms.html
本(ben)文標(biao)簽: , , ,