We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

這些文獻和導引提供了一些資訊,在設計您的 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 <canvas> element provides a 2D graphics workspace for you to draw in. This is extremely useful for many purposes, including 2D games.
WebGL is a Web-friendly version of OpenGL ES, which lets your app offer hardware accelerated 3D graphics.
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...

Tools for app developers
Technology reference documentation
Getting help from the community

If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

Don't forget about the netiquette...



 此頁面的貢獻者: teoli, naihsi
 最近更新: teoli,