本文章是由機器翻譯。

現代化應用程式

利用動態磚建置更好的 UX

Rachel Appel

Rachel Appel現場磚就是有效的方式來介紹您的應用程式。您可以顯示資訊關於您的應用程式而無需使用者輸入的應用程式本身。作為 Windows 平臺的使用者體驗功能的一部分,現場磚應誘人,並邀請,充滿了有關 click-worthy 的內容。

現場磚就是你的機會,使一個偉大的第一印象。使用者不關心的代碼或任何技術細節。他所關心的就是他會使用您的應用程式的經驗。它便於使用?它是直覺嗎?這些都給使用者什麼是引擎蓋下比任何時候都更重要。

現場磚就是入口到您的應用程式,該使用者講述您的應用程式可用性的第一印象。使用您的應用程式的所有人將看到和使用該應用程式的任何其他部分之前你活的瓷磚。它是否將啟動應用程式或只是點心花絮你在他們中顯示的資料都沒關係。活的瓷磚是如何你可以那至關重要的第一印象。

這意味著你有更好地確保你的瓷磚和初始螢幕是誘人和有吸引力。這並不是說你可以忽略其餘的應用程式,但你永遠不會到這一點得到使用者沒有用一些好看的瓦片前導。正如你可能想像的你可以活瓷磚與新鮮資訊定期更新,通過推送通知。甚至可以通過添加徽章,以顯示與應用程式相關的資訊擴展到鎖定螢幕的通知。

圖 1 說明了四種風格的活瓷磚上 Windows 平板電腦和臺式電腦可用:大、 廣泛、 中等、 小型。在圖像圖 1 顯示如何天氣頻道,利用一個乾淨的設計時瓷磚不能顯示資訊。他們時,你看到豐富的圖形和拼貼顯示只有最重要的資訊。在這種情況下,它是當前天氣和任何嚴重的風暴警告。

現場磚的四個大小 — — 大、 大、 中、 小型
圖 1 現場磚的四個大小 — — 大、 大、 中、 小型

更好的使用者體驗將會導致更好的評級,在商店和更好的使用者滿意度。現場磚與你的品牌就是最好的方法,以將您的應用程式與其他人區分開來。圖 1 演示如何拼貼可以是偉大的經歷的一部分。使用者不需要打開應用程式來查看當前的天氣。在大主拼貼,他們可以設置最多三個城市來跟蹤天氣,然後跟蹤一個城市一次,對其他人。那擠一些嚴重的資料只是 310 x 310 圖元或更小的公平競爭。

平鋪圖形如何安居樂業

現在,我已經解釋過為什麼活瓷磚很重要,它是時間去瞭解圖形與他們的工作。幸運的是,微軟幹創建易於遵循開發者友好使用者體驗范式具有一整套的設計原則以及在平板電腦、 手機和小,觸摸先設備上工作很好。您可以將發佈的應用程式看起來很好,不用再雇一名設計師。這並不是說你應該完全避開設計師。一些應用程式,尤其是遊戲,需要一個設計師的輸入的圖形變得複雜。

這篇文章將涵蓋非設計開發人員可以輕鬆地完成一些活瓦設計。作為這套原則的一部分,live 面板使使用者能夠使用從您的應用程式的資料而不實際上與您的應用程式進行交互。這是設備的方便的高度,因為使用者可以快速地掃描他,在 flash 中的多個來源獲取相關資訊的主頁螢幕。

圖形在現代的應用程式中的兩個種類:使用者生成和應用程式的圖形。家庭度假或專業照片視為使用者生成。應用程式的圖形可在現場磚內或在應用程式欄上的圖像。當構建圖塊,可以使用任一種來傳達資訊。Visual Studio包括遵循微軟的現代設計,將説明您實現專業的演示文稿的範本。這意味著你需要的一切準備好了在 package.appxmanifest 檔中。你需要做的就是提供自己的正確大小的圖形。

它是必須具有適當的品牌還沒有活的瓷磚。正如你可以看到在圖 2,磚瓦天 (QotD) 報價有一個簡單的設計與報價氣球和首字母縮寫。它很容易找到,並確定哪些應用程式,這是以其簡潔的設計和顏色鮮紅。現在,他們是標準的靜態的瓷磚。當你開始發送更新,這會改變。

現場磚天 App 的報價
圖 2 現場磚天 App 的報價

使用 Windows 應用商店應用程式或 Windows Phone 存儲應用程式中的圖形需要下列資產有幾個圖像:

  • 活的圖塊:或大或小的正方形或長方形使用者水龍頭或點擊啟動應用程式。這些經常包含圖像或文本。
  • 徽章:小圖示或標誌符號,表示應用程式狀態的活瓦上。圖 1 顯示大型和小型瓷磚中的一枚徽章。
  • 閃屏:只是在應用程式載入之前顯示的介紹螢幕。通常情況下,此螢幕包含徽標或圖形。
  • 在應用程式圖塊:這些瓷磚顯示應用程式的資料,生活在一個 GridView 或清單視圖。它們外觀和感覺像 Windows 啟動頁上現場磚。

這些圖像工作最好使用的.png 和.jpg 格式。每個 Windows 應用商店應用程式和 Windows Phone 商店應用程式可以包含許多不同大小的這些圖像資產。您可以配置哪些圖像屬於哪個瓦片通過編輯專案的套裝程式清單。套裝程式清單是一個檔,在這裡您可以設置所有應用程式特定的設置,如名稱、 版本號,圖形的資產和能力的聲明。圖 3 顯示徽標在 Windows 應用商店應用程式在 package.appxmanifest 中定義。

配置平鋪圖形應用程式的 Package.appxmanifest File 中
圖 3 配置平鋪圖形應用程式的 Package.appxmanifest File 中

您應該為每個以下的資產類型,提供至少一個圖形或應用程式將顯示其預設圖示代替:

  • 方形的 70 × 70 徽標:一個 70 × 70 圖元的圖像
  • 150 x 150 平方米的徽標:一個 150 x 150 圖元的圖像
  • 寬 350 x 150 徽標:一個 350 x 150 圖元的圖像
  • 310 x 310 平方米的徽標:310 x 310 圖元的圖像
  • 30 × 30 平方米的徽標:一個 30 × 30 圖元的圖像

你可以 — — 並且應該 — — 這些瓷磚類供縮放的圖形。中的專案的規模的資產圖 3 處於 80%、 100%、 140%和 180%。底部的圖 3 列出的縮放後的資產所需的精確尺寸。請注意,這些都只是為 Windows 應用商店應用程式。Windows Phone 商店 app 專案有資產和工作對於較小的裝置類型的鱗片組略有不同。Windows 應用商店和 Windows Phone 存儲的應用程式具有如下徽標和飛濺螢幕配置:

  • 存儲徽標:顯示在商店的標誌。
  • 徽標:可以在鎖屏上或位於現有瓷磚內顯示的小圖示。
  • 閃屏:以全螢幕頁面通常包含徽標或介紹性文本顯示在應用程式啟動。

由於需要擴展他們到正確上各種各樣的螢幕配置大小從桌面到手機到平板電腦和其他人有很多版本的這些圖像。一個 150 x 150 圖元的圖像不需要伸展太遠才會開始看像素化和模糊。

您可以創建使用任何的照片或圖形編輯程式的瓷磚的圖形。使用這些工具,很難不創建一個標誌像圖 2 ,這是簡單但明顯。有很多股票圖形也可在應用程式中使用。

範本代碼的瓷磚

瓷磚會多一點,比普通的圖示,如果不是因為他們在不同的時間顯示不同的圖像和文本的能力。它是這些週期性更新,使他們活著。你可以用代碼更新瓷磚或將它們集成使用推式通知。如果您使用推送,您可以更新使用融入流程生命週期中的背景工作的瓷磚。您的應用程式不需要運行的這種方式本身,然而一些代碼可以運行在預定的時間間隔,以在五個不同的專案間迴圈。在流程生命週期管理的背景資訊,請參閱"Windows 商店應用程式生命週期"在 msdn.microsoft.com/magazine/jj660301

中的代碼圖 4 執行一個簡單的瓷磚更新,生成在瓷磚圖 5,沒有推式通知。它首先從調用 TileUpdateManager 類靜態 CreateTileUpdaterForApplication 獲得一個 TileUpdater 物件。一旦這樣做了,該代碼移動到 TileManager 類的 GetTemplateContent 方法通過在 TileTemplateType 枚舉選項之一獲取一個預定義的圖塊範本。

圖 4 簡單瓷磚更新沒有推式通知

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
var square150x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileSquare150x150Text04);
square150x150.GetElementsByTagName("text")[0].InnerText =
  "Only in the darkness can you see the stars. –Dr. Martin Luther King, Jr.";
updater.Update(new TileNotification(square150x150));
var wide310x150 =
  TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileWide310x150SmallImageAndText03);
wide310x150.GetElementsByTagName("text")[0].InnerText =
  "We live in a society exquisitely dependent on science and
  technology, in which hardly anyone knows anything about
  science and technology. - Carl Sagan";
((XmlElement)wide310x150.GetElementsByTagName("image")[0]).SetAttribute("src",
  "ms-appx:///Assets/qotd310x150-sm.png");
updater.Update(new TileNotification(wide310x150));
var large310x310 =
  TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare310x310TextList02);
large310x310.GetElementsByTagName("text")[0].InnerText =
  "Let us pick up our books and our pens, they are the most powerful
  weapons. -Malala Yousafzai";
large310x310.GetElementsByTagName("text")[1].InnerText =
  "Never give up, for that is just the place and time that the tide will turn.
  -Harriet Beecher Stowe";
large310x310.GetElementsByTagName("text")[2].InnerText =
  "I've learned that people will forget what you said, people
  will forget what you did, but people will never forget
  how you made them feel. -Maya Angelou";
updater.Update(new TileNotification(large310x310));

幾個可以使用的拼貼大小
圖 5 幾個可以使用的拼貼大小

訪問 innerText 屬性或調用組­屬性允許工作與該圖塊的代碼。這是因為 HTML 範本是所描述的平鋪的看起來和感覺。幸運的是,XAML 開發人員不需要學習大量的 html 代碼,只是為了讓一張牌。它確實看起來像 HTML,畢竟。然而,你應該知道關於像在這裡定義的 TileSquare150x150Text04 範本的 HTML 元素。

<tile>
  <visual version="2">
    <binding template="TileSquare150x150Text04" >
      <image id="1" src=""/>
      <text id="1"></text>
    </binding>
  </visual>
</tile>

您不能只是掀起任何舊的維度,任何舊瓷磚和你自己不寫 HTML 範本。相反,有幾個範本,您可從中選擇,讓您編輯基本平鋪形狀、 圖示和消息。還有的 Windows 8.1 和 Windows Phone 8.1 和代碼樣本,這些範本清單 bit.ly/1oqwQd6

選擇從清單中的範本之一,在您的代碼中使用它。在圖 4,對 GetTemplateContent 的調用是什麼獲取此預定義的範本。你可以從任何可用的許多範本選擇。

直到此時,代碼示例處理只需更新瓷磚一次,在現場,通過執行一些代碼。如果您想要添加一些額外的瀟灑,用新鮮的資訊更新瓷磚在週期性基礎上。你可以通過添加背景工作執行此操作,將筆記推送到您的應用程式。因為這篇文章的重點是使用者體驗相關的更多,你可能想要查看視頻的 bit.ly/1vH6J2p 若要瞭解如何更新瓷磚從背景工作。

使用輔助磁貼為一流的使用者體驗的

使用者偶爾想要銷部分資料到開始螢幕。航空公司的登機證、 一本電子書或特定的股票符號是所有的好例子,使用者想要寄給他們的螢幕上的東西。方式做到這一點在 Windows 8.1 或 Windows Phone 8.1 是輔助磁貼。輔助磁貼方便使用者定制自己的應用程式,這將轉換成更高的評級,存儲區中。

有是一個概念的深層連結在應用程式的世界。這意味著使用者在一個應用程式內導航幾次,然後銷它以後連結到它。這裡有幾個用於輔助圖示:

  • 一個特定的城市的天氣
  • 具體的旅行的旅行路線
  • 保存的遊戲
  • 具體的電影開始或恢復
  • 一位朋友的聯繫資訊
  • 你最喜愛的圖片
  • 自訂的警報

請牢記這些瓷磚都是次要的因為你已經有了初級的活瓷磚。應用程式範圍的更新應該放在首要的瓷磚,儘管並沒有任何硬性的規則。為輔助磁貼列出的特定資料類型通常不會在主營瓷磚道理。使用者通常啟動一個應用程式,然後去其起始頁。中學瓷磚的讓使用者啟動一個應用程式並直接轉到該應用程式的特定部分。這一詞是"深層連結"。作為一個經驗法則,使用主瓷磚啟動到應用程式的啟動畫面和輔助磁貼特定資料的詳細資訊。

下面的代碼創建並顯示輔助磁貼:

private void AppBarButton_Click(object sender, RoutedEventArgs e)
{
  string displayName = "Secondary tile";          
  string tileActivationArguments = "Look both ways before crossing the street";
  System.Uri square150x150Logo = 
    new System.Uri("ms-appx:///Assets/Logo.scale-100.png");
  SecondaryTile secondaryTile = new SecondaryTile("Pinned",
    displayName,
    tileActivationArguments,
    square150x150Logo,
    TileSize.Square150x150);
}

調用 SecondaryTile 的建構函式,您需要填充該圖塊的所有資訊傳遞時如名稱、 參數,大小和的形象來使用。在調用中,你需要的一切就在那裡,建構函式重載函數,所以你有很多選擇。

次要的瓷磚都是類似于標準的瓷磚,但他們允許的深層連結到內容或應用程式的特定部分。更方便使用者使用你使兩套瓷磚,好你的評論在店裡。因此考慮使用輔助磁貼,如果您的應用程式中包含特定的資料是有用的若要查看從 Windows 起始頁。

一個正方形的結論

當使用者不需要做任何事來與您的應用程式進行交互,並尚未接收到有用的資訊時,這是一場勝利。App store 中的評級將反映這一點。即使開發人員並不是大進平面設計仍然可以創建好看、 有用的應用程式。

記得要創造盡可能多的縮放大小,盡可能的圖形,Windows 將提供最好的顯卡,具體由該設備。好使用者體驗越好評級在應用程式中存儲。這翻譯直接向更多下載。


Rachel Appel 是 20 多年的經驗,在 IT 行業顧問、 作者、 導師和前微軟員工。她說話在一流的行業會議,如Visual Studio活 !,DevConnections,混合和更多。她的專長在於內開發對齊業務和技術集中在微軟開發堆疊上,打開 Web 的解決方案。阿佩爾的更多資訊,請訪問她的網址 rachelappel.com

感謝以下的微軟技術專家對本文的審閱:FrankLa 墓葬