2014-08-25 分類(lèi): 響應(yīng)式網(wǎng)站
響應(yīng)式網(wǎng)站設(shè)計(jì)移動(dòng)頁(yè)面設(shè)計(jì)中如何運(yùn)用文字
成都網(wǎng)站設(shè)計(jì)中如何運(yùn)用文字,深圳響應(yīng)式網(wǎng)站建設(shè)公司,響應(yīng)式網(wǎng)站設(shè)計(jì),移動(dòng)頁(yè)面設(shè)計(jì)應(yīng)注意的幾點(diǎn)問(wèn)題
網(wǎng)站設(shè)計(jì)中如何運(yùn)用文字
設(shè)計(jì)師們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí),通常會(huì)為表達(dá)某種情感而選擇字體??梢哉f(shuō),除了需要表達(dá)文字內(nèi)容本身之外,設(shè)計(jì)師在選擇一款字體時(shí)還應(yīng)該考慮這款字體是否能與其他設(shè)計(jì)元素及布局相融合,同時(shí)加深網(wǎng)頁(yè)上的人或事物的特點(diǎn)。深圳網(wǎng)站建設(shè)深圳網(wǎng)站建設(shè)覺(jué)得隨著更多企業(yè)越來(lái)越“接地氣”,他們開(kāi)始注重與用戶(hù)的互動(dòng)與交流,增強(qiáng)用戶(hù)的參與感,因此對(duì)話式的網(wǎng)站快速受到用戶(hù)歡迎。這一趨勢(shì)無(wú)形中要求設(shè)計(jì)師們需要加強(qiáng)對(duì)文字性格的把握,以更好的設(shè)計(jì)實(shí)現(xiàn)與用戶(hù)的“對(duì)話”。
正如大家常聽(tīng)到一句話“字如其人”,在看到一種字體后,人們會(huì)下意識(shí)聯(lián)想到某種人物形象、性格或感受,比如沉穩(wěn)、柔美、活潑、可愛(ài)、平和等。
1.客觀、正式、官方的、通用的
基本上看到這幾個(gè)描述詞,大家肯定知道描述的是什么字體了。沒(méi)錯(cuò),說(shuō)的正是宋體。宋體是與印刷術(shù)同齡的出版字體,這種最普通的字體在報(bào)刊雜志中常用。在網(wǎng)頁(yè)設(shè)計(jì)中,宋體也可以在很多地方使用,非常適合用于大段文字的版塊。
響應(yīng)式網(wǎng)站設(shè)計(jì)移動(dòng)頁(yè)面設(shè)計(jì)中如何運(yùn)用文字" alt="響應(yīng)式網(wǎng)站設(shè)計(jì)移動(dòng)頁(yè)面設(shè)計(jì)中如何運(yùn)用文字" src="/upload/pic2/0b90a5513cd1c5fca37627cc3cd90b4e.jpg" />
2.清秀、方正俊雅、真實(shí)可靠
有物電商平臺(tái)的banner圖中采用了楷體和微軟雅黑兩種字體,大字使用的楷體是漢字主要書(shū)體,看起來(lái)工整規(guī)范、干凈利落,給人方正俊雅的感覺(jué),這段文字與圖片表達(dá)的“手工感”相融合,共同傳達(dá)出一種認(rèn)真和質(zhì)樸的精神。
從文字的整體結(jié)構(gòu)來(lái)看,楷體帶有一種書(shū)卷味,可以考慮在教育行業(yè)的網(wǎng)站上適當(dāng)采用。
3.強(qiáng)壯、堅(jiān)韌、壓迫、震撼、充滿力量感
給人這種感受的字體一般筆畫(huà)渾厚、濃重,很多情況下采用粗體或加粗的大號(hào)文字,在視覺(jué)上面積加重,給人一種強(qiáng)壯、震撼的感覺(jué)。比如下面阿迪達(dá)斯采用的這款蒙納簡(jiǎn)粗雅麗體,在網(wǎng)頁(yè)上占據(jù)的位置非常顯眼。
下面案例中節(jié)目的Logo位于官網(wǎng)首頁(yè),采用了一款純直線字體,顯得硬朗、筆直、棱角分明,給人一種堅(jiān)決的態(tài)度。
還有李寧官網(wǎng)圖片中使用的字體,筆畫(huà)粗細(xì)均衡,規(guī)律一致,充滿了堅(jiān)韌。
NBA官網(wǎng)和國(guó)際飛鏢公開(kāi)賽網(wǎng)站則是采用了微軟雅黑字體,加粗的大號(hào)的字體略帶傾斜,內(nèi)容標(biāo)題也同樣采用了加粗的微軟雅黑。微軟雅黑加粗后的視覺(jué)效果雖然不像上面幾個(gè)案例的字體那么強(qiáng)勢(shì),但我們依然能在視覺(jué)上獲得類(lèi)似“隆重、這是比賽”的感受。
4.細(xì)致優(yōu)雅、纖細(xì)、柔美、婉轉(zhuǎn)、流暢、精致
給人這種感受的字體一般筆畫(huà)纖細(xì),婉轉(zhuǎn)流暢,具有曲線美,很多情況下會(huì)采用末梢曲線優(yōu)美的襯線字體。
上文提到讓人感覺(jué)正式的宋體就是一款襯線字體,在適當(dāng)?shù)脑卮钆渲?,宋體也能展現(xiàn)出典雅的一面,給人優(yōu)雅的感覺(jué)。比如下面Tiffany的官方網(wǎng)站。
這類(lèi)字體一般呈現(xiàn)出纖細(xì)柔軟的特征,適合應(yīng)用于珠寶、化妝品、珠寶首飾,以及面向女性用戶(hù)群體的產(chǎn)品等。另外像紅酒、餐廳、手工藝品牌、精選類(lèi)品牌、奢侈品等也會(huì)使用這類(lèi)字體。有一點(diǎn)不得不說(shuō),其實(shí)很多品牌在中國(guó)區(qū)的官網(wǎng)上使用了特殊的自定義字體,但由于瀏覽器無(wú)法識(shí)別,瀏覽器最終以默認(rèn)的宋體進(jìn)行渲染,這時(shí)的視覺(jué)效果可能就不那么美好了。
5.活潑、可愛(ài)、有趣
給人這種感受的字體一般字體末梢圓潤(rùn),看起來(lái)圓乎乎的,顯得稚趣、可愛(ài)。比如喜寶HiPP官網(wǎng)采用的圓體。
還有幫寶適采用的幼圓字體。
給人這種感受的字體主要適用于趣味游戲、嬰幼兒產(chǎn)品、游樂(lè)場(chǎng)、玩具等。另外,像柔軟舒適的產(chǎn)品也會(huì)選用這類(lèi)字體,比如某些家居用品等。
6.平和、干凈、簡(jiǎn)單、平靜
這類(lèi)字體一般采用無(wú)襯線字體,鏈接襯線和字干的字弧被去除,字體看起來(lái)干脆利落,比如蘋(píng)果官網(wǎng)的PingHei字體。
魅族官網(wǎng)的方正悠黑字體。
網(wǎng)站建設(shè)公司計(jì)移動(dòng)頁(yè)面設(shè)計(jì)中如何運(yùn)用文字" alt="響應(yīng)式網(wǎng)站設(shè)計(jì)移動(dòng)頁(yè)面設(shè)計(jì)中如何運(yùn)用文字" src="/upload/pic2/50950fe8576c072964fedb732e468fe9.jpg" />
這類(lèi)字體主要適用于科技行業(yè),包括平臺(tái)、電腦手機(jī)產(chǎn)品等,同樣也適用于現(xiàn)代感的產(chǎn)品、簡(jiǎn)潔風(fēng)格的產(chǎn)品等。
7.古典、中國(guó)風(fēng)
柒牌采用的行書(shū)字體行云流水,形態(tài)優(yōu)美,帶著濃濃的中國(guó)特色,更好地表達(dá)了其品牌所傳達(dá)的理念。
此外,很多字體還能給人其他感受,比如費(fèi)列羅官網(wǎng)的這款字體讓人有一種愉悅、溫暖的感覺(jué)。加粗的微軟雅黑字體在以下案例中讓人感到專(zhuān)業(yè)、可靠。黑體看起來(lái)剛健、踏實(shí),在建筑行業(yè)、機(jī)械行業(yè)、房地產(chǎn)行業(yè)網(wǎng)站上展現(xiàn)出一種專(zhuān)業(yè)感。深圳網(wǎng)站建設(shè)深圳網(wǎng)站建設(shè)覺(jué)得看到這么多案例后,相信大家已經(jīng)對(duì)字體性格有了基本了解,本篇關(guān)于文字性格的介紹就先到這里。了解這些基本的知識(shí)后,大家可以進(jìn)一步學(xué)習(xí),根據(jù)對(duì)不同字體結(jié)構(gòu)、筆畫(huà)弧度等元素進(jìn)行判斷,在不同場(chǎng)景下合理應(yīng)用字體,最終能通過(guò)文字性格的展現(xiàn)讓自己網(wǎng)頁(yè)設(shè)計(jì)更有活力。
深圳響應(yīng)式網(wǎng)站建設(shè)公司,響應(yīng)式網(wǎng)站設(shè)計(jì)
響應(yīng)式網(wǎng)站概念
響應(yīng)式概念:
伊桑·馬科特在2010年首次提出了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(RWD, Responsive Web Design)的概念。(當(dāng)時(shí)能提出這個(gè)概念是很不簡(jiǎn)單的哦) 他根據(jù)工程師在處理不同屏幕分辨率的網(wǎng)頁(yè)內(nèi)容展現(xiàn)的效果的時(shí)候常用的技巧和策略,創(chuàng)造性的進(jìn)行了歸納總結(jié)。簡(jiǎn)而言之是指網(wǎng)頁(yè)根據(jù)屏幕寬度,做出相應(yīng)調(diào)整的,力求能夠達(dá)到在不同的設(shè)備下,內(nèi)容都能以最合適的方式展現(xiàn)給用戶(hù)。
響應(yīng)式網(wǎng)站建設(shè)
響應(yīng)式原理:在CSS中,有一個(gè)不常用到的屬性media。為了達(dá)到響應(yīng)式設(shè)計(jì)的目的,讓css根據(jù)屏幕寬度(例如 media screen only @(max-width:480px)),使用不同的CSS代碼,從而達(dá)到自動(dòng)調(diào)整頁(yè)面DIV寬度的目的。當(dāng)然,除了CSS,還可以使用JS對(duì)頁(yè)面內(nèi)容進(jìn)行動(dòng)態(tài)的調(diào)整,不過(guò)這個(gè)技術(shù)不是很流行。
響應(yīng)式價(jià)值:隨著越來(lái)越多的智能移動(dòng)設(shè)備( 手機(jī),平板 )加入到互聯(lián)網(wǎng)中來(lái),互聯(lián)網(wǎng)上的訪問(wèn)設(shè)備是爆炸性的增長(zhǎng)(屏幕的分辨率也是爆炸性的增長(zhǎng))。為了給手機(jī)和平板設(shè)備提供更好的體驗(yàn),必須在網(wǎng)站設(shè)計(jì)中使用響應(yīng)式網(wǎng)站設(shè)計(jì),并且整合從PC端到手機(jī)的各種屏幕尺寸和分辨率,用技術(shù)來(lái)使網(wǎng)頁(yè)自動(dòng)適應(yīng)不同分辨率的屏幕。
總結(jié):響應(yīng)式網(wǎng)站設(shè)計(jì),為計(jì)算機(jī)、手機(jī)、平板電腦等不同設(shè)備的訪問(wèn)用戶(hù)了提供更加舒適的界面和更好的用戶(hù)體驗(yàn)(和速度),而且隨著目前移動(dòng)設(shè)備的增長(zhǎng),已成為大勢(shì)所趨。如果一個(gè)網(wǎng)站不支持響應(yīng)式設(shè)計(jì),那么就已經(jīng)可以說(shuō)不是很符合潮流了。
移動(dòng)頁(yè)面設(shè)計(jì)應(yīng)注意的幾點(diǎn)問(wèn)題
在移動(dòng)應(yīng)用界面設(shè)計(jì)(后續(xù)簡(jiǎn)稱(chēng):移動(dòng)設(shè)計(jì))的世界里,大家對(duì)美學(xué)、手勢(shì)和動(dòng)效的看法略有不同。有時(shí)一個(gè)簡(jiǎn)單的功能性應(yīng)用比華麗的應(yīng)用帶來(lái)的效果更好,而有時(shí)候卻恰恰相反。不過(guò),有些基本規(guī)則是人們不愿意去打破的。如果你的移動(dòng)設(shè)計(jì)使得用戶(hù)無(wú)法順利觸達(dá)關(guān)鍵功能,這顯然是行不通的。假使你的文字字號(hào)過(guò)小導(dǎo)致沒(méi)人能順利完成閱讀,那么你得回爐重做。
Alyssa Burke與Macy Nguyen是AKTA(一個(gè)數(shù)字體驗(yàn)咨詢(xún)公司)的設(shè)計(jì)師,倆人都曾為財(cái)富500強(qiáng)的公司以及迅速增長(zhǎng)的創(chuàng)業(yè)公司效力,參與過(guò)原生移動(dòng)設(shè)計(jì)項(xiàng)目,為某些機(jī)構(gòu)的頂級(jí)項(xiàng)目貢獻(xiàn)設(shè)計(jì)輸出。以下是他們認(rèn)為無(wú)法接受的移動(dòng)設(shè)計(jì)7宗罪:(深圳網(wǎng)站設(shè)計(jì)覺(jué)得這七條非常容易讓大家犯錯(cuò),看看你是不是也會(huì)這樣)
1、忽略上下文情境
目標(biāo)用戶(hù)的個(gè)人檔案(年齡、生活習(xí)慣、技術(shù)潛能等)與他們的物理環(huán)境(室內(nèi)室外,在線離線,早晨晚上等)會(huì)影響許多設(shè)計(jì)決策。移動(dòng)設(shè)計(jì)師應(yīng)該在迭代流程中 充分考慮上下文因素,以降低可用性不足的風(fēng)險(xiǎn)。即使擁有平滑的過(guò)渡轉(zhuǎn)場(chǎng)、光滑的按鈕和美麗的字體,一些應(yīng)用也會(huì)因?yàn)檎w界面設(shè)計(jì)不符合特定用戶(hù)場(chǎng)景(深色 界面用于戶(hù)外場(chǎng)景:糟糕的移動(dòng)設(shè)計(jì))而失去成名機(jī)會(huì)。
2、閉門(mén)造車(chē)
設(shè)計(jì)和開(kāi)發(fā)數(shù)字產(chǎn)品是一項(xiàng)需要團(tuán)隊(duì)協(xié)作的工作。即使有項(xiàng)目成員(開(kāi)發(fā)、新人、極客、狂熱者、朋友、陌生人、你的哥們兒和設(shè)計(jì)師潮人)對(duì)具體項(xiàng)目?jī)?nèi)容完全不 了解,將設(shè)計(jì)工作及早并及時(shí)推廣到整個(gè)項(xiàng)目周期中的不同角色之間也是非常關(guān)鍵的。我們需要讓他們了解到必要的上下文信息,并持續(xù)保持相關(guān)信息互通。與其在 發(fā)布后修復(fù)問(wèn)題,不如在項(xiàng)目進(jìn)程早期預(yù)留調(diào)整空間。
3、怠慢開(kāi)發(fā)人員
程序員和工程師(以及偶爾酗酒的碼農(nóng))不僅是你的同伴,而且是技術(shù)先導(dǎo)。他們除了知道哪些能夠在現(xiàn)實(shí)中奏效之外,還能夠如你設(shè)想的那般確保你的想法得到完 美落地。有些移動(dòng)設(shè)計(jì)在技術(shù)上行不通,有些或許可行,但這些都需要很多努力或時(shí)間在項(xiàng)目中驗(yàn)證。如果不問(wèn)你或許永遠(yuǎn)無(wú)法確定能否做到。在項(xiàng)目交付時(shí),開(kāi)發(fā) 人員會(huì)把你的設(shè)計(jì)成果實(shí)現(xiàn)出來(lái),此刻,他們可能很欣賞你,也可能很討厭你。
4、低估動(dòng)效設(shè)計(jì)
隨著物聯(lián)網(wǎng)逐步成熟,數(shù)字界面在人們與周?chē)鎸?shí)世界的互動(dòng)中扮演了更重要的角色,界面設(shè)計(jì)的這一部分需要被設(shè)計(jì)師更加慎重的對(duì)待。人類(lèi)擁有與生而來(lái)的本 能,從所處環(huán)境的變化中得到不同的感知與反應(yīng)。使用合理的界面動(dòng)效是一種呈現(xiàn)優(yōu)先級(jí)和重要內(nèi)容的有效方式。在某些情形下的恰當(dāng)運(yùn)用,甚至能夠引發(fā)用戶(hù)的愉 悅。有興趣的讀者可以了解下迪斯尼動(dòng)畫(huà)的12項(xiàng)基本法則。
5、字號(hào)太小
比起紙質(zhì)內(nèi)容,人們?cè)谑謾C(jī)屏幕上進(jìn)行閱讀的精確度和深入度略有不足。正如移動(dòng)設(shè)計(jì)拇指觸控規(guī)則所定義,數(shù)字界面的字號(hào)最少應(yīng)該兩倍于印刷字號(hào)。不同情形適 用不同的字體和設(shè)置,尤其當(dāng)用戶(hù)試圖在移動(dòng)設(shè)備上完成多類(lèi)任務(wù)時(shí)。為了避免字號(hào)太小,還需要優(yōu)先考慮按鈕形狀、圖片及交互等界面元素對(duì)整體體驗(yàn)有何影響。
6、忽略觸控目標(biāo)
許多移動(dòng)設(shè)計(jì)師仍然對(duì)用戶(hù)手指大小不同的現(xiàn)狀缺乏重視。一旦涉及行動(dòng)或者任務(wù)導(dǎo)向的觸控目標(biāo),盡可能的使它簡(jiǎn)單而且容易點(diǎn)擊。為老人設(shè)計(jì)時(shí)要考慮觸控時(shí)的 抖動(dòng)因素,同樣為兒童設(shè)計(jì)時(shí)需要考慮點(diǎn)擊的不準(zhǔn)確性。深圳網(wǎng)站設(shè)計(jì)建議為圖形資源周?chē)黾恿舭讌^(qū)域,以便本質(zhì)上提升觸控面積,幫助提升完成任務(wù)的速度。
7、死摳平臺(tái)規(guī)范
在Android和iOS平臺(tái)上統(tǒng)一一套設(shè)計(jì)方案有一定局限性,也容易對(duì)全局體驗(yàn)?zāi)繕?biāo)帶來(lái)副作用。兩個(gè)平臺(tái)上有各自用戶(hù)熟悉的設(shè)計(jì)模式,設(shè)計(jì)師不應(yīng)該只熟悉規(guī)范,而應(yīng)該探索在兩個(gè)平臺(tái)上流行的應(yīng)用。
網(wǎng)站欄目:響應(yīng)式網(wǎng)站設(shè)計(jì)移動(dòng)頁(yè)面設(shè)計(jì)中如何運(yùn)用文字
路徑分享:http://redsoil1982.com.cn/news/20255.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)、響應(yīng)式網(wǎng)站等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容