在Stockholm的Windows Phone Design Day期間的Q&A環(huán)節(jié)，Stockholm本地的交互設(shè)計(jì)師Petter Sifver提了一個(gè)問題，關(guān)于Windows Phone app bar上的icon，想知道為什么icon的周圍會(huì)有圓圈。Petter友好地在其博客上為分享了他圍繞設(shè)計(jì)闡述的觀點(diǎn)。

我們看到的是Button，而不是icon。——從字面上。在這些Button內(nèi)部都有小icon。微軟提供的開箱即用（out-of-the-box）的Metro設(shè)計(jì)語言有一致性接近“button like”（可意會(huì)的按鈕）控件。不論它是一個(gè)Push Button， Toggle Button， Command Button或者媒體播放Buttons或者icon button——button在Windows Phone的Metro語言里有一個(gè)邊框，來定義邊界。所以icon buttons在app bar是樸素地遵循了同樣的語言——我理解它們可能造成困惑的原因我注意到當(dāng)我們談?wù)搃con時(shí)，我們會(huì)經(jīng)常表述在圓圈里的內(nèi)容并稱它們是icons。當(dāng)我們談?wù)搃con我們會(huì)表述它們像icon（沒有圓圈——即便如此，99%的它們被當(dāng)icon buttons來使用）。

Saliency概念是正確的，而在我們的Metro button設(shè)計(jì)語言中有例外設(shè)計(jì)。

這樣做是在保持一致性。稱呼他們button或icon從字面看起來很接近，但是有著非常大的區(qū)別。我們使用button用來交互，使用icon傳達(dá)一個(gè)單項(xiàng)的信息。例如，在電話應(yīng)用在call history list界面中緊挨著calls使用帶有電話icon的button——它們是button，不是icon。

另外一個(gè)使用icon buttons例子是在文字消息應(yīng)用——當(dāng)你希望增加一個(gè)新的聯(lián)系人并發(fā)送一條文字消息，你得到一個(gè)帶有加號(hào)icon的小按鈕，同樣的，它是一個(gè)按鈕——不只是一個(gè)icon。你會(huì)發(fā)現(xiàn)我們不會(huì)使用icon作為button。它已經(jīng)通過加號(hào)icon吸引了人去使用——我知道我被建議了。回到開始，正確的接近windows Phone的Metro設(shè)計(jì)是使用icon button。

現(xiàn)在我們看一下我們?nèi)绾问褂胕con。例如在狀態(tài)欄中，他們是確確實(shí)實(shí)的通知icon，并且沒有使用圓圈（它們不是按鈕）。

我們使用icon做為圖形，它們提供給用戶單項(xiàng)的信息（它們是不可交互的，因此不是按鈕）。例如在電子郵件應(yīng)用我們使用小icon（不是button）與用戶交流。當(dāng)有附件在一封郵件里，這時(shí)它們會(huì)成為高優(yōu)先級(jí)郵件（標(biāo)記）。

所有這些，我希望明確，我們?cè)赪indows Phone Design Day所談?shì)喌?mdash;—Metro在做兩件事情：Metro設(shè)計(jì)法則與Metro設(shè)計(jì)語言。Metro法則是設(shè)計(jì)支撐。Metro設(shè)計(jì)語言建立在法則之上，是在實(shí)體UI元素、動(dòng)畫、排版、構(gòu)圖與其它交互方向中的證明途徑。

Metro設(shè)計(jì)語言由三件事情所定義：Windows Phone的native應(yīng)用（郵箱應(yīng)用、文字消息應(yīng)用、people hub、本地搜索等等）；第二，Windows Phone UX Guidelines；第三，控件庫與其它Windows Phone SDK & Silverlight Toolkit的可用資源（所有的三項(xiàng)彼此之間會(huì)保持一致性）。開發(fā)人員與設(shè)計(jì)人員可用使用Metro設(shè)計(jì)語言。這會(huì)成功地為Windows Phone建立精巧美觀、引人注目與一致性的體驗(yàn)。

Metro法則是優(yōu)先的，它凌駕于任何語言，所以設(shè)計(jì)人員可用自由的探索法則，并且通過非主流的方式被你所證明。我們也樂意看到這些事情發(fā)生。Metro原則允許無限的探索與進(jìn)化。這里我們給一些思路…從Swiss Design Style的課程中讀一些文章。這描述了許多Swiss設(shè)計(jì)背后的理念（Metro的根源在它，也可以稱為International Typographic Style）——閱讀其中的海報(bào)與印刷媒體設(shè)計(jì)。然而，許多這些海報(bào)與設(shè)計(jì)與Metro設(shè)計(jì)語言并不相像，但是這不意味著做為一個(gè)設(shè)計(jì)人員不能探索其它的表達(dá)法則的途徑。

本文編譯自@langmuir，原文地址。

譯文出處：mdong.org，轉(zhuǎn)載請(qǐng)注明出處鏈接。

標(biāo)簽： Windows-Phone metro 交互設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。