淘宝商品详情页不同客户端,字体如何选择?

淘宝宝贝详情页主要是图片和文字的结合,图片文字都不能忽略其中的重要性。图片不够美观,再好的文字也吸引不来点击。如果文字不够吸引人、字体大小不合适,自然也就无法给客户整体很好的效果。为了用字不侵权、整体页面协调,接下来小编就来详细说说宝贝详情页用多大字体合适。

  一、宝贝详情页PC端和移动端字体

  1、宝贝详情页PC端

  PC端有一个比较明显的优势,就是屏幕大,更多的是横屏。制作宝贝详情页时字体分为正文、副文、提示文案,字体选不对给客户传输信息就会出现大大折扣。PC端既然屏幕购买,就要尽量的减少店铺客户滑动次数,所以一个页面尽可能描述一个卖点。

  2、宝贝详情页移动端

  手机看宝贝详情页基本是竖屏,习惯的浏览是从上往下看。而且鉴于手机屏幕较小,宝贝详情页的字体不能太小,裁剪不能过长,要懂得切割。宝贝详情页移动端的字体不能太大或太小,大标题建议24-30px、小标题建议16-18px、正文字体建议12-14px。

  二、宝贝详情页用什么字体

  现在很多字体是有版权限制的,如果没有获得相应的版权,那么招来的就是被投诉、罚款。所以详情页选择字体首先要选择授权字体,然后根据淘宝产品不同的客群选择不同 的字体。比如说客群为男性,那么就选择比较男性化的字体,比如说粗犷、坚硬、有力、菱角分明等字体。如果萌系产品,那么字体选用萌萌哒字体就好。

好啦,今天淘宝运营干货知识的内容就和大家分享到这里。 希望鑫伟程小编能帮助各位中小卖家把淘宝做好,如果你对淘宝的运营还有疑问,欢迎关注鑫伟程了解,私信留言鑫伟程小编为你 解答

UI图标设计原则!你造吗?

文/张振中 图标是图形化用户界面设计中的重要元素之一,也是图形化用户界面设计中最直接、最生动的视觉形态,有着优秀图形化用户界设计、形象明确、造型突出的图标,能够迅速地被用户所理解和接受,从而使软件或程序的使用效率提高,最终带给用户很好的使用体验。

图形化用户界面图标设计的原则,主要有以下几个,即图形化用户界面图标的统一性原则;图标的用户认知性与民族性原则;图标的简洁性和符号性原则;图标的尺寸性原则和图标的文字应用原则。

统一性原则

一个软件或程序的系统中,图标的设计风格需要保持统一。因为统一的图标比单一零散的图标更具品质,更容易让用户理解和接受。图标的造型设计,可以使用轻松诙谐的绘画风格,也可以使用简洁明快的平面剪影效果或酷炫时尚的3D效果。

①图标的透视效果表现,是图标造型中的重要因素。如果某一图标元素的造型设计成平行透视的表现效果,那么其他的图标,也要按照平行透视效果来进行设计。而如果图标元素视觉效果是成某一个特点角度,即成角透视效果,那么其他所有的图标,都要按照这个特定角度进行设计。

②图标的光影效果表现,也能很好地体现图标的统一性。图标的光影效果,如果不是从同一光源角度射入,那么可能会导致整个图标系统视觉混乱。使用统一的光源效果,不仅可以使图标整体效果统一,而且也会让使用者觉得图标的设计比较专业。

③图标的色彩风格,也需要和图标造型风格相统一。特别是在色彩的选择和搭配上,尽量考虑色彩三属性的协调,色相、明度或纯度3项中至少有1项是相互统一协调的。同时,颜色选用也不宜过多,因为过多的颜色在一个很小的区域里出现,会让人产生杂乱的感觉,影响到最终视觉效果。

用户认知性与识别性原则

图标设计的目的,是通过符号化的图形传达信息。因此,图标的用户认知性与识别性原则,在图标设计中就显得尤其重要。图标,是建立在虚拟世界和真实世界的一种隐喻或映射关系的桥梁。隐喻旨在“以一种更为明显,更为熟悉的观念符号来表示某种观念”,观念之间存在着类似性。

在图标设计中,隐喻是一个相当重要的表现手法。通过归纳和联想,使图标的图案造型与图标的使用功能,可以建立起最为直接的联想。但是,这种直接的联想关系,取决于图标使用用户的认知水平和认知习惯。相较之下,具有隐喻表现手法的界面图标设计,可以化繁为简,将抽象事物的内涵明确化,让使用者更容易理解和认知,因此显著地提高了图标在人机交互间的有效性和准确性。

简洁性与符号性原则

视觉图案的写实程度,与受众对视觉图案的关注度,是成正比的。即越写实的图案,越容易引起受众的关注。因此,设计师在进行图标设计时,其设计的图标的视觉表现越是逼真,越是可以引起用户更多的注意,也可激发更多用户的使用兴趣。但是,形象写实逼真的图标设计,却也从另一个方面影响了图标信息的快速传达。

因为图形在传递信息时,其简约程度,与受众的识别认知度,也是成正比的。即越是简洁的图案,越容易让人识别和记忆,也越是能高效地传达信息。而极度写实或加入过多装饰效果的图标,其信息传达的快捷度,也是大打折扣的。

象征性的符号,在图标设计中也是常见的。符号图标能够更快地被用户所接受、记忆和识别。同时,符号图标所使用的图形文件小,便于硬件的支持和运算效率的提高。因此,在图标设计时,尽量不要使用过于复杂的图案。过多的图形和装饰效果,会降低图形的认知度,特别是在小尺寸图标中,由于图标尺寸偏小,导致视觉上的识别度降低。

同时,也需要避免过多的元素在同一图标中出现。如果必须在图标中加入过多元素的话,那么就要尽量在图标设计时保持强烈的符号品质,让主体图案以符号化的形式出现。在图标中,应谨慎地设置图标的图形元素,因为不可能所有的图标,都有使用简约的黑白剪影效果。

尺寸性原则

由于图形化用户界面的使用环境不同,导致图形用户界面在使用中的显示环境不同。因此,图形化用户界面的图标尺寸,也出现了不同。同时,随着显示技术的不断发展,图标对应的显示尺寸越来越大,分辨率越来越高,这使得图标的细节,也不断地在进行改进中。并且跨平台软件的图标大小或像素的数量,通常按照特定的技术规范进行设计 。一般的图标标准尺寸有4种,分别为像素、24×24 像素、32×32像素和48×48像素。

图标设计,不同于其他的视觉设计。同一图标,由于其尺寸不同,展示效果和制作细节也不尽相同。因此,在不同显示系统下的图标,在图标设计时,都有其对应的图标效果。

文字应用原则

在图标设计中,除了图形设计之外,还有一个重要的组成部分就是文字。简洁明快的文字标签和清晰准确的文字说明,能更好地提高图形化用户界面的工作效率 。在设置图标文字时,最好使用简单通俗的文字作为图标的说明文字。在图标文字的选择上,需要具备高度的概括性。同时,图标文字又需要有高度的信息传达性,能够充分体现其是对图标图案的一种解释和说明。

在图标文字的设计中,需要对文字属性和文字使用环境进行考虑。而文字的字体、尺寸和色彩等方面,也会对图标的整体视觉和运行效果产生影响。在文字字体的选择上,考虑图标字体的形态不宜复杂。文字的识别度差异,在通常情况下,中文字体应不小于14px,英文字体应不小于 12px。另外,应该尽量使用均匀的间距,使文字更为整齐清晰,易于辨体识。

图标中的文字使用,是对图标图案的说明,能够让用户高效、快速地读懂图标所需要传达的全部信息。图标文字的设计,涉及到图标文字内容的选择、字体选取、字形安排以及文字的色彩的选用等多个方面,是综合应用的结果,也体现了图标文字应用在图形化界面中的重要性。

图形化用户界面的图标设计,是一个高度系统化的工程。推荐阅读:APP!图标设计的原型理论

① 官方头条号:设计智造 顶级创意设计师必备

② 本篇为 设计智造www.cocoo.top 编辑整理,版权归原作者所有,转载请注明出处!

相关问答

字体14px多大?

字体14px是五号字字体14px是五号字

14px相当于几号字?

24px=小二=18磅;18px=四号=14磅;14px=五号=10.5磅字号:是中文字库中特有的一种单位,以中文代号表示特定的磅值pt,便于记忆、表述。比如一号,二号,小四...答...

淘宝导航栏字体大小一般是几号?

淘宝导航栏的字体大小一般在14px-18px区间,最大不超过18px。需要注意的是,虽然有硬性规定的最大值,但具体的字号并没有硬性规定,而是根据实际情况可以酌情考...

3.14rem等于多少px?

1rem等于根据浏览器默认字体大小而定,通常为16px。所以,3.14rem等于3.14*16px,约等于50.24px。rem是相对单位,根据根元素的字体大小而定,它可以让设计更具...

14pt字体大小是什么意思啊?-71KiQw78的回答-懂得

PT就是一个单位(point),14PT意思就是14个点,不过应该不叫点吧,应该叫磅,所占的大小,一磅的大小差不多就是1/72英寸他是一个绝对的单位,放在哪里而PX...

15px是几号字体?

15px是小三号字体。字号对应的px大小如下:八号字:5px。七号字:5.5px。小六:6.5px。六号:7.5px。小五:9px。五号:10.5px。小四:12px。...

4号字体对应多少px?

小四号字对应为12px。wold调整字号步骤:工具/原料WORD2013电脑方法/步骤1、首先打开WORD文档,进入界面。2、点击“设计”选项卡,点击”段落间距“。3...

350px什么意思?

350px是一个单位,指的是一个元素在页面上的宽度或高度,以像素为单位。当设计网页或移动应用时,可以使用像素来指定元素的大小和位置,这样可以确保在不同的设...

18px小字体的px是指什么?

px只是像素,只决定字体的大小,这个是固定的。所以没有具体定义。要想改变字体的高度宽度只能通过字体。如果是表格之类的高度宽度。那就是width:*pxheight:...

字体小三是多少px?

字体号分别为:初号42px小初36px一号26px小一24px二号22px小二号18px三号16p...字号对应的px大小如下:八号字:5px。七号字:5.5px。小六:6...