You can be the best web designer in the industry, but if you do not know how to properly lay things out and create a great interface for mobile devices, you will fail in such a task. With that said, designing for mobile devices is quite different from designing for mainstream devices such as your PC as screen sizes and resolutions play a big part in how much space you can utilize, and how it performs.
Therefore, we cover eight useful interface design techniques for mobile devices that will help you get started on your quest for designing for mobile platforms.
移动设备与PC在屏幕和解决方案的不同导致两者的界面设计存在很多的不同,为此,本文提出了移动设备界面设计方面的8个有用的要点,希望对你在移动设备平台的界面设计有所帮助。
Layout, Layout, Layout 布局、布局、布局
The layout of the design is what sums it up for accessibility, usability, and overall readability for users on mobile devices. First and foremost, the design needs to be flexible across the mobile devices as all screen sizes and resolutions vary greatly between each and every mobile device.
What that means is, the content needs to scale in size as the screen size and resolution increases or decreases depending upon each device. The layout needs to be touch and key capable for users with touch screens, and for users without them. To go into more depth, let us dive into each of these aspects individually.
设计布局归根结底是为了移动设备用户的可访问性、可用性以及整体的可读性。在布局设计中,重中之重的一点就是确保在所有移动设备上(无论其屏幕的大小以及各异的解决方案)的灵活性。
意思就是,内容的规模会根据屏幕大小而定,解决方案也根据移动设备的不同而改变。良好的布局应该适用于触摸屏和非触摸屏。让我们对此进行更详细的分析。
Order and Size 顺序与规模
These are two major keys to a good user interface for mobile devices. When we mention order, this is referring to the order or sequence in which each element within design is laid out. For example, the order of buttons, text boxes, links, etc. This is actually very important for many mobile platforms for the way they react with your design. Therefore, assure the order of the elements within the design or layout are ordered in the way intended for use, and skip out on the fancy ordering techniques you may have for web design on mainstream platforms.
The size of content is also a big deal for many mobile platforms. Make sure the links and buttons are of fair size for those who have touch screen devices as each person’s finger varies in size, a good-sized button will help make it easier for all of your users to navigate about. You need to remember that the small link sizes or button sizes you make for normal website designs for mice and keyboards is a lot different than actually using your finger or a keypad to navigate around, so assure to cope for the differences.
一个优秀的移动设备用户界面设计具备2个主要因素。顺序就是指设计中每个要素(如按钮、text boxes和链接等等)的分布顺序与层次。这点对于许多移动平台上用户与界面交互方式起着相当重要的作用。所以设计或布局中的元素次序的排列必须保证可用性,省略那些传统平台上的花哨的设计。
内容的规模也是许多移动平台的重要因素。比如按钮或链接的大小要与触摸屏用户的手指大小相吻合,不过每个用户的手指大小也是有所不同的。一个大小刚刚好的按钮会让所有用户都能很好地操作。要注意的是,移动设备上为用户手指设计的链接和按钮的大小可与电脑上为鼠标键盘设计的链接和按钮的大小要相差很多。
Hierarchy of Importance 重要性的层次结构
On a mobile device, screen space is a limited resource and thus you need to use it wisely. With that said, you need to eliminate clutter as much as possible, and one way to do this is to set your content in hierarchy format. Set content apart by playing around with the font size, weight, color, and the likes. You want the content to speak for itself rather than describe it before it runs. By doing so, you are eliminating unneeded elements and clutter from the layout and or design and increasing on needed space and using the space for quality content.
移动设备的屏幕大小是有限的,所以要合理地利用。也就是说,你需要尽可能的剔除不必要的东西,有一个办法就是设计好内容的层次结构。可利用字体的大小和颜色等将内容分开。要让内容自身表述自己而不是描述内容,为此在你的布局和设计中要尽量删掉不必要的元素,从而增加可利用的空间,利用这些空间来安置有质量的内容。
Lightweight 轻量级设计
You need to remember that when users are visiting your website from a mobile device, they are visiting the website to view the content, and not the fancy layout you may have put together for non-mobile devices. Therefore, you need to eliminate all the unneeded fancies and stick to a lightweight layout that clearly presents content in an organized fashion.To put it into perspective, imagine yourself in a hurry trying to load a website and run to a meeting.
As the website is loading all sorts of fancies need to load, you need to scroll through a long header, and the likes. When you are in a hurry to obtain information before dashing to a meeting, you do not care for these fancies, you just want the information you were looking for. Similarly, users who visit websites on mobile devices are also after the content, and not the fancies you may surround it by.
需要记住的一点是,用户通过移动设备访问你的网站是,他们是为了查看内容,而不是为了看你那花哨的布局,而且平添些花哨的设计会使得访问更加缓慢。要把用户想象成正赶着去开会的时候上你的网站查看些信息,他们首先关注的内容。所以强调轻量级的设计,提出冗余的设计元素,将内容良好的呈现出来。
Important Content 重要的内容
Your website can consist of a whole genre of goodies; however, before bringing everything to the mobile platform via the web, you need to eliminate some of this content, to make the website load quicker. Therefore, only port over essentials that make up your website and what your users are mainly visiting your website for.
Offer a Simple Navigation
Many mobile devices and platforms do not offer a browser with too many navigational features such as a back button. Therefore it is a good idea to offer these essentials in a simplistic form within your website’s mobile version for easier navigation, but do not over do it as it can slow down the loading time significantly, and effect vital screen space.
你的网站肯定是具有自己的核心内容,不过对于移动设备上的网站来说,需要呈现的就是你自己的核心内容或者是用户访问你的网站时经常查看的内容,不要把你的网站上所有的东西都弄到自己的手机网站上。
Do Not Use Tables 不要使用表格
Do not use tables for your mobile website designs as the main structure for your design. They often do not look or work very well with many mobile platforms. Therefore, the best option to getting your website’s mobile version working and looking well across many mobile platforms is to utilize the basics of CSS to get the design styled.
许多移动平台上往往不显示表格,所以不要将表格作为移动网站设计的主题框架,尽量使用CSS来设计。
Platform Detections 平台监测
One great way to making the most out of your website’s mobile version is to detect different platforms and offer different versions of the website for them. For example, the iPhone platform is very flexible in terms of design capabilities that you can provide versus other platforms.
Therefore, if you want to make the most out of different platforms for your users, detecting their platforms and providing different content and capabilities for them is a great idea. Additionally, this also helps make your fallback mobile website version a lot simpler with less content to assure it can work on older mobile devices or platforms as well.
Overall, you need to understand the mobile devices limitations before being able to create and develop around them. This helps greatly to better understand the mobile platform and how your website’s mobile version may appear across these multiple platforms. You can also test your website’s mobile version or versions using simulators and or emulators sometimes provided by the platform developers.
要想让你的移动版的网站触及更多的用户,最好的办法就是对不同平台进行测试,然后提供各个版本的网站。对自己的用户的平台进行测试,然后根据平台的不同提供不同的内容和功能。总体而言,在移动平台的界面设计上,首先要知道移动设备的局限性,才能更好的围绕其进行巧妙地设计。对不同的移动平台要有一个很好的理解,这样才能让你的移动网站能够适用于不同的移动平台。同样你可以利用平台开发商提供的模拟器来对你的网站进行检测。
http://designreviver.com/tips/8-useful-interface-design-techniques-for-mobile-devices/