首頁

騰訊游戲標志設計字標篇

資深UI設計者

符號所承載的內容是從其對象體內容中提取極其具識別潛質的內容直接或間接延伸出的。

符號所承載的內容是從其對象體內容中提取極其具識別潛質的內容直接或間接延伸出的。從視覺,功能,精神等層面一步步推導設計的邏輯與標準,向公眾傳播一種正面的社會啟迪意義,實現(xiàn)一種更為合理的生存方式。



前言:


TGideas與DesignStudio兩個設計團隊以及品牌團隊在長達八個月的時間里一起嘗試品牌體系系統(tǒng)梳理,品牌設計定位以及搭建整體的VI,曾嘗試過很多新的創(chuàng)意點,不同的方向出了很多有趣的設計,最終慢慢的確定了一個品牌概念關鍵詞:發(fā)現(xiàn)。國際化品牌概念詞:spark。關于這個概念的推導簡圖過程請看下圖。由于此片文章 主要是針對標志字標部分 這個板塊去做的一些細節(jié)思考,在這里就不對于概念與品牌本身做過多闡述。


一:關于圖形設計

圖形設計前期版本非常多,我們做了很多嘗試,選擇了此版本設計圖形,主要理由是:標志由一個中心放射的火花構成,標志中所有光線由中心向外放射,形成多層次的結構設計,代表騰訊游戲豐富的品類和產品,廣泛的受眾,以及對創(chuàng)造出風多元價值的探索。標志的圖形概念是內部團隊與英國DesignStudio團隊一同探討出來的。英國DesignStudio團隊作為國際知名設計公司在創(chuàng)意階段給予非常有價值的探索與合作。下圖moodboard整理來源于jackyyyu.





針對確定好的品牌概念,需要對圖形設計進行不同的嘗試,我們內外一致出了數(shù)多方案,最終把方案鎖定在了下圖四個范圍中。





標志圖形結構網格中心是以黃金分割點作為重心的,散發(fā)出來的火花嚴格控制在了網格與黃金分割點的周圍,在比例關系中是非常規(guī)范優(yōu)美的弧形組成,但是由于多處交錯處有很多沒有對齊的細節(jié),我們在把控整體重心的情況下對交錯重疊點做了調試與優(yōu)化,使得其圖形在嚴謹比例下顯得更佳有層次。


二:中文字標設計

思考:騰訊游戲圓潤體是受騰訊體啟發(fā)制作的,字體設計里的漢字骨架與騰訊體是共通的,這與騰訊體傳達的部分理念相一致。沉穩(wěn)的重心,均勻的字白,傳達出勇往直前的領導力與前瞻性。這款字體同樣有騰訊體沉穩(wěn)的重心,而且相比之下更加放松的中宮與較為纖細的筆劃,而且保持了騰訊體向右傾斜8度的特色。騰訊體大多為科技感的直線,硬朗的切角設計,傳達了前瞻科技感與驅動力的字體氛圍。而圓潤體保持整體的字架同時加入更多曲線設計,為的是能在保持前瞻與沉穩(wěn)特質的基礎上更突出的表現(xiàn)快樂與探索的感受.

關于“戲”字的傾斜不穩(wěn)問題解決方案思考:

“戲”字的字體結構比前面3個字體都要特殊,特別是字形上面左右結構,字白左大右小,單從字的重心來看本就有些偏右倒,這是“戲”的字形本身決定的,再者從“騰訊游戲”這四個字體來看,前三個字體結構都屬于很平穩(wěn)的字形,“戲”字就顯得更加“薄”,整體會有不平衡的感受。以上是“戲”看上去“倒”的感受原因的分析。那解決辦法這里是從以下幾點出發(fā):1.“戲”字在左偏旁擴大了字白部分,讓文字相比之下更加飽滿,因為這里沒辦法對筆劃進行加粗,嘗試過效果并不明顯。2.“戲”字右邊的豎彎鉤部分是進行了拉長延伸的,特別在尾巴部分,也是希望對比騰訊體更加“站穩(wěn)”,傾斜度來看更偏90度,希望的是不要過于傾斜導致重心偏右,畢竟這個字體是斜體,視覺感受要控制在斜體基礎上的“穩(wěn)”。3.文字在折筆處都有增加彈性設計,因為本質上它和騰訊體的折筆處是有很大不同的,它更強調的是“溫度”,“戲”的折角處會更加柔韌,沒有在接近字面框的下面部分做很“實”的落筆,這里我覺得更加有圓潤體的特色。


圓潤體在遵循與承襲原有的視覺資產的前提下進行了如下設計優(yōu)化:

1.對字形進行調整,將字體中宮放松,使得整體更加放松協(xié)調,更具親切感。
2.將字體筆劃粗細調整更細,使得字廓在游戲場景中或移動端縮小的情況下識別性更強。
3.文字折筆處加入更多曲線設計,為了是能在保持前瞻與沉穩(wěn)特質的基礎上更突出的表現(xiàn)快樂與探索的感受。




三:英文文字標設計

選一款好字體,直接使用,一款好的字體,原本就是為了讓使用者在正常排版下就能達到統(tǒng)一和諧的效果而制作,盡量活用好素材本身的價值。幾款推薦的幾何型體無襯線體:futura,avant gaede gothic,avenir next Frutiger.其中Frutiger是一款劃時代的字體,“以穩(wěn)重,舒適”的特性出名。我之所以選用這款字體是因為Frutiger設計溫和及清晰的特點,協(xié)助品牌在全世界范圍內保持一致。Neue Frutiger延續(xù)了Adrian Frutiger 設計的同名字體Frutiger,這套字體是他在70年代中期為巴黎附近的戴高樂機場設計的。易讀性和可識別性在整套字體中貫穿始終,Monotype 的字體設計總監(jiān)小林章先生將其描述為具有“某種有機的且友好的意味”,它可廣泛用于從打印到屏幕的各種媒介。futura是一款現(xiàn)代的,極具幾何特征的字體,設計表層突出的是“合理性,簡潔性”。avant gaede gothic是20世紀70年代在美國最具有平面設計創(chuàng)意的字體,“厚重,有趣”是他的主要特征。下圖為挑選出來的比較經典的西文字體。




在此之前,DesignStudio團隊給我們帶來了一款制作的英文字體設計,如下圖:


這款英文字體面臨的問題:

英文字體沒有與中文進行搭配設計,為單獨設計,在中英文混排上面效果需要與中文對齊。以中文為主,英文為輔,從字體的粗細與字形上需要優(yōu)化的更整體,目前英文對比中文比較粗,由于很多個性化的倒角設計,在縮小后字形識別性會變弱一些,主次上更希望突出中文,搭配更簡潔的英文。


問題:如何解決在繼承英國DesignStudio團隊英文字體的基礎上去更加符合中國的排版習慣與使用習慣?

最終在確定好英文字標設計后,我們把中英文進行了搭配,得到了最終版本的英文字標,如上圖最后版本,并根據(jù)這套字標的字形特征請供應商制作了一套新的英文字庫。

新的騰訊游戲字庫的設計也給騰訊游戲新品牌帶來更多元化的使用場景,讓品牌更佳具有說服力。

如下圖。







小結:優(yōu)秀的品牌擁有一個強有力的品牌符號,并且圍繞這個符號展開符合其品牌定位的視覺識別系統(tǒng)為傳播框架。當這個系統(tǒng)通過品牌傳播傳遞給消費者的時候,其顯著地激發(fā)了消費者的認知,使消費者將所有品牌消費體驗和感知記憶都歸結到這個符號上。符號所承載的內容是從其對象體內容中提取極其具識別潛質的內容直接或間接延伸出的。從視覺,功能,精神等層面一步步推導設計的邏輯與標準,向公眾傳播一種正面的社會啟迪意義,實現(xiàn)一種更為合理的生存方式。

文章來源:站酷

js的異常捕獲機制的生動講解

seo達人

在這里主要是跟大家介紹一下在js中如何使用異常捕獲機制,包括try,catch,finally與我們主動拋出異常throw的用法
使用異常捕獲機制可以讓我們在項目中對一些可能出錯的地方作出一些預防措施,讓我們能夠更加快速精準的找出代碼錯誤,
也能夠讓我們后面的代碼不受前面的錯誤影響繼續(xù)執(zhí)行,話不多說,看代碼,圖解在下方。

<script>
    console.log(1)

    try {
      console.log(2)
      console.log(num) // 出錯,那么try塊級語句出錯地方后面的代碼都不會執(zhí)行
      console.log(3)
    } catch (e) { // e就是try語句中出錯的錯誤信息,我們可以在這里捕獲到并做處理
      console.log(e)
    } finally { // finally里面的代碼不管前面是否出錯都會執(zhí)行
      console.log(4)
    }

    console.log(5) // try里面出錯并不會影響外層代碼的執(zhí)行

    console.log('-------------------------------------------------')

    function test() {
      var a = true
      if (a) {
        throw '出錯啦??!' // throw是我們主動拋出異常,后面可跟字符串或者對象
      }
      console.log(6) // 這里的代碼在上面拋出異常之后就不會被執(zhí)行
    }

    try {
      console.log(7)
      test()
      console.log(8)
    } catch (e) {
      console.log(e) // 上面我們主動拋出錯誤,所以e就相當于我們拋出錯誤的內容
    }
    console.log(9)
  </script>


看看你的手機鍵盤,隱藏了多少設計細節(jié)?

資深UI設計者

手機鍵盤,可以干嘛??


無疑是打字、信息輸入,也是用戶體驗產品最常用、最直接的方式之一。


我們每天都在使用鍵盤,但是偶爾會遇到一些體驗上的不足,如鍵盤擋住操作入口、很難控制鍵盤光標的移動...


所以今天想梳理一下手機鍵盤里的要點、細節(jié)點,日后遇到有涉及到鍵盤輸入的地方,可以有更多的思路去解決各種產品/設計問題。



目錄:

一、鍵盤與命令類型

二、設計要點

三、有意思的鍵盤交互





Part1:鍵盤與命令類型

先簡單說下鍵盤與命令詞類型(想看設計要點,可直接滑到Part2部分),對鍵盤有個全局的認識,方便在工作中知道每種鍵盤的用途。


1.鍵盤類型

從技術角度上看,市面上所有的鍵盤產品可分為:系統(tǒng)鍵盤(手機默認鍵盤)、第三方鍵盤(功能豐富,輸入效率高)、自定義鍵盤(安全性高,有一定開發(fā)成本)。



從可提供類型看上,iOS一共提供了12種的鍵盤類型:


其中8種是常用的:默認(中英)鍵盤、郵件鍵盤、字符與數(shù)字鍵盤、帶小數(shù)點的數(shù)字鍵盤、存數(shù)字鍵盤、撥號鍵盤、網址鍵盤、外國產品鍵盤(如Twitter、Instagram)



剩下的4種則是這些,但我實在看不出這些鍵盤和默認(中英)鍵盤有何區(qū)別,因此將這4種獨立展示:



而Android系統(tǒng)鍵盤只提供了9種,但大部分和iOS的鍵盤類型一樣。因此需要我們在交互稿中,標明對應的鍵盤類型。



2.命令詞類型

而鍵盤命令詞的類型上,iOS提供的也很豐富,多達11種。



而安卓則少些,但基本能覆蓋所有場景了。




3.H5里的插件 


iOS自帶有‘上一項’和‘下一項’的鍵盤插件,因而在一些H5表單中可以靈活選擇上/下一個文本框或選擇器。

而Android在H5是沒有’下一項‘命令的(無論第三方還是系統(tǒng)鍵盤)。因而在H5頁面中的表單中,往往需要提供一個外部插件來輔助用戶輸入。




Part2:設計要點

盤點了鍵盤與命令詞類型后,接下來梳理一些設計要點,避免今后工作中踩坑,完善產品設計細節(jié)。



1.‘刪除‘不完全是‘清除’

鍵盤上的‘刪除’按鈕可以逐一刪除輸入結果,界面上的‘清除’icon也能做到。但二者間在特定的技術環(huán)境下,會存在交互上的差異。



一個典型的例子就是:UC瀏覽器的翻譯器。

在 已有翻譯結果 的情況下,點擊鍵盤上的‘刪除’按鈕,只能刪除文本框里的內容,對底下的翻譯結果并無影響。



而點擊界面上的‘清空’icon,能同時清除掉 文本框內容和翻譯結果。



原因在于:

在當前的技術環(huán)境下,UC瀏覽器還無法里做到‘實時翻譯’(邊輸入內容,邊顯示翻譯結果),因此無論用戶在文本框里編輯了什么內容,技術上都很難檢測到文本框里的信息,所以不會影響到底下的翻譯結果。

而’清空‘icon則不同,它就相當于界面上的一個功能入口,點擊它完全可以檢測/控制到其他內容狀態(tài)(文本框內容和翻譯結果),所以可以做出對這2者的‘清除’指令。


但若能做到‘實時翻譯’,就可以同時檢測、刪除 文本框內容和翻譯結果了。就如谷歌瀏覽器的翻譯器:




2.鍵盤可以附帶功能入口

產品設計時總有一個固有思維:一定要將某個按鈕/功能/操作放在某個界面上,因此有時會受到‘視覺布局怪異功能關系不搭’等的困惑。

遇到這種情況時,可以試著將功能和鍵盤綁定在一起,依附在鍵盤上才出現(xiàn)。讓功能和內容間的關系更加獨立開來,釋放頁面壓力。



但是有個提前:這些功能/內容盡量是和用戶的輸入行為有關聯(lián)的,不要把所有功能都添加上去。



3.注意鍵盤的遮蓋區(qū)域

在一些表單設計時,應該注意鍵盤彈出后對界面布局、用戶操作的影響


一些重要信息、操作按鈕要盡量放在鍵盤的遮蓋區(qū)外,避免用戶‘要收起鍵盤才能操作/看到’的尷尬局面。



包括手機橫屏時的走查,也要注意一下鍵盤高度對界面的影響。



4.‘隱私數(shù)據(jù)’盡量用隨機鍵盤

對于個人財產、身份信息等敏感數(shù)據(jù)的輸入時,用戶對該類型信息的重視程度,明顯高于其他類型的信息輸入。

所以產品設計時可優(yōu)先考慮 ‘自定義隨機鍵盤’(指鍵盤上的字母/數(shù)字等隨機排布),以保護用戶財務和隱私安全。

如中國銀行的支付密碼:



騰訊各大樓下的訪客機也是采用隨機鍵盤,以保護所有訪客的預約隱私。




5.命令按鈕位置的不同

在手機鍵盤里輸入文字時,iOS由于系統(tǒng)的限制,對文字的發(fā)送指令只能在鍵盤上來完成,因此iOS用戶的交互操作都全部集中在鍵盤右下角。



而Android端就靈活很多,不僅可以在鍵盤上執(zhí)行發(fā)送指令,也可以在輸入欄/搜索欄周邊新增操作入口。



即使大部分產品都這么做,但還是有部分產品做到了‘兩端對齊’,如網易郵箱:



更多Android與iOS的交互差異,可看這里



6.預判用戶的行為

用戶行為的預判,指的是當我們明確知道用戶目的、能推測出用戶下一步操作時,可以做一些減少用戶操作步驟、提升輸入效率的設計,如:


·自動調起鍵盤

在一些表單輸入的流程中,當能預知到用戶的下一步操作時,完全可以幫助用戶自動調起鍵盤的(尤其是需要跳轉頁面才能輸入的表單)。




·調起對應的鍵盤類型

這個點無需多講,當明確知道表單輸入所需的文本類型中文/英文/數(shù)字/郵箱/網址等,需調起相對應的鍵盤類型。




·短信驗證碼的調取

在短信驗證碼的表單設計時,可以利用系統(tǒng)的‘短信權限’自動輸入驗證碼,減少用戶的操作步驟。

iOS:只能將驗證碼調取在鍵盤上,點擊自動復制粘貼。
Android:可以將驗證碼自動粘貼在文本框里,且自動跳轉頁面。



前提是:產品已獲得手機的短信權限,否則很難調取到驗證碼信息。


·更準確的命令詞

鍵盤上的命令詞,在交互上的固定認知是:點了就能看到想要的內容。


就如微信的搜索,用戶的預期和鍵盤上的命令詞完全是一致的,用戶能知道點擊會出現(xiàn)什么樣的內容。



但在視覺上,不恰當?shù)拿钤~容易讓人產生歧義、誤解,甚至干擾接下來的操作。


如網易郵箱登錄的第一個表單,鍵盤上對應了‘下一步’命令詞,用戶知道可以快速切換到第二個表單。

但在第二個表單時,還是‘下一步’命令詞 是不是會讓人費解??



畢竟該處是表單輸入的交互終點,用‘前往(Go)、登錄(Join)’這些命令詞是不是更準確些呢?


因此日常中,我們需要對命令詞有更深的理解,方便給予用戶更準確的引導。






Part3:有意思的交互

最后盤點一下,在一些第三方和系統(tǒng)自帶的鍵盤上,都有哪些有意思的交互細節(jié)?啟發(fā)一下產品設計時的腦洞。



1.更準確地移動光標

在輸入過程中,想將’光標‘移動在某個文字附近是一件比較麻煩的事,尤其是在小屏幕手機里。

但iOS手機有3D touch功能,不少產品都會通過‘重按鍵盤’的方式來控制光標的移動。如iOS系統(tǒng)鍵盤、百度輸入法和訊飛輸入法:



但是Android手機可沒有3D touch,如何解決這個問題?

典型的例子還是UC瀏覽器,采用一個‘滑塊組件’來控制光標的移動。不管Android和iOS端,都能有效地提升輸入效率和體驗。



2.長按的彩蛋

除了長按鍵盤外可以移動光標外,在一些第三方鍵盤上也隱藏了‘長按’的彩蛋,如:

·百度輸入法:
長按可以持續(xù)選擇表情,還有表情飄出效果。



·訊飛輸入法
長按可以選擇表情的顏色,但部分表情才有而已。



·搜狗輸入法:
長按可以切換至‘單手鍵盤’模式,用于操作大屏幕手機或iPad。


文章來源:UI中國

京東視覺設計案例解析

資深UI設計者

設計并不只是為了區(qū)分市場定位,在視覺上對產品做一些修修補補。設計需要從品牌自身出發(fā),設計出來的產品才能與用戶產生情感交流、為品牌而發(fā)聲,這樣的設計才能真正為品牌創(chuàng)造長尾的價值。

前陣子和朋友去看車,我們去的第一家店是沃爾沃,沃爾沃主打的品牌理念是「安全」「可靠」,當時我在沃爾沃店里看的每一輛車的外形就像從金屬盒子進化來的,棱角分明、線條硬朗,同時每個部件都相當厚實,當時我坐在車里的時候,感覺自己像是坐進了一個大保險箱,里三層外三層把我包裹起來,坐在里面特別有安全感。

我們去的另一家店是寶馬,寶馬的品牌概念主打的是「時尚」「運動」,所以寶馬車給人的感覺和沃爾沃又完全不同了。它的流線感非常明顯,而且這種流線型設計一直延伸到車內的每一個部件。印象特別深的是,車里座椅的荔枝皮紋和我們常見的品皮質特別相似,讓我感覺自己像是坐進一個時尚的愛馬仕箱包里。

其實無論是工業(yè)設計,還是我們的用戶界面設計,好的設計給用戶的感受與品牌理念是相契合的。設計中的每一個細節(jié)都是圍繞品牌自身而展開,設計出來的產品才能夠成為品牌的具象化延伸,與用戶產生情感交流的同時也會讓用戶更加忠誠于我們的品牌。具體怎么做?這需要我們運用統(tǒng)一的設計語言來完成。

什么是設計語言?從設計的層面理解,當你看到一組功能與形式相互融合,向你訴說其特色與優(yōu)點的產品,從而喚起你的情感反應時,你正在體驗的就是設計語言。簡單講,當你的品牌運用設計語言的時候,你的產品會跟人說話:會告訴人們它能做什么,怎么做,以及你的品牌是個什么樣的品牌。而這個設計語言也將會從前期的風格設定到后期的設計執(zhí)行,始終貫穿在我們整個產品設計的流程當中。

首先從一開始的風格設定,比如每次我們設計師接到一個 brief 都會先做視覺推導。但是我之前的視覺推導是這樣的:比如現(xiàn)在為一個類似拼多多的產品做設計,然后搜集了一圈競品的界面,發(fā)現(xiàn)拼多多、聚劃算、淘寶特價都是這種線框的、扁平的設計風格,所以最后推導的結論就是——因為我們拼購面向的用戶群體是低消費人群,而競品的設計風格是 xxxx 的,所以我們的用戶偏愛這種 xxxx 設計風格,所以我們需要用這種風格去設計我們的頁面。

搜狐總監(jiān)總結的競品分析方法:

其實這是一種循環(huán)論證,并不能推導出真正有價值的內容。就像你問一個胖子「你為什么這么胖呀」,胖子說「因為我吃得多」,你又問「為什么要吃這么多呀」,胖子又說「因為我胖,所以需要吃多點」。

競品分析雖說也是一種前期設計調研的方法,但如果我們的設計只依賴于參考其他人怎么做,最后我們設計出來的產品不僅沒辦法向人們表達一個完整的品牌理念,而且我們的設計跟其他競品看起來很相似,失去了自己的特點與優(yōu)勢。

所以,在我們設定產品的設計風格的時候就需要運用統(tǒng)一的設計語言,產出能夠表達我們品牌特質的設計。那具體怎么做?這里涉及 2 個關鍵點,一個是如何找到你的品牌特質,另一個是如何針對這個品牌特質找到對應的設計語言。

元素 —— 圍繞品牌特質

首先,想要找到我們的品牌特質,我們可以從一個很有意思的原型中得到啟發(fā)。如果想讓我們的品牌真正能夠影響用戶,讓用戶為我們的品牌買單,我們的品牌就需要基于用戶內心最深層次的需求,明白用戶買單的動機在哪里。這時候我們再對應這些深層次的動機和需求做出設計,效果自然會事半功倍。那么如何能把品牌和用戶的動機需求連接起來呢?我們可以借助心理學家榮格的原型理論來一一對應。

榮格的原型連接了人們最深層次的動機和感覺體驗,表達了人們的基本需求,最重要的是他將這些需求都具像化為一個個角色。所以我們可以從中找到自己品牌的角色,并且在往后的發(fā)展中根據(jù)這個角色設定我們的品牌特質和設計語言,進而與用戶建立根深蒂固的聯(lián)系(相當于為我們的品牌打造一個「人設」)。我們先看看榮格的原型具體有哪些:

1. 開拓者

我們也有稱之為探求者、朝圣者,它是敢于冒險的、首創(chuàng)的、獨立的、不墨守成規(guī)的,更多的尋求自我實現(xiàn)和改變,擁有自由的價值觀、自給自足的。開拓者通常會在未知的領域,開創(chuàng)新的路徑。同時是個驅動力很強的非常有個性的人,能夠忍受探索新路上形單影只的孤獨。屬于這種角色設定的品牌比如有星巴克、路虎都是。

2. 守護者

守護者通常是說無私的、有同情心的、仁慈的人,給弱勢群體提供幫助和支持的,同時具有慷慨大方、自我奉獻的精神。守護者更多立志于他人的安危和福利,像這種角色的品牌稍微少點,通常是一些救濟會、慈善組織等等。

3. 愛人

愛人相關的特點像熱情的、美麗的、感性的尋求真愛和愉悅,追求愛的價值觀和親密關系。愛人通常是通過給予和獲得愛的強烈愿望所驅動的,這個不局限于愛情,友誼也包含在內,主要是意味著情感,所以一般是香水或者化妝品品牌都是運用這個原型角色。就像 dior,當然還有巧克力費列羅等等。

4. 魔術師

我們知道魔術師的形象通常是愛惡作劇的、滑稽的,有時候能夠跨界,打破禁忌,并且自身帶有樂趣,善于改變的。魔術師通常渴望樂趣,從單調的生活中解脫出來,敢于打破禁忌,質疑不可能的事物。這種角色設定的品牌我們可以很快想到那個愛玩有趣、經??缃绾献鞯陌偈驴蓸?。

5. 創(chuàng)造者

創(chuàng)造者更強調藝術感、想象力、創(chuàng)新性,以及自我表現(xiàn)的價值觀和美感上的愉悅性。創(chuàng)造者通過精心制作用來表現(xiàn)自我的事物,讓人們耳目一新從而得到認可。像這種強調創(chuàng)造力的品牌比如樂高,用有限的積木組合、創(chuàng)造出無限種可能。

6. 反叛者

反叛者也可以說是不法之徒、外來者,這種角色通常是具有變革性的、反常的、打破常規(guī)的,表達一種價值觀的解放。反叛者通常存在于社會邊緣的,被大部分社會群體看成局外人甚至異類的角色,我們也可以看成是亞文化的一種轉變。像這種主打標新立異、反常規(guī)的品牌,最著名的就是哈雷。

7. 魔法師

前面我們提到了魔術師,那么魔法師相對于魔術師而言,會帶有更多的非現(xiàn)實的想象,精神上的超凡魅力,帶來轉變的、形而上的意識的擴張。通俗地說,是帶有更多迷信元素的。但是最重要的是,魔法師趨向于駕馭各種能量和環(huán)境,進而給人們帶來身體上以及精神上的轉變。同樣,像這種強調 magic 的品牌我們第一個可以想到迪士尼,典型的魔法世界。

8. 智者

我們也可以稱之為「圣人」,智者通常是一種富有哲理性的、知識淵博的形象,忠于追求真理、樂于分享知識,也是智慧的代名詞。智者經常被當成真理的捍衛(wèi)者以及智慧的來源,為人們指明方向,幫助大家前進的代表。這種角色設定適用于一些知識輸出的品牌,比如哈佛大學、金融時報等等。

9. 天真

這是 11 個原型中唯一一個形容詞而不是角色名詞,它代表著信任、純潔、健康樂觀,有希望的、誠實善良并且擁有簡單的快樂。天真代表著樂觀主義,不管處境如何都能保持希望和信仰,更像是紛雜世俗中的一片凈土或者是一個烏托邦世界。而像這種原型設定一樣傳達樂觀、希望、天真的品牌有麥當勞、可口可樂等等。

10. 統(tǒng)治者

統(tǒng)治者象征著權威、控制、至高無上,同時也有承擔、效率、和諧的屬性。統(tǒng)治者被得到和控制權利的欲望所驅動,通過對事物的掌控來防治混亂發(fā)生。同時也是一種責任承擔的表現(xiàn),以有組織的的方式來完成義務。屬于這種角色設定的品牌比如有 IBM、花旗銀行等等。

11. 英雄

每個人心目中的英雄不盡相似,但是他們的共性都是勇敢的、有原則的,勇于克服障礙,同時敢于接受挑戰(zhàn)、伸張正義,面對逆境的時候堅韌不拔。這種角色設定的品牌比如強調挑戰(zhàn)、正義、勇敢的耐克、聯(lián)邦快遞等等。

總而言之,原型是將我們用戶內心最深層次的需求,具象化成一個角色,我們的品牌對應上這些角色,相當于對應上了我們用戶最深層次的需求,為我們品牌和用戶產生情感交流打下基礎。同時,它可以為我們設計師想為品牌找到對應的設計風格的時候,提供更多維度的靈感。而這之后的過程,就涉及到剛才提到的第二個關鍵點,如何為我們的品牌找到對應的設計語言?

我們從前面的心理原型中了解到品牌的角色設定之后,圍繞這個角色將會有一系列的關鍵詞去描繪這個角色的特質。我們將這些抽象的、描繪品牌特質的關鍵詞具像化,則可以得到描繪品牌自身的設計元素。具體我們可以借助一個圖形四象限來完成:

我們將圖形的基本構成(點、線、面)作為我們的坐標延伸——寬窄曲直,用這四個屬性我們可以組合出非常多不同形態(tài)的圖形元素。比如說,我們用「寬+曲」組合出來的圖形可以是:實心的圓形、波浪曲線等等;再比如說我們用「窄+直」可以組合出:細直線、帶有直角邊的矩形等等。

同時,在圖形屬性的坐標上,我們還需要延展出一些帶有這種屬性的事物或印象。比如,生活中帶有曲線的事物,像有花瓣、棉絮等等,這些事物給人的印象是柔和、溫暖的表現(xiàn);而直線的事物,我們聯(lián)想一下生活中的帶有直角的事物,比如像玻璃、霓虹燈管等等,這些表現(xiàn)前衛(wèi)、鋒芒畢露的事物。

像上面綠色部分的認知印象,針對每一個維度可以聯(lián)想出很多關鍵詞與事物,那么在我們延展出更加詳細的四象限之后,這時候可以再次拿出,我們前面說到的,原型角色的關鍵詞,再和剛才的圖形四象限進行比對,利用象限中的圖形基本屬性,來組合出屬于我們品牌的設計元素。具體怎么做,我舉一個京東直播改版的案例。

首先基于京東品牌特質(原型設定是英雄),圍繞英雄這一個原型我們會有很多關鍵詞去形容它,比如敢于挑戰(zhàn)、堅韌不拔等等。不過,京東直播作為京東 App 的主要欄目,更希望吸引更多的年輕人以及女性群體的參與,所以在京東直播里,我們表現(xiàn)的是更加年輕、女性向的英雄——驚奇隊長,一位自信、勇敢挑戰(zhàn)的女英雄形象。因為像人在不同場合下都會有不同的表現(xiàn),對于品牌來說也是如此,我們設計師也需要根據(jù)不同的場景或者子產品的需求,基于原型的核心理念再做出適應性的設計,讓我們設計的品牌更像一個生命體,而不是一成不變的事物。

那么我們圍繞年輕、女性、自信這個主題再腦暴出更多相關的關鍵詞。比如具象的可以代表女性的事物:口紅、高跟鞋;比如一些抽象的內容,我們可以把他們具像化,比如年輕的「活力」,我們可以用泡泡、花朵來表現(xiàn),女性的「優(yōu)雅」可以用香水、絲帶表現(xiàn),英雄的「自信勇敢」用笑容表現(xiàn)。

不過,我們知道用戶界面設計相對于平面設計的海報、插畫而言,更重要的是對產品信息功能的輔助,所以這里的設計元素運用會更加克制,這意味著需要我們回歸到更基礎的層面。所以我們需要從剛才的具象事物(比如花朵、笑容)中提取出他們的基礎屬性,比如花瓣是圓弧形的、片狀的,笑容是向上的曲線。同時借助圖形四象限,用「寬+曲」的手法來表達我們的設計元素(年輕、女性向在第二象限,對應的寬+曲屬性)。在后期設計過程中,融入這幾個元素再作出界面設計。

當然,在整個設計流程中,設計語言的設定并不單單包含元素這一部分,還包括顏色、框架、布局等,各個方面的考量缺一不可。

顏色 —— 相對統(tǒng)一而非絕對一致

為什么是相對統(tǒng)一而非絕對一致?因為人們對大部分顏色的認知其實是來自于自身的行為,受到心理、環(huán)境、文化等背景因素的影響,更多是一種個體的主觀感受。比如同樣的紅色,在中國是吉祥喜慶的代表,在國外普遍認為危險警告的顏色。比如黑色,在大部分年輕人眼里會認為是酷的時尚的顏色,而相對年長傳統(tǒng)的人則更多會覺得是邪惡、忌諱的顏色。所以我們并不需要過分強調建立絕對一致的色彩規(guī)則,這樣也能使我們設計的品牌更像是一個有靈性的生物,而不僅僅是一個僵硬的組織。

比如今年的京東 618 項目,時間跨度長達 30 天,活動頁面覆蓋上千個,設計師不可能一個個去指定顏色規(guī)范、或者讓同一個顏色適用于所有頁面,所以需要設定的只有色彩感覺和表現(xiàn)手法,這種統(tǒng)一的大方向。所以我們可以看到這些在 618 期間的設計,雖然不盡相同但能讓人清楚的感知到,這是來自同一個生態(tài)下的主題,并不會因為顏色不同就無法識別。

雖然人們對大部分顏色的認知來自于心理的主觀感受,但還有對另一部分的顏色的認知是來自于人們的生理反應。而這一部分,才是我們在設計的時候需要注意的,關于造成人們「感知過強」和「感知過弱」的問題。

1. 感知過強 —— 顏色對抗通道

簡單講,就是相當于我們設計常說的——對比色,雖然我們知道對比色可以給用戶帶來視覺刺激,但是并不建議在設計中大面積的、長期的使用(紅綠或黃藍對比色),為什么呢?

因為我們所說的顏色,其實是人眼對頻率、光的波長的感知,就像我們耳朵聽的音高或一個音符時所感知的聲音的原理一樣。下圖是人們視網膜三類視錐細胞對光的敏感度,以及人造紅、綠、藍色光感受器對光的敏感度。我們可以看到,低頻視錐(紅線)信號是紅色和黃色,中頻視錐信號是綠色,高頻則對應藍色。而我們設計中常說的對比色,其實就是通過這些視錐細胞的低、中、高頻信號的極值相減,才得來的顏色對抗組。所以這種通過對視錐細胞兩極的強烈刺激才得到的對比色,長期使用下會讓人產生疲勞甚至煩躁的情緒,而在這種不穩(wěn)定的情緒下,用戶非常容易產生誤操作,甚至最終遷怒于你的產品不再使用。

所以我們作為設計師可以運用一些方法來盡量控制對人眼的最極端的刺激,比如通過減少對抗色的面積,或者通過將對抗色組中的一個顏色用它的近色替換,等等。

2. 感知過弱 —— 色域跨度

除了以上,讓我們感知過強的顏色對抗通道,另一個需要注意的顏色問題就是,讓人們感知過弱的色域跨度。我們有時候會遇到一個問題就是,按鈕上的文字和按鈕的顏色融在一起,導致按鈕文字看不清。

這個問題其實就是兩個顏色的色域跨度過小導致的,首先我們用 H(色相)S(飽和度)B(明度)的數(shù)值來劃分色域(如下圖)。在統(tǒng)一H(色相)值的情況下,規(guī)定了 10 個標準的S(飽和度)、B(亮度)值,以 10 為單位作為一個跨度。兩種顏色在這個色域中,至少要相差 5個跨度,用戶才能有效感知到兩種顏色的差異。

比如下圖中的藍色背景色值是 60,那么放置在這個背景中的文字 A,至少要跟這個 60  的位置相差 5 個跨度,也就是 10 這個位置。如果文字A 的色值只有 30,與背景色的 60 跨度小于 5,那么文字 A 在這個背景上會難以識別。以此類推,深色模式中(如下圖)這個背景色值 100,那么在這個背景上的文字 A 色值,最多不能超過 50。

以上關于顏色對抗通道和色域跨度的問題,就是我們需要了解的一些顏色運用中的邊界,并在這個邊界以內讓設計保持最大的靈活度。所以對于顏色,我們需要強調的是相對統(tǒng)一的邊界極值,而不是絕對一致的色值。

如果我們把前面說的設計元素和顏色看作品牌的皮膚,那么視覺框架則是品牌的骨骼。如果想讓我們的品牌成為一個能夠真正影響用戶的存在,不僅要有好看的皮囊——在設計元素和顏色上延續(xù)品牌基因,還要有強大的內心——視覺框架要能足夠支撐起我們品牌的身軀。

框架 —— 基于階段價值訴求

視覺框架包括了層級和布局,我們需要在設計的過程中,加入對產品階段和品牌價值的思考。因為就像人一樣,處于不同階段的人追求的東西會有所差異。同樣的對于品牌也是如此,處于不同產品階段會有不同的需求,相應的品牌價值點也會有所差別。所以如果想讓設計的視覺框架能夠足以撐起品牌,在這其中將會涉及 2 個關鍵點:如何定位產品階段和品牌價值,以及如何圍繞產品階段與品牌價值點設計對應的視覺框架。

首先是定位我們的產品階段和品牌價值,我們可以通過對照經濟價值系統(tǒng)(如下圖):產品的階段分為初級產品、產品、服務和體驗這 4 個階段。

拿京東舉個例子,如果我們位于初級產品階段,我們的平臺就是這樣的(如下圖):展示出所有商品信息,用戶需要根據(jù)信息聯(lián)系商品的供應商,去和供應商進行交易。那么在這個階段的時候,品牌的核心價值在于對商品信息展現(xiàn)的完整性、全面性,只要這個平臺能夠覆蓋足夠多的商品,并展示完整的商品信息,這個階段的目標就達到了;

如果我們位于產品階段,我們會對商品進行分類,并在平臺上提供統(tǒng)一的購買渠道。相應的,這個是以后的品牌價值在于,平臺能夠對商品進行精準分類或者實現(xiàn)統(tǒng)一的購買渠道功能,讓用戶能夠在平臺上買到商品;

而當我們位于服務階段,我們的平臺不僅可以購買商品,我們還會提供售前售后的服務,對應不同的客戶群體推薦不同的商品,或者提供定制化的服務等等。平臺除了實現(xiàn)交易功能,需要提高品牌的競爭力,在競品之間形成差異化,為人們提供一系列附加價值的服務,吸引更多用戶在我們平臺上下單才是目標;

而如果我們位于體驗階段,我們可以從視、聽、味、嗅、觸覺給用戶帶來一系列的情感反應,為每個個體營造不同的回憶與感受。讓用戶與品牌產生情感上的互動,在更深層次上影響用戶認知并形成堅固的情感紐帶,讓用戶忠于我們的品牌才是這個階段的目標。

正因為不同的產品階段,對應的品牌價值與目標不同,我們才需要針對產品階段,為品牌設計合適的視覺框架,到后期設計出來的產品才能更貼合地為品牌發(fā)聲。像今年京東 app 改版項目,在接到這個 brief 之后,首先當然會先看看當時版本存在的問題,下圖為當時京東 7.0 版本。

當時團隊逐一列出了 7.0 版本存在的幾個主要問題:

1. 品牌識別度低

我們可以發(fā)現(xiàn)在這個界面里很難發(fā)現(xiàn)京東的品牌元素,就算現(xiàn)在換一個品牌同樣這個界面也適用;

2. 業(yè)務分發(fā)局限

這個版本里的商品坑位是固定的,業(yè)務展現(xiàn)的數(shù)量和形式是局限的;

3. 運營維護成本高

banner 模塊采用通欄而且上下漸變的樣式,這需要商家制作運營圖片的時候,將主要內容嚴格控制在我們的限制區(qū)域內,這同時也增加了我們運營審核的工作量;

4. 樓層過長、轉化率低

在 7.0 版本中,中間的樓層頻道長達 7 屏,同質化的內容導致平臺商品的轉化率不高;

5. 促銷信息干擾

界面的促銷信息讓用戶眼花繚亂,難以讓用戶快速找到自己想要的商品;

6. 個性化感知不足

電商平臺內容形式趨向單一化,沒有太多創(chuàng)新的表現(xiàn)。

有了這些具體的問題項,設計師們開始進行針對性地視覺框架設計。比如,針對個性化感知不足的問題,我們希望重新設計百寶箱區(qū)域,打破常見的圓底 icon 的樣式,每個圖標的邊框都是不規(guī)則的,讓整個區(qū)域更有表現(xiàn)力,同時與其他電商平臺的界面形成差異化。再比如,針對促銷信息干擾的問題,我們希望簡化原本頻道入口的信息,將原本好幾個 sku 信息對應同 1 個入口,優(yōu)化為單個 sku 與單個入口一一對應,讓用戶保持專注力快速找到自己想要的頻道入口。

諸如此類,當時我們?yōu)檫@幾個問題延展出許多設計上的解決方案,輸出了不少有創(chuàng)新性的視覺稿。但是隨著設計工作越往后進行,我們發(fā)現(xiàn)手中的設計并不能很好地解決,品牌在當前階段中面臨的實際問題。

因為在前期框架設計的整個過程中,我們沒有把品牌定位這一因素考慮進去,我們發(fā)現(xiàn)舊版本的問題,埋著頭只想把這些問題都解決了,卻忘記抬起頭看看我們的品牌現(xiàn)在在哪。我們前面說過,對照經濟價值系統(tǒng),京東目前主要處于服務階段,還在逐漸邁向體驗階段的進程中。

而處于這個階段的京東,外部環(huán)境是電商平臺的逐漸趨同化;內部環(huán)境是業(yè)務體量龐大,同時產品仍有上升空間。所以我們的階段目標就是需要加深用戶對品牌的認知,業(yè)務內容需要更加具備兼容性、延展性,同時需要提高產品的業(yè)務分發(fā)能力。

結合這個階段性目標,我們可以從舊版本存在的問題中,發(fā)現(xiàn)這 4 個問題才是當前優(yōu)先級最高的、需要在當前階段中解決的內容。所以基于篩選后的 4 個問題,我們開始將設計往回收,從視覺框架上更多聚焦于這 4 個問題的優(yōu)化。

比如針對業(yè)務分發(fā)局限性的問題,對首頁下拉區(qū)域的布局進行優(yōu)化:下拉刷新除了常規(guī)的刷新狀態(tài)外,在營銷活動期間用戶可下拉跳轉至活動頁面。我們將下拉路徑縮短 30%,共享元素空間兼容更多的業(yè)務內容,充分利用首焦區(qū)域豐富業(yè)務的展現(xiàn)形式。

比如針對品牌識別度的問題,將首頁頭部區(qū)域的層級進行優(yōu)化:在京東品牌形象 Joy 中提煉出微笑曲線,將微笑弧度應用在頭部的背景輪廓上,并且在整個頁面中統(tǒng)一植入品牌色京東紅,同時在當前我們的品牌尚未成熟的階段,直接使用京東 logo 強化用戶對品牌的感知度和記憶點。

比如針對運營維護成本高的問題,還記得前面說的我們一開始做的百寶箱的設計么,雖然那種設計是更具有差異化和創(chuàng)新性,但是目前產品量級大、業(yè)務入口多,而且這一區(qū)域涉及合作商家自己提供的素材露出,如果沒有統(tǒng)一的外框與規(guī)范的內容,運營維護成本是相當高的。所以我們保留了 icon 外框,同時規(guī)范每個框中只居中展示一個對應的圖形,不能包含文字等其他元素。

最終我們可以看到,改版后的京東 app 無論是在品牌、業(yè)務層面,還是在多種復雜的運營場景中,都能實現(xiàn)作為平臺的兼容性和延展性。所以,在視覺框架的時候需要預先考慮產品階段,針對不同階段需求作出相應的設計側重,讓設計出來的產品能夠更加貼合品牌本身。

經過剛才的推導和框架設定,我們對眼前要做的產品設計風格、視覺框架已經確定的七七八八,界面的形態(tài)也初具雛形了。接下來要做的設計執(zhí)行階段就是我們設計師的魔法時刻,相信每位設計師都有自己的方式和能力讓我們的產品變得更優(yōu)美,所以關于這部分的內容暫不在此贅述。

通過以上章節(jié)我們了解到,只有從品牌自身出發(fā),設計出來的產品才能在每一個方面都延續(xù)品牌基因、展現(xiàn)出設計的整體性。一方面滿足品牌價值需求為品牌發(fā)聲,另一方面將用戶的所聞、所見、所感打造成一個特別的情感反應,讓用戶更長久的忠于我們的品牌。

不過,如果我們想要創(chuàng)造出能深化品牌基因的產品,我們在用戶方面也要投入和品牌方面同樣多的關注。因為不僅要看產品的外觀界面,還要看產品給用戶的感覺、使用方式和效果。比如用戶因為什么才被你的產品吸引,用戶會從中得到什么,你的產品能帶給用戶什么感受,用戶如何才能為你的產品發(fā)生實際行動,等等。正因為我們所做的一切,都應該對品牌產生支撐作用。所以不僅僅是品牌能夠識別和定義我們的產品,用戶的認知體驗也應該成為我們設計考量的一部分。究竟怎樣做,才能讓我們的設計能夠有效的影響用戶、讓用戶為我們的品牌買單呢?

文章來源:優(yōu)設

京東首款品牌定制字體!「京東朗正體」設計過程全紀錄

資深UI設計者

京東推出品牌字體的原因

Type defines type. 在英文中,單詞 Type 包含兩個含義,文字和類型。這從某個角度說明了字體對于品牌的意義。一種字體能影響甚至決定人們對于這個品牌風格的認知。隨著產品使用場景的不斷拓寬,一個品牌的呈現(xiàn)已經不再局限于一個 LOGO 那么簡單。

品牌可以通過 LOGO、品牌色、IP 形象、字體等多種方式與受眾構建聯(lián)系。根據(jù)權威機構 Salesforce 今年 4 月的調查,75% 的消費者期望在與品牌互動時獲得一種持續(xù)性的、連貫的體驗。

縱觀京東現(xiàn)在的品牌光譜,可以發(fā)現(xiàn),之前我們在字體方面的確是處于缺位的狀態(tài)。而字體作為一個分布廣泛的媒介,必將成為連通全部潛在品牌觸點的重要工具。

因此,京東朗正體的推出,將會與我們現(xiàn)有的資源一起,全面提升京東的品牌體驗的連貫性,并有利于構建新的品牌生態(tài)。

神秘組織,自給自足的艱難探索

京東朗正體其實脫胎于京東內部設計團隊所稱的「京東字體」。與很多品牌(IBM、奧美)相似,我們的品牌字體也是從我們的 LOGO 文字中延伸而來。

一開始,我們也是邊學邊做,通過已有的一些基礎字體設計知識,從 LOGO 里寥寥無幾的筆畫中總結了一些筆畫規(guī)律,比如橫細、豎粗、點平、銳折等,然后將其應用到各個部門提過來的做字需求中。另外有時候也需要對其他部門提交的文字 LOGO 進行審核。

△ 這個神秘組織就是我本人

但是漸漸的,我們開始感到力不從心。一方面是隨著京東業(yè)務不斷擴充,希望設計京東字體作為 LOGO 的需求越來越多。使用京東字體作為標志,具有強品牌背書的優(yōu)點,而且相比專門設計一個圖形 LOGO 乃至一套 VI 體系,使用京東字體更加節(jié)省時間,具備更高的推廣效益。但僅靠一個設計師來對接整個集團眾多部門的做字需求,還是有點不堪重負。

△ 源源不斷的做字需求

另一方面是我們意識到,我們根據(jù) LOGO 字體制定的造字規(guī)則,其實非常模糊且局限,這也是我們缺乏字庫設計的經驗造成的。而這樣的漏洞使得我們在實際的應用中遇到了問題。比如一開始我們簡單地將撇的收筆都規(guī)定為縱切,但是在某些字中,使用橫切收筆,視覺上卻顯得更為舒適。

后來我們在與專業(yè)的字體設計師溝通后了解到,這其實是因為在漢字中,單是一個撇筆就分為左上撇,斜撇,彎撇,直撇這么多種類型,而簡單地將一個規(guī)則應用到所有的撇筆中,會造成某些字結構上的失衡。

交棒方正,專業(yè)化產出

就在京東字體的造字工程陷入困局時,市場部剛好找到我們,提出了與專業(yè)字庫公司合作定制京東品牌字體的計劃,從而推進品牌升級。我們與市場部一拍即合,確定了與方正的合作。于是,整個字庫的創(chuàng)作主力轉到了方正身上,而我們主要承擔掌舵的角色,整個字庫的制作也開始向專業(yè)化、規(guī)?;?、系統(tǒng)化發(fā)展,生產速度更是呈現(xiàn)出爆炸性增長。

首先,我們與方正的老師確定了字體整體的基調,希望仍然保持簡潔、直接、力量的感覺。對已有材料進行分析后,方正團隊重新調整了字體的筆畫、字面、重心和結構等方面,特別是對筆畫粗細比例和規(guī)則進行了規(guī)范化。

可以看到,新版字體的縱橫筆畫比例從 20:11 縮小到 3:2 后,字面布白變得更均勻,辨識度也顯著提高。

同時,方正團隊對筆畫規(guī)則的重新分類,也解決了我們之前碰到的難題。例如規(guī)定:點、撇、捺及鏡像點撇的收筆采用橫切,較為扁平的撇捺和鏡像撇捺的收筆則采用縱切。

明確規(guī)則后,方正團隊先小規(guī)模試點,做了 130 個字,這些字涵蓋了京東常用字以及中文里的主要偏旁部首和部分獨特字形。同時,方正也邀請我們?yōu)檫@些字提供意見。

由此,我們開始了字體找茬大賽。我們把這些字放大,打印后貼在墻上細細端詳。近看,遠看,坐著看,站著看,跪著看,走著看,調動起我們體內最原始的設計直覺,試圖找出這些字里不自然的地方,然后貼上便利貼標記。后來我們甚至走火入魔,看字不是字。

△ 看字看到失智的同事

蹺蹺板兩邊——專業(yè)意見與業(yè)務需求

這次的項目合作,方正團隊派出了兩位重量級的設計專家,方正字庫的設計總監(jiān)仇寅老師與設計副總監(jiān)汪文老師。(如此深厚沉淀的字體設計資歷讓我們忍不住就直呼老師)

一開始,我們還擔心在項目過程中會比較被動,無法很好地參與到字型設計的討論中。畢竟相比之下,我們簡直是字體小白,缺乏系統(tǒng)的字體設計知識與建設大型字庫的經驗。但在合作的過程中,我們慢慢能體會到,從某個角度來說設計還是相通的。

在一期和二期字樣中,我們都根據(jù)「設計直覺」,對一些基本結構提了調整意見,甚至直接上手做了修改的嘗試,因為感覺這樣討論起來也比較直觀。這也的確得到了方正老師們的認可與呼應,其中還包括一些比較重要的偏旁部首。

比如豎心旁、火字旁的兩點,老師們一開始都做得特別纖細。這可能是因為點筆在初始的調性設定上,就被規(guī)定從起筆到收筆都不能有弧度。老師們或許是出于字面留白的考慮做小了。但我們認為從總體來看,還是顯得過于「可愛」了點,于是將它們適當加粗,并向中心靠攏。老師也采納了我們的意見,終稿效果呈現(xiàn)上雙方都比較滿意。

確認核心字樣后,方正開始進一步快速地擴充字庫。整個字庫制作的時間雖然只有短短的 3 個月,但還是進行得比較流暢和有序的。

而這當中,還有一個無法忽略的角色,那就是市場部。市場部作為整個集團的品牌資源中繼站,長期負責承接各個部門的設計需求,對字體在業(yè)務前線的實際應用效果有很強的發(fā)言權。于是,方正和市場部,自然落在了蹺蹺板的兩邊,而我們站在中間,既要信任雙方,又要平衡好雙方的意見,推進字庫快速而高質量地產出。

這次制作間隙,剛好碰上了新板塊業(yè)務——「京東健康」的品牌發(fā)布,因此方正團隊需要臨時先制作這幾個字的標準字。在康字上,我們費了不少的功夫。

市場部認為方正給到的「康」字設計,有種不穩(wěn)固的感覺。這可能是康字右下角的捺筆過高過短造成的。這可以理解,因為涉及到京東健康的業(yè)務范圍和希望傳達的品牌調性,業(yè)務方自然希望在字體標志上體現(xiàn)出穩(wěn)定、安全的感覺。

但業(yè)務方提過來的建議,從設計上看還有欠缺,與其他字體也不成體系。因此我們在此基礎上為方正老師提供了一些修改方向的建議,也就是讓折捺更貼近地面,左邊的兩點也相應做出調整適應。

方正側根據(jù)我們的意見,又做了進一步的創(chuàng)新修改。我們以設計角度和業(yè)務需求結合的角度進行挑選,認為將右邊的點和捺打散,捺筆能獲得更大的舒展空間,整個字符也「站得更穩(wěn)」,選定了方案C。這個小插曲也就順利解決了。

誰的字體?我們的字體

品牌定制字體,從名字上可以看出,似乎具有天然的專屬性,它只屬于其服務的品牌。但正如蒙納在 2020 字體設計趨勢報告所說,品牌的字體策略不應該是固定的、死板的,它更像是一個可擴展、可變化的工具,幫助我們實時重塑品牌。這意味著京東朗正體在未來仍將持續(xù)進化,更加開放。它不只是屬于京東的字體,它還是我們所有人的字體,它試圖滿足設計師、合作商家、消費者等多方的需求。

京東朗正體目前僅有一個字重,比較粗,主要適用在大型標題或標志中,還不能滿足目前眾多文字內容樣式的需要。后續(xù)我們將會制作更多字重,豐富京東朗正體的字體家族。我們也不排除京東朗正體會覆蓋更多語言的計劃。畢竟京東作為一個全球化的品牌,在各個國家的露出將會越來越多,使用字體在不同語境中保持品牌連貫性也一樣至關重要。

除此之外,可變式字體(Variable Font) 可能是我們更長遠的一個發(fā)展方向??勺兪阶煮w的特點在于其無限性,只需下載一套支持這種技術的字體,就可以直接調整字的各種外形參數(shù),包括字重、字寬、襯線、斜度等。這既能減輕字體設計師的工作,也能為使用字體的設計師提供更多可能性。同時,這也有助于消除字體在各種電子終端演繹的屏障,釋放更多品牌活力。目前我們正在與技術平臺的小伙伴溝通這一計劃的實現(xiàn)進程。

在使用范圍上,京東朗正體已經開放授權給所有合作的商家和機構。我們也希望借助品牌字體增強與合作方的聯(lián)系,讓這個品牌符號為合作伙伴提供更多展示的空間,進一步拓展品牌生態(tài)的廣度。

品牌戰(zhàn)略公司 Lippincott 的負責人提到:「在這個新的時代,字體比任何時候,都更需要也更可能統(tǒng)一人們關于品牌的體驗,并在各個渠道和載體上都實現(xiàn)無縫連接?!?

這一次,我們做京東的品牌字體,當然不是為了「趕潮流」。它立足于現(xiàn)實環(huán)境的需要。京東,根源上看是一個提供零售基礎設施服務的平臺。這個服務,既是硬件上的,比如儲存和傳送包裹,也是軟件上的,處理和分發(fā)信息。 而文字,作為信息的重要載體之一,是我們這一次嘗試為京東創(chuàng)造設計價值而抓住的發(fā)力點和機會點。

和京東朗正體一起成長的歷程,包含了我們在系統(tǒng)化字庫設計中的懵懂探索,與跨界設計師合作的思想碰撞,乃至對京東品牌字體未來發(fā)展的想象,辛酸和快樂等比混合。

讓我們期待京東朗正體的表現(xiàn)。

另外一款品牌字體「騰訊字體」也值

2020年該如何自我提升?來看設計高手的10個思考習慣

資深UI設計者

除了專業(yè)和工作,你思考過別的問題嗎?最近反思了這十個問題,分享出來與各位酷友共勉。

年關將至,越是這個時候行業(yè)的波動也比較大,設計師萌生跳槽想法、被離職風險、薪資拖欠帶來焦慮情緒、常年加班的職業(yè)病等等。也許我們在耗費心力提升專業(yè)能力的同時,是否應該思考點別的問題。

最近進行了一些反思,除了專業(yè)以外我還有哪些需要堅守的習慣和培養(yǎng)的目標。整理出最近思考的十個問題,希望與大家一起共勉。

有自己的短期目標嗎?

無論是職場新人還是行業(yè)老司機,我們不怕專業(yè)能力不足,就怕渾噩度日,漫無目標??吹竭^很多工作多年的設計師迷茫,缺少新人的工作激情,卻又不知道自己應該如何前進一步。

小時候老師總會問我們夢想是什么,卻很少有人實現(xiàn),現(xiàn)在如果問我夢想的話,我一般會說自己的短期目標是什么。你可以定一個大的目標,但是一定要拆分為短期可落地執(zhí)行的目標,階段性的驗收才能做出靈活的調整。

如果是專業(yè)層面可以梳理當前行業(yè)需要的技能樹,然后對自己的能力進行梳理,看看不足的是哪些,以此制定短期目標一個一個進行攻破。目標不一定與專業(yè)有關,也可以是生活中的興趣,比如學會游泳、看十本書、完成一次自駕游、讓自己瘦十斤、年底有錢回家~O(∩_∩)O~一切都可以成為自己的短期目標。短期目標是為了豐富自己的時間管理,也能充分的利用好階段性的時間去完成,不斷增進自信和維持這份驅動力。

能控制好時間規(guī)劃嗎?

如果你能控制好自己的時間,就是一個優(yōu)秀的設計師,時間規(guī)劃主要的難度不是制定,而是堅持,很多人都半途而廢。我從實習開始工作以來為了更好的掌控自己的時間,喜歡以日記的形式記錄當日完成的工作和接下來需要準備去執(zhí)行的事項。完成之后以勾選的方式劃掉,如果發(fā)現(xiàn)接下來沒有任務進來,會制定一些日常提升的計劃。

業(yè)余的碎片化時間根據(jù)出現(xiàn)的場景做規(guī)劃,剛工作的時候上下班地鐵時間需要 2 小時左右,通常就會安排進行閱讀,不僅可以消磨時間也增加了自己的閱讀量。如果加入一些日常練習主要的不是一天要做多少,而是能否長期堅持,通常是一天完成兩個界面就睡覺,不多做也不少做,隨著練習的堅持后面完成的時間就會越來越快。通過一些設計平臺以打卡的形式發(fā)布作品,目的就是為了有一個可以記錄自己成果展示的場景,調動起氛圍。

也可以給自己的時間規(guī)劃設定提醒,以免忘記這個時間段應該做什么,規(guī)劃不能過于密集,休息是為了放松自己,如果被規(guī)劃壓得喘不過氣,會把一個好的東西變得排斥。所以,留足一些休息的時間追劇、刷抖音、鍛煉身體、逛逛商場散散步等等,勞逸結合才能持之以恒。

能駕馭自我驅動嗎?

其實專業(yè)能力不足并不可怕,只要你想學都可以彌補不足,難的是缺少自我驅動力。三分熱度你都能有,持之以恒卻沒多少人可以做到了。要時刻反思自己堅持了曾經的那份初心了嗎?

如果自己自控意識薄弱,要刻意而為之,強迫自己按照定好的軌跡運行??梢灾贫A段性的小目標和規(guī)劃,這樣戰(zhàn)線不會拉得很長,有助于刻意堅持。可以給自己設定一些獎勵,完成目標大吃一頓、看一場電影、去一個地方旅游、買一件規(guī)劃好的商品等。如果沒有完成就要強迫自己完成才能獲得設定好的獎勵,現(xiàn)在不對自己狠一點,未來職場就會對你狠一點,進而拋棄你。

如何提高自我驅動力:

除了專業(yè)還有興趣愛好嗎?

思考一下除了專業(yè)和工作以外,你有興趣愛好嗎?如果你猶豫停頓了,希望你可以培養(yǎng)一個興趣愛好,豐富自己的精神追求。當然,這個愛好需要是陽光積極的,別把陋習當成愛好。

除了設計以外,我從小喜歡畫國畫,雖然沒有走這個方向去發(fā)展,我把它作為興趣愛好來看待,豐富自己的業(yè)余生活。作為設計師興趣愛好不一定是與設計沾邊的,我以前有個同事她是 UI 設計師,業(yè)余時間卻是某游戲欄目的專欄博主,也有專門寫旅行日記的,研究美食的等等。

培養(yǎng)興趣愛好可以讓你在工作之余放松心情,釋放壓力,沒有束縛才能釋放自己壓抑的情緒,也能更好的調整好心態(tài)。

有哪些適合設計師的興趣愛好?

作息時間是否合理?

年輕的自己從來不擔心這個問題,只有當發(fā)現(xiàn)自己身體透支過度的時候才會有所意識。作為設計師來說加班似乎已經家常便飯,不過如果加班透支了自己的身體也要進行反思了,畢竟健康是屬于自己的。

雖然沒辦法立馬做到早睡早起,但是可以逐步把休息時間和起床時間提前,早點起來鍛煉一下身體、看半小時書也不錯。好的身體才能實現(xiàn)更多價值,我最近都在盡量控制晚上十一點前睡覺,逐漸調整出更好的作息時間和習慣。

把青春和時間奉獻給了工作,別把健康也搭進去了,如果公司不注重員工的健康而一味的壓榨,不值得你為之拼命。

如何看待自己的青春流逝?

青春我們都曾有過,也都會失去,如果你正直青春期間,如何看待自己當前的經歷和奮斗的動力比較關鍵。

剛畢業(yè)的時候用一部分青春換取了職場經驗和專業(yè)進階,后來選擇創(chuàng)業(yè)也是希望把青春留給自己,為自己而奮斗。每個人都有自己的選擇,只希望你今日的努力能夠對得起未來的自己。

能肩負起自己的責任嗎?

責任感是我們每個人都需要具備的,上學期間我們習慣了在爸媽的庇護下成長,從我們步入職場的時刻,我們就要學會獨立生活。雖然你可能過著月光族的生活,一人吃飽全家不餓,也不一定盡到了自己的責任,但是總有從某一刻開始你會意識到自己的責任。

當我們在追求自己的未來的時候,也要回頭思考自己的責任,從肩負起一個小的責任開始??梢允菍胰说年P心與照顧,如果當你成家之后應該會感觸更深。今日對未來的反思與規(guī)劃是為了使自己變得更優(yōu)秀,將來有能力守護家人,實現(xiàn)自己的價值,肩負起自己的責任。

是一個有態(tài)度的設計師嗎?

作為設計師我們是商業(yè)環(huán)節(jié)中的一環(huán),隨著感官體驗的升級,設計的質量越發(fā)顯得重要。在工作中我們需要成為一個有態(tài)度的設計師,主導自己的設計使其發(fā)揮更大的價值。個人態(tài)度分為性格層面和習慣層面的態(tài)度,下面分別梳理一下。

從性格層面體現(xiàn)自己的態(tài)度:在對接需求的時候,我們不能是一只溫順的小羔羊,被人牽著走并任人宰割。要有自己的態(tài)度,敢于為自己的設計發(fā)聲,有自己堅守的原則,通過案例和經驗進行引導需求方的選擇。堅持不一定可以改變別人的選擇,但是我們做到了專業(yè)設計師的態(tài)度。

從習慣層面體現(xiàn)自己的態(tài)度:設計能力都是可以學習培養(yǎng)的,養(yǎng)成良好的習慣至關重要,對細節(jié)的態(tài)度、設計質量的態(tài)度、提案演示的態(tài)度、溝通對接的態(tài)度等等。養(yǎng)成一個好的設計習慣,就算生活中也應如此,態(tài)度可以決定你能把一件事做到何種深度,希望我們都可以成為一個有態(tài)度的設計師。

堅持總結了嗎?

優(yōu)秀的設計師總能善于總結,總結可以對自己的知識體系進行梳理和檢索,查漏補缺??偨Y個人分為兩個方向,一是對自己的經驗進行總結梳理,把經驗形成可傳遞的方法論;二是對優(yōu)秀的案例和資源進行梳理總結,把他人的優(yōu)秀方法論轉化為自己可吸收的軌跡。

有句話叫為了寫作而看書,通過輸出倒逼輸入,主動吸收的通常轉化和記憶都更強。除了專業(yè)相關的總結以外,我們也可以是一些讀書筆記、日常感悟等,鍛煉自己寫作的能力和養(yǎng)成習慣。以前我們一個學員有記錄生活感悟和寫讀書筆記的習慣,一年能堅持輸出十萬多字的隨記,這個習慣值得學習。堅持幾年后可以看出她在各方面的理解能力都非常好,也善于將自己的經驗進行總結,帶來的結果自然是得到了很多機會去更好的發(fā)揮自己的價值。

寫作與你的專業(yè)能力不一定強關聯(lián),不要以經驗不足而自我放棄,這只是一個習慣的培養(yǎng)。只有去嘗試了才知道那里不足,如何去優(yōu)化,下次應該如何寫才能更合理。希望從今天以后,你可以堅持寫作總結的習慣。

自己是否夠專業(yè)?

一切的自信和態(tài)度都是建立在自我專業(yè)的基礎上,特別是設計師,如果自身不夠專業(yè)如何說服別人。要時刻質問自己是否依然保持專業(yè)性,低姿態(tài)面對學習,時刻評估和提升自己。

不同階段關注的焦點不同,剛開始我們可能在意技能操作層面,執(zhí)行能力為第一保障。隨著工作經驗的積累,我們的關注面更綜合,有時候也會感覺學得越多發(fā)現(xiàn)自己越是什么都不會。如果在職場中一直都沒有新的知識和認知豐富自己,會逐漸變得被動,很難突破自己的瓶頸期。要保持學習的動力和日常輸出的自我驅動力,不要溫水煮青蛙,把自己陷入被動的狀態(tài)。

所以,時刻問問自己,我是否夠專業(yè)。

總結

反思自己是為了讓自己時刻保持清醒,作為設計師我們需要有態(tài)度、要自信、夠專業(yè);除了專業(yè)層面我們還需要反思更多問題,有自己的短期目標、能管理好時間、培養(yǎng)更多興趣愛好等等。不斷豐富自己的生活狀態(tài),可以帶給自己更多樂趣,把有限的時間過得更合理。

希望本文可以拋磚引玉,大家都可以反思自己面臨的問題,提升自己的綜合素質和能力。

文章來源:優(yōu)設

如何做好數(shù)據(jù)可視化設計?

資深UI設計者

本文的英文原標題是「10 Rules of Dashboard Design」,其中 Dashboard 如果翻譯成儀表盤的話,總覺得不大容易理解,所以我在這里把它翻譯為數(shù)據(jù)可視化。數(shù)據(jù)展示方面的設計,相信大家會經常用到,這篇文章有很多簡單直接,立馬就能用上的干貨,一起來學習吧!

為什么數(shù)據(jù)可視化設計非常重要?

數(shù)據(jù)可視化的目的是以一種用戶更容易理解的形式呈現(xiàn)復雜信息。

一個優(yōu)秀的數(shù)據(jù)可視化界面包含以下幾個關鍵要素:

  • 清晰:一個好的數(shù)據(jù)可視化界面一定是能夠清晰的展現(xiàn)用戶所需要的信息。當用戶看到界面內容時,應該能在 5 秒內了解到它的用途,而不是花費至少幾分鐘才能理解各個數(shù)據(jù)的含義。
  • 有意義: 一個有用的數(shù)據(jù)可視化界面上的每一條信息都應該是有意義的。這些有意義的信息能準確傳達設計師想要表達的內容。每一條數(shù)據(jù)的背后,用戶都是可以讀懂的。
  • 一致性:優(yōu)秀的數(shù)據(jù)可視化界面,會有一套非常嚴謹一致的版面。這里的一致性需要考慮到布局,結構和內容。
  • 簡單: 復雜的界面違背了數(shù)據(jù)可視化設計的初衷。如果一個信息呈現(xiàn)不夠簡單直接,那么肯定是在設計上出現(xiàn)了問題。

如何設計一個數(shù)據(jù)可視化界面?

數(shù)據(jù)可視化界面設計最重要的步驟是需要了解目標用戶是誰,能為他們提供什么價值。了解目標受眾的知識背景和理解水平能幫助你做出對他們有價值的設計。

在了解目標用戶時,有必要了解受眾感興趣的數(shù)據(jù)類型。

「專注于用戶的需求,更容易產生他們喜歡使用的結果。」

目標用戶級別可能會在一級和另一級之間變化,這是一個挑戰(zhàn)性的點。與其他任何設計項目一樣,可以細分受眾并將信息相應地分為基本內容和高級內容。

在界面中表示一組信息有多種方法,選擇正確的數(shù)據(jù)指標是設計數(shù)據(jù)可視化的另一個關鍵元素。這也與目標用戶的偏好有關,即他們希望看到什么樣的信息。

「根據(jù)需要設計數(shù)據(jù)可視化界面,為不同的業(yè)務使用不同類型的展示方式。」

下面是為目標用戶設計數(shù)據(jù)可視化界面時需要考慮的一些重要規(guī)則。

1. 區(qū)分層級

一個常見的錯誤就是設計師沒有對信息區(qū)分層級,所有的內容看起來都一樣重要。

可以嘗試使用組件的大小和位置來區(qū)分數(shù)據(jù)的層次結構。

  • 通過定義信息層級,讓用戶清楚什么是最重要的
  • 在左上角顯示更重要的信息,沿著對角線方向,信息的重要程度應該依次減弱,右下角的信息重要性最弱
  • 還可以將信息劃分為不同類別,并在不同的視圖中顯示它們

2. 簡單易懂

數(shù)據(jù)可視化的真正目的是用一種更方便理解,更簡單的形式來傳達復雜信息。

  • 不要放一些大多數(shù)用戶都難以理解的信息
  • 使用更少的列來顯示信息
  • 刪除冗余內容來減少混亂

3. 一致性

使用一致性布局設計的數(shù)據(jù)可視化界面看起來更好。

  • 為了使界面更容易閱讀,可以在信息組之間使用類似的可視化效果。
  • 把相關的信息放的更近一些
  • 對相關內容進行可視化分組

4. 臨近原則

在界面中把相近的信息放在一起可以幫助用戶快速理解。

  • 把相關的信息放的更近一些
  • 不要將相關信息分散在界面上
  • 對相關內容進行可視化分組

想更深入了解接近原則,看這篇:

5. 對齊

可視化組件元素需要在視覺上對齊,并保持視覺平衡。

  • 將可視化組件元素在視覺上進行對齊,可以將界面組織的更好
  • 嘗試將組件元素進行網格布局設計
  • 不對齊的界面會給用戶帶來糟糕的體驗

6. 留白

留白是為了讓界面有呼吸感,它使得用戶在使用你的界面時能夠有喘息的空間。

  • 當用戶查看需要的信息時,界面中的留白能夠吸引用戶的目光,提升用戶體驗。
  • 減少留白會使用戶的界面變得混亂
  • 使用留白能對信息進行可視化分組

△ 留白太少簡直就是在鼓勵你的用戶盡快離開

7. 顏色

使用有效的配色方案來吸引用戶的注意力,幫助他們輕松地瀏覽信息。

  • 仔細選擇顏色,目標是使內容易于閱讀
  • 使用大對比度來顯示背景上的視覺元素

△ 避免使用低對比度和低效的漸變

8. 字體

標準字體是可視化界面中的最佳字體,除非有特別的理由,一般不要用其他字體。

  • 使用標準字體,因為它們更容易閱讀和掃描
  • 特別和美術字體可能看起來不錯,但很難理解
  • 避免所有的大寫字母文字,因為它很難閱讀,人類的大腦需要時間來消化它。
  • 使用合適的字體大小和風格,有效地傳達信息

△ 不要使用影響可讀性的字體

9. 數(shù)字排版

顯示精度超過要求的數(shù)字使它們難以閱讀和理解。

  • 必要時使用整數(shù),因為長數(shù)字會使用戶混淆
  • 省去不必要的信息
  • 讓用戶能夠容易地比較簡單的差異細節(jié)

10. 標簽

使用能夠快速有效地向用戶傳達所需信息的標簽。

  • 避免使用帶旋轉的標簽,因為很難閱讀
  • 盡可能的使用標準的縮寫

△ 避免旋轉標簽

總結

數(shù)據(jù)可視化旨在節(jié)省時間和精力,將復雜和抽象的數(shù)據(jù)以更簡單的形式表示,目的是以用戶能夠理解的方式將關鍵信息傳達給他們,確保自己理解用戶所需,并給他們需要的信息。

文章來源:優(yōu)設

HTML 知識點總結

seo達人

一、HTML簡介

HTML 俗稱網頁,就是我們打開瀏覽器訪問任何一個網站所看到的都是由 HTML 頁面提供的(或者與 HTML 技術相關的內容提供)。



HTML 全稱為 HyperText Markup Language,被譯為超文本標記語言。所謂的超文本就是不僅只有文本內容,包括鏈接、音頻和視頻、圖像等內容。所謂標記語言,簡單來說就是元素。也就是說,HTML 提供一系列的元素來構成一個頁面中最基礎的內容。



HTML 是一種描述 Web 文檔結構和語義的語言,它由元素組成,每個元素可以有一些屬性或文本。



當你保存 HTML 文件時,既可以使用 .htm 也可以使用 .html 文件后綴。



編寫HTML代碼的工具:



記事本

sublime text

hbuilder

webstorm

vscode

pycharm – python代碼 也可以寫html代碼

二、第一張網頁

一個頁面有且只有一個根標簽是html, 元素一般包含 和 兩個元素,也就是 HTML 的頭部和主體內容。



<html>

    <head>

        <title>網頁的標題</title>

    </head>

    <body>

        <!-- 這是一個文本框 -->

        <input type="text"></input>

    </body>

</html>

1

2

3

4

5

6

7

8

9

HTML標簽:由尖括號包圍:

成對出現(xiàn): <p></p> ,即開標簽和閉標簽.

屬性: 定義在開標簽中,如input標簽中的type屬性

簡寫: 開閉標簽之間的內容是標簽體,如果標簽體為空,則可以簡寫:

注釋: 是注釋標簽

HTML文檔在瀏覽器中被解釋運行,展示的不是源碼而是渲染之后的效果

三、HTML頭部

< head > 元素包含了當前 HTML 頁面的所有頭部元素,在 < head > 元素內必須定義 < title > 元素,還可以定義 < script >、< link > 等元素。



這些 HTML 的頭部元素定義了當前頁面的標題、編碼、使用的腳本或樣式等信息。



1、title元素

< title >元素定義了當前HTML頁面的標題



<title>百度一下,你就知道</title>

1

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AGycI1jQ-1578023422160)(HTML.assets/1530668619163.png)]



2、meta元素

元素提供了 HTML 頁面的元數(shù)據(jù)(Metadata),元數(shù)據(jù)是存儲數(shù)據(jù)的信息。

通常用于設置頁面的編碼、描述、關鍵詞、作者等信息。



元素不會顯示在頁面中,但會被瀏覽器解析。

2.1 定義網頁內容的編碼格式

<meta charset="utf-8">

1

2.2 定義HTML頁面關鍵字,用于搜索引擎

<meta name="keywords" content="HTML,CSS,XML,JavaScript">

1

2.3 定義HTML頁面描述

<meta name="description" content="百知教育IT培訓,java培訓,PHP培訓,UI培訓,H5培訓,linux培訓,大數(shù)據(jù)培訓,Python人工智能,IT行業(yè)培訓領跑者,高薪就業(yè) ">

1

2.4 定義HTML頁面作者

<meta name="author" content="百知教育">

1

四、HTML主體

1、body元素

標簽定義文檔的主體。 元素包含文檔的所有內容(比如文本、超鏈接、圖像、表格和列表等等)。body元素中包含的內容(子標簽)是用戶可以看到的。

一個 HTML 文件只能存在一個 標簽。



2、HTML元素基本構成

2.1 元素類型

HTML 是標記語言,所謂標記就是指頁面中的元素(元素也可以叫做標簽)。一個完整的 HTML 頁面都是由眾多不同的元素組成的。



閉合元素:必須包含開始元素和結束元素,如果沒有結束元素會產生意料之外的錯誤。



<title>百知教育Python人工智能培訓</title>

<p>這是一個段落標簽</p>                     <!--該標簽的作用是表示一個段落,會有換行--> 

1

2

空元素:也可以叫做單元素,只需要開始元素,而不需要結束元素。



<meta name="description" content="渥瑞達Web前端培訓">



<br/>            <!-- 換行 -- >   

1

2

3





2.2 HTML屬性

屬性是設置在HTML元素中的,用于為元素添加附加信息。屬性一般都是定義在開始元素中,并且是以“名稱/值”對出現(xiàn)



 <input type="text" />   <!-- 這是一個文本框 -->



 <input type="button" value="點我" />   <!-- 這是一個按鈕 -->

1

2

3

五、HTML文本

1、標題元素

HTML 提供了 6 個標題元素,由大到小依次為 <h1> 到 <h6>



<h1>這是一級標題</h1>



<h2>這是二級標題</h2>



<h3>這是三級標題</h3>



<h4>這是四級標題</h4>



<h5>這是五級標題</h5>



<h6>這是六級標題</h6>

1

2

3

4

5

6

7

8

9

10

11

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Gpmb9nTx-1578023422163)(HTML.assets/1530670234313.png)]



2、段落

元素定義段落



: 瀏覽器會自動地在段落的前后添加空行 ```html

這是一個段落.                

1

這是另一個段落.



注意: 在html中手動換行無效<br />
<br />
3、換行<br />
元素定義的段落內容是不會自動換行的,如果換行需要使用 br 元素<br />
<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>生活賦予我們一種巨大的和無限高貴的禮品,這就是青春:充滿著力量,充滿著期待志愿,充滿著求知和斗爭的志向,充滿著希望信心和青春。<br />
<span style="white-space:pre;"> </span>&lt;br&gt;<br />
&nbsp; &nbsp; 人所缺乏的不是才干而是志向,不是成功的能力而是勤勞的意志。<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LbaNYf1L-1578023422165)(HTML.assets/1530670731312.png)]<br />
<br />
4、水平線<br />
在瀏覽器中顯示一條水平線(分隔線)效果。<br />
屬性:size=“10” color=“red” width=“100px 或者 50%” align=“l(fā)eft/right/center”<br />
<br />
10像素高 顏色 寬度 對齊方式<br />
<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>生活賦予我們一種巨大的和無限高貴的禮品,這就是青春:充滿著力量,充滿著期待志愿,充滿著求知和斗爭的志向,充滿著希望信心和青春。<br />
<span style="white-space:pre;"> </span>&lt;br&gt;<br />
<span style="white-space:pre;"> </span>&lt;hr size="1" width="100%" color="red"/&gt;<br />
<span style="white-space:pre;"> </span>人所缺乏的不是才干而是志向,不是成功的能力而是勤勞的意志。<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nK6UOf0r-1578023422166)(HTML.assets/1530671029915.png)]<br />
<br />
5、文本修飾<br />
5.1 粗體字<br />
這是一段正常未加粗的文本內容.<br />
&lt;br&gt;<br />
&lt;b&gt;這是一段加粗之后的文本內容.&lt;/b&gt;<br />
&lt;br&gt;<br />
&lt;strong&gt;粗體--著重強調&lt;/strong&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Va3GdgFK-1578023422168)(HTML.assets/1530672074778.png)]<br />
<br />
5.2 斜體字<br />
&lt;i&gt;這是一段斜體的文本內容.&lt;/i&gt;<br />
1<br />
5.3 下劃線<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>證明人:&lt;u&gt;百知教育&lt;/u&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-aJY0EaxC-1578023422169)(HTML.assets/1530671768110.png)]<br />
<br />
5.4 刪除線<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;del&gt;這是一段要被刪除的文字&lt;/del&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X4f2bCuN-1578023422172)(HTML.assets/1530671905293.png)]<br />
<br />
5.5 下標文字<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>H&lt;sub&gt;2&lt;/sub&gt;O<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-E8DEONkQ-1578023422179)(HTML.assets/1530672009385.png)]<br />
<br />
5.6 上標文字<br />
32 = 9<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NTEZhEkv-1578023422180)(HTML.assets/1530672138124.png)]<br />
<br />
5.7 小號字<br />
正常文字<br />
&lt;small&gt;小號文字&lt;/small&gt;<br />
1<br />
2<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6KckvEOc-1578023422182)(HTML.assets/1530672191397.png)]<br />
<br />
5.8 大號字<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;small&gt;小號文字&lt;/small&gt;<br />
<span style="white-space:pre;"> </span>正常文字<br />
<span style="white-space:pre;"> </span>&lt;big&gt;大號文字&lt;/big&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gCJaBbhq-1578023422184)(HTML.assets/1530672254286.png)]<br />
<br />
六、圖像與鏈接<br />
1、圖像元素<br />
&nbsp;元素引入外部圖像, 元素是空元素。<br />
<br />
1.1 src屬性<br />
<span style="white-space:pre;"> </span>src 屬性(必需),表示引入圖像的 URL 地址。<br />
<br />
&lt;img src="images/img.png"&gt;<br />
1<br />
圖像可以是本地地址,也可以是網絡地址。<br />
<br />
&lt;img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg"&gt;<br />
1<br />
1.2 圖像大小<br />
width 和 height 屬性用于設置圖像顯示的寬度和高度。<br />
<br />
&lt;img src="img.png" width="350" height="233" /&gt;<br />
1<br />
1.3 圖像定位(了解)<br />
align 屬性用于設置圖像顯示的位置。<br />
<br />
left:水平方向居左。<br />
right:水平方向居右。<br />
top:垂直方向居上。<br />
bottom:垂直方向居下。<br />
middle:居中。<br />
&lt;img src="img.png" width="350" height="233" align="right" /&gt;<br />
1<br />
1.4 alt屬性<br />
&lt;img src="abcdef.png" alt="無法加載圖片"/&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-evR6GiGo-1578023422185)(HTML.assets/1530673186561.png)]<br />
<br />
2、超鏈接<br />
2.1 用法<br />
href 屬性(必需),表示指定跳轉的 URL 地址<br />
<br />
&lt;a &gt;百知教育&lt;/a&gt;<br />
1<br />
2.2 打開方式: target 屬性<br />
元素的 target 屬性用于設置鏈接的打開方式。<br />
<br />
_blank:在新窗口打開鏈接。<br />
_self:在當前窗口打開鏈接。<br />
&lt;a  target="_blank"&gt;百知教育&lt;/a&gt;<br />
1<br />
2.3 錨點<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;a name="postion"&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp;&lt;!-- 定義錨點 --&gt;<br />
<span style="white-space:pre;"> </span>&lt;!-- 頁面其它內容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --&gt;<br />
<span style="white-space:pre;"> </span>&lt;a href="#postion"&gt;定位到postion的位置&lt;/a&gt;&nbsp; &lt;!-- 鏈接到錨點 --&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
2.4 回到頂部的空鏈接<br />
&lt;body&gt;<br />
<span style="white-space:pre;"> </span>&lt;!-- 頁面其它內容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --&gt;<br />
<span style="white-space:pre;"> </span>&lt;a href="#"&gt;回到頂部&lt;/a&gt;&nbsp; &nbsp;&lt;!-- 回到頂部 --&gt;<br />
&lt;/body&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
七、列表<br />
1、無序列表<br />
1.1 定義無序列表<br />
元素定義無序列表,用于列出頁面上沒有特定次序的條目。<br />
&lt;ul&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重慶市&lt;/li&gt;<br />
&lt;/ul&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8MFYHQJB-1578023422187)(HTML.assets/1530684550787.png)]<br />
<br />
1.2 type屬性<br />
定義列表的項目符號的類型<br />
<br />
disc:實心圓,默認值。<br />
circle:空心圓。<br />
square:實心矩形。<br />
&lt;ul type="circle"&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重慶市&lt;/li&gt;<br />
&lt;/ul&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gCwhGGdG-1578023422188)(HTML+CSS_pic/1530684771419.png)]<br />
<br />
2、有序列表<br />
2.1 定義有序列表<br />
&lt;ol&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重慶市&lt;/li&gt;<br />
&lt;/ol&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ofA5U8WE-1578023422190)(HTML.assets/1530684878880.png)]<br />
<br />
2.2 type屬性<br />
1:數(shù)字值,默認值。<br />
a 或 A:小寫或大寫字母。<br />
i 或 I:小寫或大寫羅馬數(shù)字。<br />
&lt;ol type="a"&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;北京市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;上海市&lt;/li&gt;<span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span>&lt;li&gt;重慶市&lt;/li&gt;<br />
&lt;/ol&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3l1LPm9P-1578023422191)(HTML.assets/1530685009075.png)]<br />
<br />
3、自定義列表<br />
&lt;dl&gt;<br />
&nbsp; &nbsp; &lt;dt&gt;北京&lt;/dt&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;海淀&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;昌平&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;朝陽&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dt&gt;廣東&lt;/dt&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;廣州&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;深圳&lt;/dd&gt;<br />
&nbsp; &nbsp; &lt;dd&gt;東莞&lt;/dd&gt;<br />
&lt;/dl&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
八、表格<br />
1、表格使用<br />
表格由 &lt; table &gt; 標簽來定義。每個表格均有若干行(由 標簽定義),每行被分割為若干單元格(由 標簽定義)。<br />
<br />
&lt;table&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JL9Sjv2t-1578023422196)(HTML.assets/1530685462072.png)]<br />
<br />
2、表格屬性<br />
屬性名稱<span style="white-space:pre;"> </span>描述<br />
width 和 height<span style="white-space:pre;"> </span>設置表格的寬度和高度<br />
align<span style="white-space:pre;"> </span>設置表格的對齊方式<br />
border<span style="white-space:pre;"> </span>設置表格的邊框寬度<br />
bgcolor<span style="white-space:pre;"> </span>設置表格的背景顏色<br />
cellpadding<span style="white-space:pre;"> </span>設置內邊距(單元格邊框與內容之間的距離)<br />
cellspacing<span style="white-space:pre;"> </span>設置外邊距(單元格之間的距離)<br />
bordercolor<span style="white-space:pre;"> </span>邊框顏色<br />
&lt;table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3bucqAYt-1578023422198)(HTML.assets/1530685943196.png)]<br />
<br />
3、tr元素<br />
屬性名稱<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、left、center<span style="white-space:pre;"> </span>左右對齊方式<br />
valign<span style="white-space:pre;"> </span>top 、middle 、bottom<span style="white-space:pre;"> </span>垂直對齊方式<br />
bgcolor<span style="white-space:pre;"> </span>rgb(xxx,xxx,xxx)、colorName<span style="white-space:pre;"> </span>背景顏色<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr align="center"&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr align="right" valign="top" bgcolor="blue"&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-737Gkc1r-1578023422199)(HTML.assets/1530695272576.png)]<br />
<br />
4、td元素<br />
元素是定義表格的數(shù)據(jù)單元格。<br />
屬性名稱<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、center、left<span style="white-space:pre;"> </span>設置水平對齊方式<br />
valign<span style="white-space:pre;"> </span>top、middle、bottom<span style="white-space:pre;"> </span>設置垂直對齊方式<br />
width和height<span style="white-space:pre;"> </span>pixels 、%<span style="white-space:pre;"> </span>設置單元格的寬和高<br />
colspan和rowspan<span style="white-space:pre;"> </span>number<span style="white-space:pre;"> </span>設置單元格的跨列和跨行數(shù)量<br />
bgcolor<span style="white-space:pre;"> </span>rbg()、colorName<span style="white-space:pre;"> </span>單元格背景色<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td align="center"&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td valign="top"&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td width="300px"&gt;第2行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td bgcolor='red'&gt;第2行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IcLpE6Ii-1578023422201)(HTML.assets/1530697152946.png)]<br />
<br />
合并行和列<br />
<br />
&lt;table border="1" cellspacing="0" width="500px" height="200px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td colspan="2"&gt;第2行,第1列&lt;/td&gt;<span style="white-space:pre;"> </span>&nbsp;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第3行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td rowspan="2"&gt;第3行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第4行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-z6ythYQ4-1578023422203)(HTML.assets/1530697074613.png)]<br />
<br />
5、表格標題caption<br />
元素用于定義表格的標題,必須緊隨 元素之后,且只能對每個表格定義一個標題。<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;caption&gt;表格標題&lt;/caption&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第1行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第1列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;第2行,第2列&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-V3X7gcxe-1578023422204)(HTML.assets/1530697414224.png)]<br />
<br />
6、表頭thead、tbody表主體、tfoot表腳注<br />
標簽定義表格的表頭。<br />
&lt;table border="1" cellspacing="0" width="500px" height="100px"&gt;<br />
<span style="white-space:pre;"> </span>&lt;caption&gt;信息&lt;/caption&gt;<br />
<span style="white-space:pre;"> </span>&lt;thead&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;th&gt;姓名&lt;/th&gt; &lt;!-- 定義表頭單元格 會加粗顯示 --&gt;&nbsp;&nbsp;<br />
<span style="white-space:pre;"> </span>&lt;th&gt;性別&lt;/th&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;/thead&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;Tom&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;boy&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;tr&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;Linda&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;td&gt;girl&lt;/td&gt;<br />
<span style="white-space:pre;"> </span>&lt;/tr&gt;<br />
&lt;/table&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
tfoot 元素應該與 thead 和 tbody 元素結合起來使用。 (比較少用)<br />
<br />
九、表單<br />
1、form 元素<br />
表單用標簽描述,表單內部可以有多個子標簽,用來完成用戶信息的收集,并發(fā)送請求給服務器。<br />
<br />
屬性:action=“xxx” method=“get/post”<br />
<br />
請求地址 請求方式<br />
<br />
http://www.baidu.com?uname=abc&amp;passwd=123<br />
&lt;form action="http://www.baidu.com" method="get"&gt;<br />
<span style="white-space:pre;"> </span>username:&lt;input type="text" name="uname" id="uname115"/&gt;&lt;br/&gt;&nbsp; # abc<br />
<span style="white-space:pre;"> </span>password:&lt;input type="text" name="passwd" id="pwd115"/&gt;&lt;br/&gt;&nbsp; &nbsp;# 123<br />
<span style="white-space:pre;"> </span>&lt;input type="submit" value="提交" id="sub115"/&gt;<br />
&lt;/form&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
2、表單元素<br />
元素有很多不同類型,根據(jù)不同的 type 屬性來決定。<br />
<br />
用戶名:&lt;input type="text" name="txt" /&gt;&nbsp; &lt;!-- text表示文本框--&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nLWfznhF-1578023422206)(HTML.assets/1530757524606.png)]<br />
<br />
type屬性:<br />
類型名稱<span style="white-space:pre;"> </span>描述<br />
text<span style="white-space:pre;"> </span>文本輸入框<br />
password<span style="white-space:pre;"> </span>密碼框<br />
radio<span style="white-space:pre;"> </span>單選按鈕<br />
checkbox<span style="white-space:pre;"> </span>復選框<br />
button<span style="white-space:pre;"> </span>按鈕<br />
submit<span style="white-space:pre;"> </span>提交按鈕<br />
reset<span style="white-space:pre;"> </span>重置按鈕<br />
file<span style="white-space:pre;"> </span>文件域<br />
name屬性 :標簽的普通的屬性,相當于別名,是每個輸入控件的重要屬性==請求參數(shù)名。<br />
<br />
id屬性 : 標簽的唯一標識名,不能重復。<br />
<br />
value屬性 :標簽的普通屬性,是中藥屬性==請求參數(shù)值。<br />
<br />
2.1 文本框<br />
用戶名:&lt;input type="text" name="txt" /&gt;&nbsp; &lt;!-- text表示文本框--&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-H6IYvY3p-1578023422207)(HTML.assets/1530758139189.png)]<br />
<br />
用戶名:&lt;input type="text" name="pwd" value="Mr_lee" maxlength="10" readonly="readonly" /&gt;<br />
1<br />
2.2 密碼框<br />
密碼:&lt;input type="password" name="pwd" value="123456" /&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7Nk9Lys0-1578023422208)(HTML.assets/1530758213655.png)]<br />
<br />
2.3 單選按鈕<br />
&lt;!-- name:值必須一樣,value:表示提交表單時的值 checked:默認選中--&gt;<br />
&lt;input type="radio" name="sex" value="1"&gt;男&nbsp; &nbsp; &nbsp; &nbsp;<br />
&lt;input type="radio" name="sex" value="0" checked="checked"&gt;女<br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XP3i844U-1578023422210)(HTML.assets/1530758647865.png)]<br />
<br />
2.4 復選框<br />
&lt;input type="checkbox" name="course" value="Mysql"&gt;Mysql<br />
&lt;input type="checkbox" name="course" value="HTML"&gt;HTML<br />
&lt;input type="checkbox" name="course" value="Linux"&gt;Linux<br />
&lt;input type="checkbox" name="course" value="Django"&gt;Django<br />
1<br />
2<br />
3<br />
4<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-r5mPRrZ3-1578023422211)(HTML.assets/1530758924865.png)]<br />
<br />
2.5 按鈕<br />
&lt;input type="button" name="btn" value="點我"&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ozchiqAW-1578023422214)(HTML.assets/1530759170832.png)]<br />
<br />
2.6 提交按鈕<br />
&lt;input type="submit" name="sub_btn" value="提交"&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kIOKVxLo-1578023422215)(HTML.assets/1530759206331.png)]<br />
<br />
2.7 重置按鈕<br />
&lt;input type="reset" name="set_btn" value="重置"&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cG06duKx-1578023422217)(HTML.assets/1530759252821.png)]<br />
<br />
2.8 文件域<br />
<br />
&lt;input type="file"&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mHkQp3fZ-1578023422219)(HTML.assets/1530759404657.png)]<br />
<br />
2.9 文本域<br />
&lt;textarea name="txtInfo" rows="4" cols="20"&gt;aa&lt;/textarea&gt;<br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-406qSTUX-1578023422221)(HTML.assets/1530759866508.png)]<br />
<br />
3、下拉選框<br />
選擇課程:<br />
&lt;select name="course"&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="1"&gt;Java&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="2" selected="selected"&gt;C++&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="3"&gt;PHP&lt;/option&gt;<br />
&lt;/select&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-b9rrRffX-1578023422222)(HTML.assets/1530759604602.png)]<br />
<br />
4、表單綜合實例<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9sgjtXvT-1578023422223)(HTML.assets/1530759682014.png)]<br />
<br />
十、特殊符號<br />
顯示結果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>實體名稱<br />
空格<span style="white-space:pre;"> </span>&nbsp;<br />
&lt;<span style="white-space:pre;"> </span>小于號<span style="white-space:pre;"> </span>&lt;<br />
&gt;<span style="white-space:pre;"> </span>大于號<span style="white-space:pre;"> </span>&gt;<br />
&copy;<span style="white-space:pre;"> </span>版權(copyright)<span style="white-space:pre;"> </span>&copy;<br />
&reg;<span style="white-space:pre;"> </span>注冊商標<span style="white-space:pre;"> </span>&reg;<br />
?<span style="white-space:pre;"> </span>商標<span style="white-space:pre;"> </span>?<br />
ile"&gt;<br />
<br />
<br />
[外鏈圖片轉存中...(img-mHkQp3fZ-1578023422219)]<br />
<br />
##### 2.9 文本域<br />
<br />
```html<br />
&lt;textarea name="txtInfo" rows="4" cols="20"&gt;aa&lt;/textarea&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
[外鏈圖片轉存中…(img-406qSTUX-1578023422221)]<br />
<br />
3、下拉選框<br />
選擇課程:<br />
&lt;select name="course"&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="1"&gt;Java&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="2" selected="selected"&gt;C++&lt;/option&gt;<br />
<span style="white-space:pre;"> </span>&lt;option value="3"&gt;PHP&lt;/option&gt;<br />
&lt;/select&gt;<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外鏈圖片轉存中…(img-b9rrRffX-1578023422222)]<br />
<br />
4、表單綜合實例<br />
[外鏈圖片轉存中…(img-9sgjtXvT-1578023422223)]<br />
<br />
十、特殊符號<br />
顯示結果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>實體名稱<br />
空格<span style="white-space:pre;"> </span>&nbsp;<br />
&lt;<span style="white-space:pre;"> </span>小于號<span style="white-space:pre;"> </span>&lt;<br />
&gt;<span style="white-space:pre;"> </span>大于號<span style="white-space:pre;"> </span>&gt;<br />
&copy;<span style="white-space:pre;"> </span>版權(copyright)<span style="white-space:pre;"> </span>&copy;<br />
&reg;<span style="white-space:pre;"> </span>注冊商標<span style="white-space:pre;"> </span>&reg;<br />
?<span style="white-space:pre;"> </span>商標<span style="white-space:pre;"> </span>?<br />
<br />
<br />

Vue 數(shù)據(jù)持久化

前端達人

方法一:使用 localStorage 存儲數(shù)據(jù)

window.localStorage.setItem(key,value)

 

方法二:使用 vuex-persistedstate插件

vuex 存在一個痛點,就是刷新以后vuex里面存儲的state就會被瀏覽器釋放掉(state都是存儲在內存中的)。

辦法:

通過vuex-persistedstate插件,實現(xiàn)將數(shù)據(jù)存儲到本地。

1.實現(xiàn)

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    state:{},
    getters:{},
    actions:{},
    mutations:{},
    modules:{},
    plugins: [createPersistedState()]  //加上這個就可以了 //里面設置需要緩存的內容
})

API:  https://www.npmjs.com/package/vuex-persistedstate

方法三: 使用vue-cookie插件

cookie 可以設置過期時間

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)
var VueCookie = require('vue-cookie');

export default new Vuex.Store({
  state: {
    token: VueCookie.get('token')
  },
  mutations: {
    saveToken(state, token) {
      state.token = token;
      // 設置存儲
      VueCookie.set('token', token, { expires: '30s' });
    }
  },
  actions: {

  }
})

簡單有效的JavaScript圖片預加載效果

seo達人

首先編寫一個簡單的容器:



<style>

content {

    width: 600px;

    height: 100vh;

    overflow-y: auto;

}

 

content ul {

    width: 100%;

}

 

content ul li {

    width: 50%;

    float: left;

    margin: 20px 0;

    list-style: none;

}

 

content ul li p {

    width: 200px;

    height: 200px;

    overflow: hidden;

    margin: 0 auto;

    border: 1px solid #999999;

}

 

content ul li p img {

    width: 100%;

    display: block;

    position: relative;

    top: 50%;

    transform: translateY(-50%);

}

</style>

<div id="content">

   <ul>

   </ul>

</div>

然后,編寫js代碼:



let imageArr = [{

    img_url: "http://www.lexilisi.com/Uploadpth/c45cc952-dcb7-493c-a171-357d1b820b37.png",

}, {

    img_url: "http://xiaobanyou.com/static/images/xby_user_3.jpg",

}, {

    img_url: "http://xiaobanyou.com/static/images/xby_user_4.jpg",

}, {

    img_url: "http://xiaobanyou.com/static/images/xby_user_5.jpg",

}, {

    img_url: "http://xiaobanyou.com/static/images/xby_user_6.jpg",

}, {

    img_url: "http://xiaobanyou.com/static/images/xby_user_799.jpg",

}];

const lazyLoad = (src) => {

    //加載loading動畫

    let _image = new Image();

    _image.src = './loading.gif';

    //加載需要展示的圖片

    let image = new Image();

    image.src = src;

    //加載成功,將loading圖片路徑改成對應的真實路徑

    image.onload = _ => image.src = .currentTarget.src;

    //加載失敗,將loading圖片路徑改成默認圖片路徑

    image.onerror = _ => _image.src = './error.png';

    return _image;

}

let _content = document.getElementById('content');

let _ul = _content.getElementsByTagName('ul');

imageArr.forEach(value => {

    let _li = document.createElement('li');

    let _p = document.createElement('p');

    let _image = lazyLoad(value.img_url);

    _p.appendChild(_image);

    _li.appendChild(_p);

    _ul[0].appendChild(_li);

})

展示效果如圖:







每個圖片都是異步加載,加載完成后:







 






日歷

鏈接

個人資料

藍藍設計的小編 http://www.bouu.cn

存檔