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