设计、网站、推广
始于2004年
当前位置:首页 > 网站制作

网页设计中微文有哪些使用技巧?

发表日期:2019-4-1 作者来源:派谷网络 浏览次数:0

  目前,网站设计的大趋势之一是使网站所承载的内容极简化和微小化,“微小化”的文本元素已经成为一种流行趋势,但这种设计趋势,在设计领域同样引发了一些争论。

    毫无疑问,小文本在大小和尺寸上可能会导致一些可读性问题。但如果你用心并处理得当的话,小文本区块实际上可以帮助你创建一个视觉焦点和重心,并将用户吸引到设计的特定部分。

  接下来,跟上思维,让我们来看看这个微小的文本趋势应该如何实现以及它将如何发挥作用,以帮助你获得一些设计灵感。

  1、创建层次结构和组织感

  尽管超大型文本随着使用已经在设计领域打下一定的基础,成为主页和标题设计的主要选项。但是目前有一种趋势——在浏览器或桌面的个屏上尽可能在保证视觉的基础上提供更多的信息(原因之一可能是设备尺寸和分辨率的不断增加,给设计师更多的设计空间)。

  这也就是“微小化”文本“横空出世”的原因。字体的大小和比例的不同,使得排版有明显的视觉流动感。通过使用一层很小的文本(通常使用14到16点的尺寸大小),你可以创建一个额外的焦点让用户聚焦。小文本,特别是与其他较大文本一起使用时,可以吸引用户,因为它们是不同的,这在视觉上就形成了对比。

  Maxime Bonhomme在其网站设计中使用了小文本。你可以看到,微小化的文本元素提供了关于项目的关键细节,而更大的文本则负责提供工作的描述。你需要观察和注意这些周围有大量空间和内容的微小文本元素是如何工作的。

  2、形成风格

  有时候,微小化文本信息的设计目的是为了引起你的注意或者让你忍不住想看第二眼。

  因为它的出现经常是出乎意料的,或者不同于用户在其他网站上看到的,所以设计元素可以一下子就吸引用户。

  Mountain Dew,一个永远不惧于引领时尚的品牌,在它的网站设计上使用了一个超级小的标题,不过,它确实能够让你一下子注意到它。这个标题完全和X的顶点契合,创造出一种独特的阅读模式。即使是对交互动作的设计他们也尽量做到微小,它不会让用户感到不舒服,因为它感觉是故意的。

  3、创建吸引人的导航

  虽然现在的主流并且很多网站设计都取消了主页的导航功能,但实际上它们只是变更了导航的表现形式,将他们替换为汉堡/隐藏的样式菜单导航,使用小文本可以让一些元素回到屏幕上,而不让人觉得受到打扰。它是设计模式中的一个流程,从一个极端到下一个极端。

  确实,在网页设计的导航中使用小文本是一件很棘手的事情,因为它需要足够大,以便可以被轻松阅读和点击。使用简单的字体也是非常重要的,因为小文本对眼睛的适应来说可能有点困难。

  Magic of Lapland貌似对在主菜单栏中使用微小文本这个问题找到了一个很好的解决方案。在他的网页设计的主导航中,你可以看到每个元素都有足够的间距,有些甚至使用双倍间距,并且在黑暗背景下,白色无衬线字体有助于可读性。

  4、展示空间

  当页面的视觉空间很大时,微小文本有效。小元素和广阔空间之间的反差是总是可以产生惊人的效果。不过,大量的小文本就不建议使用了,因为它们总归在阅读上并不是很好,所以要保持文本元素的简洁。

  微小文本的使用在初你打算这么做的时候就应该在你的思维中有一个特殊的目的性。在使用这个设计趋势之前,你需要问问你自己:为什么我要在这里使用小文本呢?它对我的网站设计将有什么贡献或者意义呢?

  如果你对这些问题没有可靠的答案(当然“因为我乐意”不能算答案),那么你应该考虑其他的问题,知道你确定它确实是你需要的。

  Moonfarmer做了一个漂亮的示范,它向我们展示了微小的文字应该如何和空间搭配。该网页设计使用了两种级别的排版和大量的开阔的视觉块来建立一种情绪,并在用户点击或滚动之前向他们介绍内容。小小的文字只是设计的众多细节之一,让你想停下来看看。元素之间有很大的对比,所以对于可读性你可以不用有太多的顾虑。

  还有一点你需要记住:你不必到处使用小文本。把它当作一种特殊的艺术元素,就像在Moonfarmer的主页上使用的小文本一样,然后在整个设计的其余部分将相同的字体增加到更常见的尺寸。

  5、当文本不是重要的元素时

  有时,需要展示的重要的元素并不是文本,文本在视觉元素中可能只是次要的。

  Freelance TV是一个很好的例子,说明如何使用小文本来帮助用户,同时允许另一个元素作为设计的主要部分。对于这个项目,视频是重要的元素,你一样就可以看出来,而小文本作为另一个元素,可以提供额外的信息,并鼓励用户进行订阅或者注册,不管它在主页上的什么位置出现。

  6、创建一个可视元素

  文本元素的主要作用是用来阅读的,这很符合逻辑。

  但有时候,将文本元素作为视觉元素的一部分,是否被阅读的重要性就不那么重要了(这需要前期的计划和大量的讨论,所以不要在你突发奇的时候就草率的使用这项技巧)。

  HTML Burger的网站设计中使用了一系列的小文本图层,将小文本用作描述大标题的视觉部分。在每个“Burger”包装上都使用了小的文字,以创造出更酷的视觉元素。这是一个你可能不太常见的设计技巧和思路,在这种情况下,它是有影响力的(但这种技术很难实现;要小心行事)。

  总结

  使用微小文本,或者不使用,这可能是一个艰难的决定。虽然小文本的使用是有争议的,但对于小字体的使用还是有适当的用处的。为了确保在你的设计中添加有效的小文本元素,你需要给它足够的空间,使用一个高度可读的字体,并使用其他的设计元素来对比或者提示用户。

  后,如果你打算使用微小风格的文本内容在你的下一个设计项目时,当然,这是好事,但是我们也建议不要过多的使用它们。这不是一个能帮助你把更多的内容“塞进”你的设计的技术,它只在合适的位置,赋予一个直接的目的性才能发挥它大的效果。
本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本站联系,我们将在第一时间删除内容!

相关网站设计案例

相关推荐新闻

闂備礁鎲$换鍌滅矓鐎垫瓕濮抽柟缁樺俯閸ゆ洟鐓崶銊ュ毈闁哥喎閰i幃瑙勭瑹婵犲嫮鐦堝┑鐐存尭婢у酣骞夐悧鍫熷閻熸瑱绲芥禍楣冩煕閹伴潧骞楁い搴㈠哺閺屾稑鈹戦幇顏嗚兒缂備緡鐓夐幏锟�...

闂備礁鎲$换鍌滅矓鐎垫瓕濮抽柟缁樺俯閸ゆ洟鐓崶銊ュ毈闁哥喎閰i幃瑙勬媴閹绘帒鈷夊┑鈽嗗亽閸撶喎鐣烽悜钘壩╂い顓熷灥閺併倗绱撻崒姘殲闁搞劌缍婇幃鐢割敍閻愬弶宓嶉梺闈浨归崐妤呮偡濠靛鐓曟慨姗嗗墰閻掗攱銇勯弮鈧ú妯侯嚗閸曨垰鐐婄憸搴b偓姘叀閹﹢鎮欓懠顒傤唶缂備胶濞€椤ユ挻绂嶉幖浣镐紶闁告洟娼у▓鑸电箾閹寸偞灏柨鏇ㄤ邯瀹曟顫滈埀顒勫箠濡ゅ懏鍤嶉柕澶堝劤閸婃帗绻涢幘瀵割暡缂佸鍔楃划鈺呭箻椤旇棄娈滅紓鍌氱墢婵兘鎮烽鈧湁闁稿繗顔囬悷閭﹀晠闁跨噦鎷�...

闂備礁鎼崯銊╁磿閹绘帪鑰块柨鐔哄У閺咁剟鏌ㄩ悤鍌涘2025-4-2

闂備礁鎲$换鍌滅矓鐎垫瓕濮抽柟缁樺俯閸ゆ洟鐓崶銊ュ毈闁哥喎閰i幃瑙勭瑹婵犲嫮锛熷┑鐐茬墛閸ㄥ墎鈧數鍘ц灒闁绘挸绨奸崠鏍⒑閸濆嫮澧曟い锔诲灦楠炴濮€閿涘嫷娲搁梺璺ㄥ櫐閹凤拷...

闂備礁鎲$换鍌滅矓鐎垫瓕濮抽柟缁樺俯閸ゆ洟鐓崶銊ュ毈闁哥喎閰i幃瑙勬媴閹绘帒鈷夊┑鈩冨絻閹诧紕绮欐径鎰劦妞ゆ帒鍊婚惌鎾垛偓骞垮劚閻楀棝宕㈤弶鎴唵闁告挷绀侀弸娆愩亜閺傚搫浜剧紓鍌氬€搁崯顖炲垂瑜版帗鍋熸い鏍仜閹瑰爼鏌曟繛鍨偓妤呮偡濠靛鐓曟慨姗嗗墰閻掗攱銇勯弮鈧ú妯侯嚗閸曨垰鐐婂瀣捣椤︹晜绻濈喊妯峰亾閸愭祴鍋撹ぐ鎺嬧偓渚€骞嬮敂绛嬫闂侀潧绻堥崹娲汲閳哄懏鐓犻悗娑櫭悘鐔兼煃瑜滈崗娑氱矆娓氣偓閺岋箓鍩¢崨顓犻獓闁荤姵浜介崝宥夊汲閳哄懏鐓犻悗娑櫭悘鐔兼煃瑜滈崜銊╁箯閿燂拷...

闂備礁鎼崯銊╁磿閹绘帪鑰块柨鐔哄У閺咁剟鏌ㄩ悤鍌涘2025-4-2

闂備礁婀辩划顖炲礉閺囩偟鏆︾€光偓閳ь剛妲愰弮鍫濈闁绘﹢娼х拋鍙夌箾鏉堝墽绋婚柟鐟版喘閹澘鈻庨幇顓炲妳闂佹寧姊婚崑鎾绘偩鏉堚晝纾介柛鎰ㄦ櫅閻忊晠鏌e┑鎰仯闁瑰嘲顑夐弫鎾绘晸閿燂拷...

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍ㄧ⊕婵挳鏌熼幑鎰惞鐎规洩缍侀獮鏍ㄦ綇閸撗呮殸濡炪倖娲﹂崰妤冪矉瀹ュ棙鍎熼柨婵嗘濞堛垽姊虹憴鍕唉闁衡偓閸楃倣锝夊箹娴f瓕袝闂佹寧妫佸Λ鍕叏娴犲鐓欓柡澶庢硶缁犳澘霉閻橀潧鈻堥柟顔藉劤閳诲骸顓兼担闀愬婵炶揪绲挎灙闁哄懏鐟︾换娑㈠窗鎺抽崐銈夊疮韫囨稒鈷掗柛灞诲€曢弸娆徝瑰⿰鍕诞鐎规洩绲剧换婵嬪川椤栨粠鍟嬮梺鑽ゅ仦缁嬫垿鎯屾担璇ュ綊宕卞☉妯碱槺闂佸搫绋侀崜娆忊枔妤e啯鐓曢煫鍥ㄦ煥閳绘洟鏌涢敐鍛喐闁硅弓鍗抽弫鎾绘晸閿燂拷...

闂備礁鎼崯銊╁磿閹绘帪鑰块柨鐔哄У閺咁剟鏌ㄩ悤鍌涘2025-4-2

濠电姷顣介埀顒€鍟块埀顒勵棑缁辩偛顓奸崱妤婂殼濠碘槅鍨伴幖顐︻敋瑜忕槐鎾诲礃閳轰胶浠奸梺缁樼箥閸ㄨ京绮嬮幒妤€唯闁挎洍鍋撶紒鑼嚀閵嗘帒顫濋鐘闂佸湱鍎甸弲鐘诲蓟閸涘瓨鏅搁柨鐕傛嫹...

濠电偞娼欓崥瀣晪闁诲簼绲荤亸娆戞閺冨牆绠i柣姗€娼х拋鍙夌箾鐎电ǹ袨闁稿氦灏妵鎰媴閸︻厾鎳濆┑鐐村灦钃辩憸鑸劦濮婃椽顢曢妶鍛亖濠电偛鐗婇崹鍨暦濠靛鍋愰柣鎴炨缚閵堜即姊绘笟鍥т簽闁哥姴娴烽埀顒冾潐婵炲﹤顕f导鎼晬婵炴垶岣块崐鎺楁⒑閸涘⿴娈旀繛灞傚姂瀵偊濡舵径濠勵吅闂佺偓鑹鹃崐鑽ょ矓閻撳宫鏃堟偐閼艰泛顏梺纭呮腹閸楁娊鐛弽褉鍫柛娑卞幖娴滃爼鎮楀▓鍨灍婵炲弶锕㈤獮鏍箹娴e摜顔婇梺鍦劋閸ㄥ爼宕愰幎鑺ョ厽闁靛ǹ鍎遍鈺呮煕濞嗘瑦瀚�...

闂備礁鎼崯銊╁磿閹绘帪鑰块柨鐔哄У閺咁剟鏌ㄩ悤鍌涘2025-4-1

缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍ㄥ嚬閸ゅ牆螖閿旂瓔鍎ラ柛鐔烽閳藉骞欓崘銊ョ濠电姭鍋撳〒姘e亾鐎规洦鍋婇、鏃堝礃椤忓懏顫呴梻浣虹《閺呮繈宕曢妶鍜冭€块柡澶婄氨閺嬫牠鏌ㄩ悤鍌涘...

濠电偛顕慨浼村磿閹殿喚绠旈柛娑欐綑閸欏﹥銇勯弽銊х煂缂佸婀辩槐鎺楀籍閳ь剟鎮烽妷褏纾介柟鎹愬煐婵ジ鏌涘▎宥呭姤闁告﹩鍓熼弻锝夊Ω閵夈儺浠圭紓浣规煥閻°劎绮嬪鍛婵☆垳鍘ч弫銈夋⒑閸濆嫮澧遍柛鎾存皑濞戠敻宕奸弴鐐殿槴濠电偛妫欓悷褏绮eΔ鈧湁闁绘﹩鍠栭崝銈夋煛娴i潧鈧繈鐛€n喗鎲ラ柛灞剧箘椤︾増绻涢幋鐐存儎闁告ǹ鍋愮紓鎾淬偅閸愨晜娅栧┑顔斤供閸樺墽绮婚幒妤佺厱闊洤顑呴崝娆戠磼椤帞纾块柟鍙夋尦閺佹劙宕堕妸褏宕堕梻浣告惈缁夋潙煤閵堝牄浜归柨鐕傛嫹...

闂備礁鎼崯銊╁磿閹绘帪鑰块柨鐔哄У閺咁剟鏌ㄩ悤鍌涘2025-4-1

网站建设解决方案
缂傚倸鍊搁崯顖炲垂瑜版帗鍋熸い鏍ㄧ矌绾惧ジ鎮楀☉娅亣顣介梺鑽ゅ枑閻熻京寰婃禒瀣獥闁告稒娼欏Λ姗€鎮峰▎蹇擃伌闁衡偓閿燂拷 濠电偞鎸冲Λ鍨渻閹烘梻绠旈柣鏂垮悑閳锋帡鏌曟繝蹇曠暠闁绘挻娲滅槐鎾诲礃閳轰胶浠奸梺缁樼箥閸ㄨ泛顫忛崸妤€骞㈡繛鍡楁禋閸炴椽姊洪崨濠勫闁绘鍋犻。楣冩⒑閸涘﹤濮屾繛鍛礋瀵鎮㈡總澶嬬闂佽法鍣﹂幏锟� 闂備浇袙閸嬫捇鏌曟径鍡樻珕闁轰焦锕㈤弻娑㈠Ω閵夘喖鍓崇紓鍌氱Т椤﹁京鍒掗埡浣叉瀻闁硅鍋呯敮鈥崇暦濮椻偓閹煎綊顢曢敐鍥у箥婵犵鍓濋〃鎰板箯閿燂拷 闂備胶枪缁绘垵危閹烘鐒垫い鎴f硶缁愭梹绻涢崨顓犵伇闁诡喗澹嗘禒锕傛嚃閳哄啯鍤岀紓鍌氬€搁崯顖炲垂瑜版帗鍋熸い鏍ㄥ嚬閸ゅ牆螖閿旂瓔鍎ラ柛鐔烽叄閹嘲鈻庡▎鎴濆煂闂佸摜濮撮幊妯侯嚕椤掑倹鍠嗛柛鏇炵仛閺侊拷 闂備礁鎲¢悧鏇⑩€﹀畡鎵虫瀺鐎光偓閳ь剟骞忛悩宕囩瘈闁告劦鐓堥弳锛勭磽閸屾艾鏆為柛銊ョ秺閹敻顢涘鐓庢畼婵°倧闄勯娆撳疮鎼淬劍鍋℃繛鍡樼懅閸掍即鏌涢悩鍙夊殗鐎殿噮鍓涢幉鎾礋閸偅鏆� 闂備礁缍婂ḿ褔顢栭崱妞绘敠闁逞屽墴閺屸剝鎷呴悷閭︽闂佺粯鐗楃划搴ㄥ箖閹殿喕娌柤娴嬫櫇閹虫繄绱撻崒姘殲闁搞劌缍婇幃鐢割敍濮樼厧娈樻俊銈忛檮椤戞瑩宕惔銊︾厸闁稿本绻嶅ḿ鎰亜椤喗瀚� 濠电姰鍨奸崺鏍偋閻愮儤鐓ラ柕鍫濐槸缁€鍌涖亜閹哄棗浜鹃悗鍨緲閸熸壆妲愰弮鍫濈闁绘﹢娼х拋鏌ユ倵閻愮懓鈧繄绱撳棰濇晩闁哄洨濮甸崰鍡涙煥濠靛棙鍣归柡瀣у亾闂備礁鎼崐浠嬶綖婢舵劑鈧線鏁撻敓锟� 闂傚倷绀佸鍫曞垂婵傚憡鍊甸柧蹇撴贡绾鹃箖鏌熺€电ǹ啸鐟滄媽灏欓埀顒傚仯閸婃繄绱撳棰濇晩闁哄洨濮甸崰鍡涙煥濠靛棙鍣归柡瀣у亾闂備礁鎼崐浠嬶綖婢舵劑鈧線鏁撻敓锟� 闂佽崵鍋炵粙鎴炵附閺冨倻绠旈柣鏃傚帶绾偓闂婎偄娲ゅù椋庣玻濡ゅ啰纾兼い鎰╁劚閸氬湱绱撳鍜佹Ш缂侇喒鏅涢埢搴ょ疀閺囩姴顦╅梺鑽ゅС閻掞箑鐣峰Ο娆炬毎闂備礁鎲¢崝妯衡枍閺囥垹钃熼柣鏂款殠濞存牠鏌ㄩ悤鍌涘 闂備礁鎲$换鈧柤瀹犲煐閺呰泛鈹戦崼姘壕閻熸瑥瀚ョ紓姘辩磽瀹ュ拋妲虹紒杈ㄦ楠炲鎮╅棃娑滎唹闁诲海鍋i崐婵堢磽濮橀鏁婇柡鍥ュ灩濡﹢鎮峰▎蹇擃伌闁衡偓閿燂拷