请问手机网站怎样设计？

yolu · 发表于 2012-1-11 15:13:24

公司的网站电脑版的已经设计好了，现在要设计手机版，老板说主要是针对iphone4用户。

我想问一下怎样设置网页的宽度和高度，老板要求宽是480，并没有要求高度。

我是用AXURE设计原型先的，不知道我这样做对不对：

根据iphone4的像素是640*960，那么我设计的页面就是480*720，按比例缩小了，然后在里面放置按钮啊功能啊内容啊什么的。

此外要求不下拉，也就是一屏显示全部页面内容，但是720高度，减去页头尾banner，空间已经没有多少了，感觉有点臃肿，因为某些页面的内容很长，我只好分页显示了，也就是如果允许下拉只要一页就可以全部显示，但是不能下拉要设置3个页面来显示。大家知道，手机不像电脑，不能用动态面板方式去切换几版内容。

请有设计过手机原型的高手们指点一下，当然有看法的朋友们也可以提出，我是菜鸟，谢谢。

哇咔咔 · 发表于 2012-1-11 17:15:18

不下拉是不太可能的事情。。。除非你单一只展示一两张图片

天有星兮 · 发表于 2012-1-11 17:23:58

要看这个网站的功能。比如只是公司的一些信息的展现，那可以用滑屏的功能来做部分的内容展现。这样还会比较炫啊。如果有比较多的交互功能，那就只能舍弃一些信息了。不过要一屏展现真的很难。但是单屏的页面都会比较好看，哈。
另外，你可以用内嵌一个页面来做，iframe的感觉的，也算单屏么。。。。

yolu · 发表于 2012-1-11 17:39:35

3# 天有星兮

这个网站基本上就是介绍公司的一些情况，不过有一些内容是很长的，确是不可能单屏。

不知道你说的滑屏是不是像智能手机那种用手指划代替侧面下拉条，我目前就是这样做的，用动态面板做的，生成页面是没有那条侧边的下拉条的，用鼠标按着拖拽，模仿智能手机。

手机网页不能有多少交互功能吧，又不是电脑。

我给上头看过，上面的意思是完全不用滑动或者下拉，用分页。例如123屏的要分成1-2-3三个单屏页面看，我觉得这样不太好，但是他要坚持这样做。

yolu · 发表于 2012-1-11 17:40:18

2# 哇咔咔

嗯，那你对我的宽度高度设置怎样看？

yolu · 发表于 2012-1-11 17:40:49

3# 天有星兮

你对我目前这样设置高度宽度有什么看法？

洛克艾特 · 发表于 2012-1-11 17:44:57

在axure上建立320*480. 实际像素也是这样。Retina屏幕只是像素密度高，是普通windows像素点的四倍，但不可能你按72dpi的去做。因为网页一般的宽度在960左右，如果纯粹点对点，你什么也看不清。

你们老板的意思是不希望页面上下左右移动吧，那就做翻页效果，整个网站必须重构。把信息打散从新设计。

你用iphone打开 wap.yahoo.com 参考一下。

洛克艾特 · 发表于 2012-1-11 17:56:23

手机网页的交互功能并不多，你的手指就相当于鼠标。所谓的左右画屏整个换页面（调用新的URL）也不行的。
你看的那些是APP，现在HTML5更适合移动设备使用。

高度宽度就是480*320。你拖动字体进axure就是那么大（14号字）比例也是完全一样的，即使你做480寛，如果全屏显示，字体将缩小。

洛克艾特 · 发表于 2012-1-11 17:58:20

你把网站做成想iBooks翻页效果是很炫的。但其实做不到的，还是要加按钮点击的。

yolu · 发表于 2012-1-11 18:08:35

7# 洛克艾特

嗯，我也想用iphone，不过没有，我们也没有真机测试。我在认真看看。。。

yolu · 发表于 2012-1-12 11:43:03

9# 洛克艾特

嗯，你说的对，老板们不希望页面上下左右滑动，他们只想要一屏，如果内容多显示不了就下一页。。

我不是想做成左右划屏换页，应该也做不到，而是设置一个按键按下一页这样看，实际就是再加载一个页面。

yolu · 发表于 2012-1-12 11:49:46

7# 洛克艾特

有些页面的内容一页太短，二页太多，觉得这样弄很别扭，还真不如下拉好，不明白为什么那么排斥下拉。webppd:hypnotized