設計及建立的 Web app

  • 版本網址代稱: 應用程式-840092-dup/Design
  • 版本標題: 設計及建立的 Web app
  • 版本 ID: 364391
  • 建立日期:
  • 建立者: naihsi
  • Is current revision?
  • 回應

版本內容

這些文獻和導引提供了一些資訊,在設計您的 app 及建立使用者介面時相當有幫助。

App 設計

設計方針
幫助您創造具吸引力及易於使用的 app 的建議及導引。
易於反應的設計
您的 app 應該要能依照各個裝置特徵、具備調節到不同螢幕大小的能力。這份導引會幫助您學會怎麼做到這件事情。
您的 app 的 "簡短說明"

如果只有搭電梯的時間,您要怎麼描述您的 app 給某個人聽呢?那就是您的 app 的elevator pitch、這是一個寫給使用您 app 的使用者的簡明摘要以及為什麼對使用者而言,您的 app 是派的上用場的。

排版及結構

Media queries
Media query 是朝向自適應設計 (responsive design)的一個關鍵的技術;它讓您的 CSS 設計可以依照使用者的裝置能力自行調適。
Media queries in JavaScript - window.matchMedia
DOM 提供了一些功能,支援用程式進行 media query 的測試。這個功能可以藉由 MediaQueryList 的 methods 和 properties來達成。
Flexible boxes
CSS flexible boxes 讓您的 app 的使用者介面可以依照顯示畫面的大小和擺放方式 (orientation)來自動調整元件 (element)的位置和大小。
Custom elements
一份 custom x-tag 元件的導引、幫助您建立一致的使用者介面。

繪圖及動畫

CSS 轉換 (CSS transforms)
CSS 轉換讓您旋轉、縮小及放大 HTML 內容,在不依賴 JavaScript的前提下、使用所有可用的硬體加速。
CSS transitions
CSS transitions let you animate changes to your CSS. Once a transition effect is configured, changes to your CSS occur over a period of time instead of instantaneously. This makes it possible to easily and efficiently create a wide variety of visual effects in your apps.
CSS animations
CSS animations let you animate changes to your document on a more fundamental level, using keyframes to precisely configure the animation effect. This also lets you create looping animation effects rather than effects that happen just once, as is the case with transitions, all without relying on JavaScript.
HTML canvas
The HTML {{HTMLElement("canvas")}} element provides a 2D graphics workspace for you to draw in. This is extremely useful for many purposes, including 2D games.
WebGL
WebGL is a Web-friendly version of OpenGL ES, which lets your app offer hardware accelerated 3D graphics.
SVG
Scalable Vector Graphics (SVG) is a technology that lets you draw graphics using vectors instead of bitmapped images. This is great for scalability, presenting diagrams and charts, and for high-quality, scalable user interfaces.

View All...

{{AppsLandingRightSide()}}

 

版本來源

<p>這些文獻和導引提供了一些資訊,在設計您的 app 及建立使用者介面時相當有幫助。</p>
<div class="row topicpage-table">
  <div class="section">
    <h2 class="Documentation" id="Layout" name="Layout">App 設計</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Apps/Design/Guidelines">設計方針</a></dt>
      <dd>
        幫助您創造具吸引力及易於使用的 app 的建議及導引。</dd>
      <dt>
        <a href="/en-US/docs/Web_Development/Mobile/Responsive_design">易於反應的設計</a></dt>
      <dd>
        您的 app 應該要能依照各個裝置特徵、具備調節到不同螢幕大小的能力。這份導引會幫助您學會怎麼做到這件事情。</dd>
      <dt>
        <a href="/en-US/docs/Apps/Design/Guidelines/Your_apps_elevator_pitch">您的 app 的 "簡短說明"</a></dt>
      <dd>
        <p>如果只有搭電梯的時間,您要怎麼描述您的 app 給某個人聽呢?那就是您的 app 的<a class="external" href="http://en.wikipedia.org/wiki/Elevator_pitch">elevator pitch</a>、這是一個寫給使用您 app 的使用者的簡明摘要以及為什麼對使用者而言,您的 app 是派的上用場的。</p>
      </dd>
    </dl>
    <h2 class="Documentation" id="Layout" name="Layout">排版及結構</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/CSS/Media_queries">Media queries</a></dt>
      <dd>
        Media query 是朝向自適應設計 (responsive design)的一個關鍵的技術;它讓您的 CSS 設計可以依照使用者的裝置能力自行調適。</dd>
      <dt>
        <a href="/en-US/docs/DOM/Using_media_queries_from_code">Media queries in JavaScript - window.matchMedia</a></dt>
      <dd>
        DOM 提供了一些功能,支援用程式進行 media query 的測試。這個功能可以藉由 <a href="/en-US/docs/DOM/MediaQueryList"><code>MediaQueryList</code></a> 的 methods 和 properties來達成。</dd>
      <dt>
        <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes">Flexible boxes</a></dt>
      <dd>
        CSS flexible boxes 讓您的 app 的使用者介面可以依照顯示畫面的大小和擺放方式 (orientation)來自動調整元件 (element)的位置和大小。</dd>
      <dt>
        <a href="/en-US/docs/Apps/Design/Custom_elements">Custom elements</a></dt>
      <dd>
        一份 custom x-tag 元件的導引、幫助您建立一致的使用者介面。</dd>
    </dl>
    <h2 class="Documentation" id="Drawing" name="Drawing">繪圖及動畫</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms">CSS 轉換 (CSS transforms</a>)</dt>
      <dd>
        CSS 轉換讓您旋轉、縮小及放大 HTML 內容,在不依賴 JavaScript的前提下、使用所有可用的硬體加速。</dd>
      <dt>
        <a href="/en-US/docs/CSS/CSS_transitions">CSS transitions</a></dt>
      <dd>
        CSS transitions let you animate changes to your CSS. Once a transition effect is configured, changes to your CSS occur over a period of time instead of instantaneously. This makes it possible to easily and efficiently create a wide variety of visual effects in your apps.</dd>
      <dt>
        <a href="/en-US/docs/CSS/CSS_animations">CSS animations</a></dt>
      <dd>
        CSS animations let you animate changes to your document on a more fundamental level, using keyframes to precisely configure the animation effect. This also lets you create looping animation effects rather than effects that happen just once, as is the case with transitions, all without relying on JavaScript.</dd>
      <dt>
        <a href="/en-US/docs/HTML/Canvas/Tutorial">HTML canvas</a></dt>
      <dd>
        The HTML {{HTMLElement("canvas")}} element provides a 2D graphics workspace for you to draw in. This is extremely useful for many purposes, including 2D games.</dd>
      <dt>
        <a href="/en-US/docs/WebGL">WebGL</a></dt>
      <dd>
        WebGL is a Web-friendly version of OpenGL ES, which lets your app offer hardware accelerated 3D graphics.</dd>
      <dt>
        <a href="/en-US/docs/SVG">SVG</a></dt>
      <dd>
        Scalable Vector Graphics (SVG) is a technology that lets you draw graphics using vectors instead of bitmapped images. This is great for scalability, presenting diagrams and charts, and for high-quality, scalable user interfaces.</dd>
    </dl>
    <p><span class="alllinks"><a href="/en-US/docs/tag/Apps">View All...</a></span></p>
  </div>
  <div class="section">
    <p>{{AppsLandingRightSide()}}</p>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision