1、手机页面一般采用什么字体
手机页面一般不用指定,因为不论安卓还是苹果携带的中文字体都比较单一,无非只有Droid Sans Fallback(较老安卓机型)、思源黑体(安卓5.0起)、华文黑体(较老iOS机型)、苹方(iOS 9起)。
除非你要用web-font,这时候就看网页设计师需要或者个人喜好了。但原则上还是应当使用正文字体,宋体、黑体、圆体等。
2、网页设计中一般用什么字体?
用默认的比较多,微软雅黑也不错
3、在用ps设计手机网站界面的时候,应使用多少号的字体适合?
现在非主流的字体都没有字体库可供下载,只有自己做。
方法是:选择一种相近似的字体,输入文字。在“图层”里,选择“栅格化-文字”,然后就可以任意改变笔画的形状,成为独具一格的字体了。不过要有一点美术字的基础,事先要有一个构想,才能做出满意的字体来。这样做出来的字体,只能保持为图像格式(最好做成PSD格式方便以后调用)而不能保存为字体的TT格式。以后要调用,也只能以调用图像的方法来调用。
4、手机网页设计排版需要注意的几个事项
我们对手机网站制作中需要注意哪些方面的问题展开分析,为各位手机网站制作的用户们提供一些参考,现总结几点如下:
1、明确自己想在手机网站上展示哪些信息:
在手机网站制作之前应该明确自己想在手机网站上展示什么,分析一下可能的浏览者会有哪些,然后有针对性地策划和设计网站上的相关内容,这样才能做到有的放矢,不至于手机网站制作好了却没人浏览,或者浏览了不感兴趣。如果能做到有针对性的进行手机网站制作,通常手机网站在推广之后都会为企业带来一定量的潜在用户。
2、在手机网站制作时要尽量符合滑动屏幕的方式:
一般的手机屏幕,画面都不如桌上电脑那么大,尤其是阅读文字时更需要加以放大。即使智能手机具有网页放大缩小功能,但是观看起来也较为麻烦,因为网页放大后,很可能还要左右滑动才能浏览网页,浏览后还要缩小回原大小。因此在设计手机网页时,应能够以滑动屏幕的方式来阅读网页,因为滑动网页操作比着放大网页观看来要简单得多。
3、不能参照PC端网站来设计手机网站上的导航功能:
手机网页与跟一般的PC端网页不同,由于受到手机屏幕大小和屏幕操作的限制,在设计导航功能时应该按照手机屏幕来设计,不能完全照搬PC端网站,该简单的地方简单化,该去掉的去掉,同时在当阅读文章到最后时,要方便于用户回到最前头,减少卷动画面的机会,让网页变得更容易于移动设备上阅读。
4、手机网站制作也要考虑多种浏览器的兼容:
现在的移动浏览器能够处理大多数网站,一般的浏览器都能够正常浏览网页。但由于手机上的浏览器也有多种,比如UC浏览器、360浏览器、搜狗浏览器、其他浏览器,如此多的浏览器在浏览网页的时候,如果手机网站的兼容性差,就很可能会出现在某些浏览器上出现网页变形、内容显示不全的情况。因此,手机网站制作必须考虑到兼容于多种浏览器。
5、在手机网站制作时一定要减少用户文字输入操作:
现在智能手机一般都没有实体的键盘,或仅只有12键的电话输入功能,因此在输入文字上会比起使用电脑键盘麻烦得多。因此,减少使用者输入文字的机会,例如用户名、密码等,都是手机网站制作时要尽力避免的。
6、在手机网站制作时就应该考虑到日后的推广和宣传:
在手机网站制作时,不要忽略了用户体验,否则在日后的网站推广时将会遇到麻烦。任何一个手机网站,都必须经过广策划、设计和推广的过程,在手机网站制作时需要考虑日后的推广,手机网站应该在丰富站内内容的同时,提供详尽的产品信息以及联系方式,并收集有关产品的用户满意度和顾客需求方面的反馈信息。这样的手机网站上线后,其推广工作也会非常有效果。
7、手机网站制作要兼顾非触摸屏幕的设计:
虽然大多数手机都是智能手机,但也有为数不少的传统手机,不具备触摸的功能,使用的是传统的控制方向键做为滑动的工具,这时候,手机网页的制作应兼顾到非触摸屏的手机浏览。比如减少画面中超链接的数量、加大文字以减少误点。
8、在手机网站制作时要记得要简化网页内容:
一般的手机、平板电脑等移动设备,由于屏幕大小的限制,不易容纳下个人电脑的大容量的网页资讯,因此手机网站制作的首要一点就是减少网页内容,最好不用图片或是影音视频等,文字也应该精简,但要保持网页内容的可读性。只需要将最重要的资讯放入移动版网页,不太重要的内容内容,可以略去,或者通过超链接链接到新网页上。
9、手机网站制作要注重网页产品和服务的展示:
企业在手机网站上,需要表现的重点仍然是产品和服务的展示。移动用户访问企业手机网站往往是有备而来,想了解某个产品或者服务的详细价格、服务内容和功能。所以企业在手机网站上的产品和服务展示,可选择企业的主要产品,对其各类参数或价格加以详细说明,对于企业的新产品,也可以适当的加以介绍,必要时可以采用图文并茂的方式,但图片的体积应尽量小。
以上是在手机网站制作中需要注意的几个方面,手机网站页面设计需要符合用户体验,以方便用户操作为准则,能够为用户带来切实的帮助,这是手机网站制作上的基本要求,也是满足用户需求的基本原则。
5、手机 ui设计 字体一般多少像素?有没有扁平化设计的网站?
iOS界面20-40px;使用双数。安卓根据尺寸分辨率不一样,大小也不一样一半12px—36px;
6、手机前端页面尺寸
iPhone4/iPhone4s
320
*
372
/
320
*
441
(已隐藏URL与状态栏)
iPhone5/iPhone5s
320
*
460
/
320
*
529
(已隐藏URL与状态栏)
Note2
360
*
567
(未隐藏URL与状态栏)
iPad
3/4
768*928
(未隐藏URL与状态栏)
GALAXY
SIII
360
*
567
(未隐藏URL与状态栏)
小米2A
360
*567
(未隐藏URL与状态栏)
HTC
G10
320
*
460
<meta
name="viewport"
网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
width
-
viewport的宽度
height
-
viewport的高度
initial-scale
-
初始的缩放比例
minimum-scale
-
允许用户缩放到的最小比例
maximum-scale
-
允许用户缩放到的最大比例
user-scalable
-
用户是否可以手动缩放
参考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
一、网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放。
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
其中:
width
-
viewport的宽度
height
-
viewport的高度
initial-scale
-
初始的缩放比例
minimum-scale
-
允许用户缩放到的最小比例
maximum-scale
-
允许用户缩放到的最大比例
user-scalable
-
用户是否可以手动缩放c
二、关于meta的详细介绍请参考
三、下文是关于Meta的例子的详细介绍
原文地址
3.
Meta元素可视区
默认情况下,iPhone上的Safari会象在大屏幕的
桌面浏览器那样显示你的页面,宽度达到了980像素,然后缩小内容以适应iPhone的小屏幕,因此用户在iPhone看这个页面时感觉字体就比较小了,
也比较模糊,必须要放大才能看得真切,对于一个普通的Web页面似乎可以接受,但对于一个常用的应用程序就没几个人能够受得了。
幸运的是可以使用特殊的Meta元素可视区进行纠正:
<meta
name="viewport"
content="width=device-width"/>
这个元素通知浏览器使用设备的宽度作为可视区的宽度,而不是默认的980像素了,我们可以看看两个不同的例子。
例3(链接:http://www.sitepoint.com/examples/iphone-development-12tips/no-
viewport.html)显示了一个简单的段落元素,没有Meta元素可视区,字体有点模糊。在iPhone中运行的实际情况如下图所示。
图
1
无可视区的显示效果
例4(链接:http://www.sitepoint.com/examples/iphone-development-12tips
/viewport.html)包括了一个可视区元素,现在设备宽度只有320像素,字体也比前一个例子更清晰了。在iPhone中运行的实际情况如下图
所示。
图
2
有可视区的显示效果
另外,你还可以手动设置device-width的值,例如,假设你的博客页面的宽度是750像素,那么桌面屏幕最佳大小就是800x600像素,例
5(链接:http://www.sitepoint.com/examples/iphone-development-12tips
/fixed750.html)显示了一个删减版本,如果你在iPhone中浏览它,你会看到980像素剩下的空间都填充了白色。
为了消除额外的空间,可以使用meta元素可视区将宽度设为780像素:
<meta
name="viewport"
content="width=780"/>
例6(链接:http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)显示了meta元素可视区布局被固定后的效果。
Meta元素可视区的内容可以包括多个逗号分隔的值,如initial-scale
–
用户最初看到页面时的放大级别,对于Web应用程序,一个常见的设置是:
<meta
name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no"/>
这个元素设置宽度为设备的最大宽度,禁止用户放大和缩小
7、制作手机版网页分辨率设多大?一般字的大小是多大的
手机版的分辨率也是72,一般字体在12像素左右