WIN8設計特(te)性(xing)淺談fu)吞諮xun)微博MS首版設計思路分享
WIN8設計特(te)性(xing)淺談��fu)吞諮��xun)微博MS首版設計思路分享-移動閱讀(du)二維碼

10月,一個(ge)收獲的(de)季節,微軟(ruan)的(de)新luan)淮dai)操作系di)tong)window8悄然而至,同時,我們的(de)微博客戶端團ou)櫻 泊釕狹liao)第一波win8應用的(de)末(mo)班車dan) 杓撇?瞥雋liao)騰訊(xun)微博MS版本。本文將結(jie)合騰訊(xun)微博MS版本的(de)設計過程以yue)ji)對win8系di)tong)特(te)性(xing)的(de)認識,聊聊win8操作的(de)平台(tai)的(de)應用設計。

文章(zhang)很(hen)長,請選擇(ze)有(you)價(jia)值dang)de)部分閱讀(du),或許(xu)你(ni)敢ye)閹du)完(wan)呢(ne)…

本文索引(yin)︰

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

2.?????Win8的(de)系di)tong)特(te)性(xing)

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

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

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

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

一、????Windows8—再構想

?關鍵詞(ci)︰後(hou)PC時代(dai)

《Windows8 guide》開篇第一段即言明︰“如今超過三分之二的(de)PC是移動設備,比如筆(bi)記本、上網本、平板(ban)電腦。幾(ji)fu)趺懇惶tai)PC都有(you)無線連接的(de)能力”。所以,win8的(de)設計更多的(de)考(kao)慮了(liao)移動設備fu)痛?kong)體驗,更加的(de)關注的(de)是用戶和應用關系dan) 皇遣僮饗低(di)tong)本身。雖然保留了(liao)大部分windows7的(de)mu)ˇte)性(xing),但win8系di)tong)旨在創(chuang)造更優的(de)觸控(kong)體驗,建立新的(de)良好(hao)的(de)生態系di)tong)。

如果說隻果完(wan)成(cheng)了(liao)後(hou)pc時代(dai)的(de)mu)︵xing)創(chuang)新,那win8的(de)出現則意味著傳統(tong)PC的(de)全面遷(qian)徙。以ipadiphone為(wei)代(dai)表的(de)無線觸摸(mo)產品的(de)強烈沖擊,讓微軟(ruan)意識到PC戰場其實(shi)也已經徹gou)鬃zhuan)移ping)耍 in8操作系di)tong)就是在這種情形下微軟(ruan)的(de)一次再構想。

二、????Win8的(de)系di)tong)特(te)性(xing)

Win8系di)tong)有(you)很(hen)多不同一般的(de)操作體驗,這里筆(bi)者摘(zhai)取了(liao)一些(xie)更能體現其設計理念的(de)特(te)性(xing)進行(xing)介紹(shao),更多詳盡的(de)特(te)點就不在此贅言了(liao)。

Win as One

在win8系di)tong)中,程序(xu)是以za)τ玫de)形式存在的(de),它有(you)應用市場,用戶可以進行(xing)應用服務的(de)購買,讓人不禁聯想到,這更像IOS、安卓(zhuo)等無線領(ling)域(yu)的(de),但不同在于,win8試(shi)圖通過系di)tong)的(de)平台(tai),將安裝在該(gai)平台(tai)上的(de)所有(you)應用進行(xing)有(you)機的(de)聯系dan) 康diao)應用間的(de)協(xie)同和共享,給用戶帶來完(wan)整、生態化(hua)的(de)體驗,也讓每一個(ge)在此生態系di)tong)內的(de)應用“Win as One”。

1.???Charms(超級按(an)鈕)︰高(gao)于任何(he)應用的(de)系di)tong)整合工具欄

WIN8設計特(te)性(xing)淺談��fu)吞諮��xun)微博MS首版設計思路分享

在任何(he)時候,用戶都可shang) 諂ping)幕(mu)右側邊緣向左滑動或將鼠標懸停至屏(ping)幕(mu)右側,呼(hu)出Charms。Charms是個(ge)樞紐般的(de)系di)tong)工具欄,通過這里,用戶可以快速的(de)進行(xing)xing)閹鰲 窒懟?柚玫炔僮鰲/p>

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

搜索可查(cha)詢的(de)範圍不再僅限于程序(xu)和文件,幾(ji)fu)醣bian)及(ji)操作系di)tong)和互聯網整個(ge)環境中。用戶不僅可以在一個(ge)應用中查(cha)詢關鍵字,而且還可以快速切xie)壞狡淥ta)應用,或者在幾(ji)個(ge)應用直接來回(hui)切xie)凰閹鶻jie)果。簡化(hua)了(liao)用戶操作,無需重新輸入(ru)關鍵詞(ci),就可以直接在新的(de)應用程序(xu)下獲得不同方面的(de)搜索結(jie)果。

3.???共享︰系di)tong)層(ceng)級的(de)整合分享,使應用之間更開放,信(xin)息和內容(rong)傳遞(di)沒有(you)界限

用戶可以在任何(he)時候,把任何(he)內容(rong)直接通過分享,分享至支(zhi)持該(gai)內容(rong)分享的(de)應用中,使信(xin)息得到開放無障(zhang)礙的(de)流動和擴散(san)。

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

 

5.???動態提醒︰he)藪Σ輝冢 眯xin)息處理更加及(ji)時準確(que)

Win8的(de)動態提醒機制主要(yao)通過兩(liang)種方式來ci)shi)現︰動態磁貼和系di)tong)toast。在start界面你(ni)可以設置動態的(de)磁貼以實(shi)時顯示(shi)每個(ge)應用里的(de)最新更新,在任何(he)時候你(ni)的(de)應用都可以通過實(shi)時toast來對za)沒?xing)重要(yao)信(xin)息的(de)提醒或者應用操作的(de)提醒,toast是可以被用戶主動滑走消失的(de),toast中可以直接顯示(shi)新消息的(de)內容(rong)。

前衛lai)拇?kong)體驗

就在最近,當被問及(ji)企業用戶喜(xi)歡Windows 8操作系di)tong)的(de)什(shi)麼特(te)性(xing)時,身為(wei)微軟(ruan)掌舵人的(de)史蒂夫?鮑爾默給出了(liao)非常簡潔(jie)的(de)mu)hui)答︰觸摸(mo)、觸摸(mo)、觸摸(mo)!

Win8非常注重觸控(kong)體驗,排除基本的(de)觸控(kong)操作不說dan)  hen)多關鍵系di)tong)操作都是依靠比較(jiao)高(gao)級手zhi)撇僮鶻xing)的(de),雖然需要(yao)一定的(de)nan)xue)習成(cheng)本,但因為(wei)是用戶不得學(xue)習的(de)操作,而且習慣之後(hou)確(que)實(shi)也會給整體體驗帶來更加流暢、快捷的(de)感受,這一點筆(bi)者本人還是比較(jiao)欣賞(shang)的(de)。另(ling)外(wai)通過這樣的(de)高(gao)級手zhi)粕瓚 in8使gou)糜沒?de)操作僅通過觸摸(mo)屏(ping)幕(mu)就可以完(wan)全掌控(kong),ipad也有(you)類(lei)似的(de)手zhi)撇僮鰨  牆黿鍪親魑wei)輔(fu)助操作存在,相對而言,win8貫(guan)徹gou)母映溝(gou)祝  幣哺恿 └捅憬蕁/p>

1.???語義縮放

Win8的(de)橫向流動界面可以無限延長,加之其內容(rong)為(wei)主的(de)設計思維,在很(hen)多頁面用戶都不得不面對long long的(de)mu)  己窖沽Γ 熱in8的(de)start(開始)界面,在這樣的(de)界面,系di)tong)增加了(liao)一步高(gao)級手zhi)撇僮鰨 沒?賞(shang)  改(gai)蠛希  鼻敖緱嫠跣 wei)純導航視(shi)圖,並進行(xing)快速導航跳轉(zhuan)。此視(shi)圖ji)gen)正常視(shi)圖其實(shi)是兩(liang)個(ge)界面,應用設計者可以根據(ju)自yue)旱de)情況自行(xing)設計該(gai)視(shi)圖的(de)nan)膠筒僮鰲/p>

2.???應用切xie)/strong>

Win8支(zhi)持zhong)嬲de)多進程管(guan)理,而且是沉liang)講僮魈逖椋 栽zen)樣切xie)揮τ茫 質(zhi)且桓ge)難(nan)題。Win8的(de)解(jie)決方案是,用戶可以通過左側的(de)邊緣向右滑動,可以直接切xie)晃wei)上一個(ge)應用程序(xu),整個(ge)過度que)淺A   燜佟/p>

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

Win8的(de)nan)≡ze)操作使用了(liao)向下拉選的(de)高(gao)級手zhi)疲 ≡ze)操作可以在默認界面直接進行(xing),不需要(yao)多一個(ge)編輯態,也不需要(yao)再設置一個(ge)多選框,更加直接,但也需要(yao)學(xue)習成(cheng)本。

4.???關閉程序(xu)

Win8沒有(you)返回(hui)的(de)物理按(an)鍵,提倡沉liang)教逖櫚de)設計理念,也造成(cheng)了(liao)每個(ge)應用都沒有(you)關閉或者退(tui)出按(an)鈕,那麼用戶怎(zen)樣關閉zhao)桓ge)應用呢(ne)?只需要(yao)手指從屏(ping)幕(mu)頂(ding)端下劃至屏(ping)幕(mu)下半區,伴隨流暢的(de)動畫,應用關閉。

5.???多進程管(guan)理

用戶可以在屏(ping)幕(mu)左側向右滑動一小段距離(li)再向回(hui)滑動,呼(hu)出當前進程管(guan)理。

6.???呼(hu)出工具欄

Win8應用中把大部分操作工具,都放在隱藏(cang)的(de)工具欄中,固定的(de)導航也經常放在隱藏(cang)的(de)導航欄中,用戶可以通過屏(ping)幕(mu)上邊緣下滑或者下邊緣上滑,呼(hu)出工具欄fu)偷己嚼浮/p>

對傳統(tong)鼠鍵操作的(de)平衡考(kao)量

Win8系di)tong)不僅僅有(you)主推觸摸(mo)體驗的(de)metro界面,也保留了(liao)Windows之前an)翱誆僮韉de)桌面系di)tong),一方面照顧(gu)到windows用戶的(de)使用習慣,另(ling)一方面也因為(wei)在未來不短的(de)一段時間內,win8的(de)很(hen)大一部分用戶依然會以鼠鍵操作為(wei)主要(yao)使用方式。另(ling)外(wai),在metro界面的(de)所有(you)觸摸(mo)操作,均有(you)相對za)Φde)鼠鍵操作實(shi)現方式。

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

Win8 metro界面沿用了(liao)WP7的(de)視(shi)覺風格,並且在交互上也繼(ji)承(cheng)了(liao)其簡單、快速、內容(rong)為(wei)主等等的(de)特(te)質(zhi),像動態磁貼之于動態磁貼,橫向列(lie)表之于全景視(shi)圖,全局分享和tui)閹髦 UBS…Win8很(hen)多交互形式都是基于WP7的(de)進化(hua)和tou) 埂Kta)們在精(jing)神上是互通的(de),在這里偶(ou)也無恥的(de)鏈一下自yue)喝?甑de)一篇文章(zhang)《WP7交互特(te)性(xing)淺析及(ji)APP設計探究》,有(you)興(xing)趣的(de)可以參考(kao)閱讀(du)哦(ou)。

其實(shi)win8的(de)大部分特(te)色(se)的(de)具體交互形式在上面的(de)系di)tong)特(te)性(xing)中都已經做了(liao)很(hen)多介紹(shao),這里主要(yao)進行(xing)一些(xie)交互設計思維上的(de)總結(jie),並結(jie)合實(shi)例進行(xing)xing)得鰲/p>

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

這是win8設計的(de)核心思維,Chrome在設計時候,提出的(de)理念就是讓用戶更加關注網頁內容(rong),而忽(hu)視(shi)瀏覽器(qi)本身,win8將其拿來主義一番,並進行(xing)了(liao)發揚,內容(rong)為(wei)先,其次是界面。我們會看到jiao)旅嫣岬降de)一些(xie)交互設計方jiao)潁 際且哉庖緩誦乃枷胱鮒傅嫉de)。

舉個(ge)手機的(de)例子(zi)來形容(rong)這一點再貼切不過了(liao)。在iPhone之前很(hen)長一個(ge)時期內,手機的(de)設計最重要(yao)的(de)是硬(ying)件外(wai)觀(guan)設計,奇形怪狀,人們買手機的(de)時候也非常注重外(wai)觀(guan)的(de)美丑,而發展gou)較(jiao)衷冢 懇惶tai)手機只有(you)一個(ge)大屏(ping)幕(mu),人們更加注重的(de)卻ci)瞧ping)幕(mu)里面的(de)東西了(liao),對手機的(de)外(wai)形已經不再那麼關系dan) 庇you)一天(tian),手機漸漸無形了(liao),我想我們也不會那麼奇怪。其實(shi)界面的(de)設計也是這個(ge)道理,一切的(de)形式都是為(wei)了(liao)更好(hao)呈現內容(rong)並讓用戶愉快的(de)去接受而存在的(de)。Win8將這一點作為(wei)其設計的(de)指導思路。

2.?流動的(de)導航,清晰的(de)內容(rong)流向,繼(ji)續(xu)或者回(hui)頭(tou)

以內容(rong)為(wei)主導的(de)交互界面,win8更希望通過內容(rong)的(de)流動去帶動或者吸引(yin)用戶的(de)使用,希望通過用戶的(de)潛意識去引(yin)導用戶。所以它的(de)導航是和內容(rong)在一起的(de),用戶感知的(de)下luan)徊絞僑?蚴shi)麼樣的(de)內容(rong),而不是怎(zen)樣去走下luan)徊健/p>

3.?沉liang)降de)瀏覽與操作體驗,隱藏(cang)式的(de)工具與導航操作

Win8的(de)設計提倡給予用戶沉liang)降de)體驗,在有(you)限的(de)屏(ping)幕(mu)中,將內容(rong)最大化(hua)的(de)呈現給用戶,同時將固定的(de)導航和工具隱藏(cang)在上下邊緣dang)de)工具欄fu)偷己嚼鋼小indows不再是窗口,而是世界。

4.?橫屏(ping)瀏覽帶來的(de)扁平架構

Win8的(de)頁面最大的(de)特(te)色(se)就是流暢的(de)橫屏(ping)瀏覽,基于內容(rong)的(de)導航架構,使win8的(de)導航不在重要(yao),而是直接把可能在其他(ta)平台(tai)需要(yao)二級頁面的(de)呈現的(de)內容(rong),直接呈現出來。另(ling)外(wai),橫屏(ping)空(kong)間的(de)良好(hao)擴展性(xing),也使gou)謎ge)系di)tong)的(de)架構更加扁平並且可用。

5.?橫屏(ping)操作體驗大部分情況下明顯za)龐謔ping)操作

Win8的(de)設備比例,大部分設備使用情景以yue)ji)橫向滑動的(de)系di)tong)操作等原因,造成(cheng)了(liao)win8系di)tong)大部分情況下橫屏(ping)操作的(de)體驗要(yao)由于豎屏(ping)操作。

風險(xian)

這不是微軟(ruan)的(de)軟(ruan)文,所以win8還是有(you)很(hen)多風險(xian)和問題的(de)︰

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

Win8提倡以內容(rong)去引(yin)導用戶的(de)瀏覽,希望通過用戶的(de)潛意識去引(yin)導用戶。但其實(shi)dan) 壞dan)內容(rong)的(de)展現形式處理不夠好(hao),用戶很(hen)容(rong)易(yi)在千篇一律的(de)內容(rong)面前迷失自yue)骸/p>

l??高(gao)昂的(de)nan)xue)習成(cheng)本

各種高(gao)級手zhi)頻de)運用,需要(yao)用戶很(hen)高(gao)的(de)nan)xue)習成(cheng)本,過高(gao)的(de)操作門ou)鰨 諗宸漵縷de)同時,也不得不為(wei)其擔(dan)憂。

l??內容(rong)也會疲勞(lao)

Win8的(de)生命力在于內容(rong),好(hao)的(de)內容(rong)能夠在win8平台(tai)上得到很(hen)棒的(de)呈現,但對形式的(de)過分忽(hu)視(shi),也會造成(cheng)其對內容(rong)的(de)要(yao)求更加苛刻,因為(wei)很(hen)難(nan)在win8平台(tai)上用不一樣的(de)表達方式來彌補某cheng)xie)內容(rong)本身的(de)不足。外(wai)對高(gao)質(zhi)量內容(rong)的(de)持續(xu)要(yao)求,也可能會造成(cheng)後(hou)期的(de)疲軟(ruan)以yue)ji)用戶的(de)審美疲勞(lao)。

l??觸控(kong)與鍵鼠的(de)mu) luan)不堪

Win8十分激進的(de)注重觸摸(mo)體驗,但又不得不考(kao)慮大部分用戶的(de)設備gai)偶(ou)骱褪褂孟骯擼 苯詠odern UI界面和Windows界面糅合在一起,造成(cheng)不小的(de)困擾(rao)。在設計每個(ge)觸摸(mo)體驗的(de)同時,又要(yao)考(kao)慮鍵鼠用戶的(de)操作,也給設計本身帶來了(liao)很(hen)多困難(nan)。

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

從WP7開始的(de)Metro風格引(yin)發了(liao)鋪天(tian)蓋地的(de)口水戰。有(you)人說這是微軟(ruan)最後(hou)的(de)掙扎,也有(you)人說這是不能回(hui)避的(de)未來樣式。看起來WP7和Win8好(hao)像是iPhone和iPad的(de)區別,但其實(shi)Win8的(de)平板(ban)更大程度上代(dai)表了(liao)所謂的(de)Metro風格,哦(ou),應該(gai)叫Modern UI或Windows 8 style。

吉林快3官网

吉林快3官网

靈感來源?︰

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