<address id="ttjl9"></address>

<noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>

<form id="ttjl9"></form>

<em id="ttjl9"><span id="ttjl9"></span></em>

<address id="ttjl9"></address>

<noframes id="ttjl9"><form id="ttjl9"></form>

首頁

042021-6

這個關于文字的知識點你肯定不知道！

資深UI設計者

本周馬克筆設計留學的安老師想跟大家分享一個你八成不了解關于文字顏色的知識點。

根據世界衛生組織的統計報告，全球范圍內，大約有22億人擁有視力受損（visually impaired）的問題。這其中包含了從輕度的視力問題，到重度的眼部疾病，甚至完全失明的人群。那么在這個高度電子化的時代，大量信息來源于網絡，而獲取這些信息需要使用屏幕進行閱讀，所以緊隨而來的問題就出現了，如何讓視覺受損人群舒適的閱讀這些信息呢？

這里就要提到WCAG，全稱是Web Content Accessibility Guidlines（網頁內容無障礙指南），它們是一組是網頁內容更容易訪問的建議，主要針對殘疾人，WCAG 2.1于2018年6月成為W3C推薦標準。這個指南中給出了相關建議，可使網站內容更容易訪問。遵循這些原則，web內容更易為廣大殘疾人士所接受，這些包括盲人和低視患者、聾人和重聽人、學習障礙、認知障礙、行動不便、言語殘疾、光過敏患者和這些病癥的復合患者。而我要和大家分享就是其中關于視障礙人群的在文字用色方面的小知識。

通過在文本和背景之間提供足夠的對比度，讓弱視人群在不使用增強對比度的輔助技術的前提下可以較省力的閱讀該文本。對于沒有色盲的人，通過閱讀性能評估，色相和保護度對可讀性的影響很小或者沒有影響。

文字顏色和背景顏色的標準分為一下幾種，從上到下為不合格到最高標準：

不合格（Fail）- 文字顏色和背景顏色沒有形成足夠的反差
AA Large – 對于18號或以上字號的文字內容，這個級別的反差度是最低要求。反差度不低于3:1
AA – 低于18號的文字的最優級別。反差度不低于4.5:1
AAA – 對比增強，對比度不小于7:1

這里要注意的是，裝飾性文字內容和品牌logo不需要考慮最小對比度問題。

那么如何知道你的文字顏色和背景顏色的對比度到底符不符合標準呢，這里推薦一個比較簡單易用且直觀的工具，來自Adobe Color里的“Accessibility Tools”中的對比度檢查工具（Contrast Checker）。

（https://color.adobe.com/create/color-accessibility）

通過使用這個工具，你就可以輕松知道你選擇的文字顏色和背景顏色是否達到了無障礙要求。比如上圖中的白色文字和橙色底圖。

在雙AA的標準下，白色字體和橙色背景的對比為3.68:1，低于了AA的4.5:1的標準，所以我們可以看到，17號或以下字體就沒有通過。

而在最嚴苛的AAA標準下，3.68:1的對比度遠遠低于最低標準7:1，所以無論是大字號還是小字號甚至是圖形，都無法通過。

經常被大家吐槽的各地警方的通告藍經過我的測試，都是可以通過AA標準的，甚至有一些還可以通過AAA標準。

再比如，很多同學喜歡使用的橙黃色背景配白色文字的情況，反而連AA標準都完全通過不了，對比度只有可憐的1.71:1。顯然這種情況，甚至會給視覺正常的人也造成一定的閱讀困擾，長時間閱讀可能會造成視覺疲勞。

不過，在實際的操作中，大家還是要根據具體的情況而定，也不一定非要符合這個標準。比如剛提到的這種橙黃色搭配白色字體的情況，如果沒有大面積使用，只是偶爾出現的話，我認為也是沒有什么太大問題的。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷作者：馬克筆設計留學

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1907)

042021-6

設計萬花筒｜做UI，文案也需要設計？不信你來瞧瞧

在吸引用戶使用產品時，存在許多分散注意力的錯誤，精準的提示性文案設計可以作為改善用戶體驗和吸引用戶的工具。作為設計師，我們大部分都將注意力集中在視覺和交互上，但如何才能繼續創建更有用，更吸引人且更易于使用的產品呢？這就不能不提及到常常被我們忽視的一些提示性文案，那么通過日常和工作中遇到的一些頁面和大家一起聊聊那些被忽視的提示性文案設計。

1

01.前言

作為設計師，我們大部分都將注意力集中在視覺和交互上，但如何才能繼續創建更有用，更吸引人且更易于使用的產品呢？這就不能不提及到常常被我們忽視的一些提示性文案，那么通過日常和工作中遇到的一些頁面和大家一起聊聊那些被忽視的提示性文案設計。

“永遠不要削弱語言的力量，言動于心, 心動于身”——公開演講者Hamza Yusuf

在吸引用戶使用產品時，存在許多分散注意力的錯誤，精準的提示性文案設計可以作為改善用戶體驗和吸引用戶的工具。著名UX公司-尼爾森諾曼集團（Nielsen Norman Group）經過大量調研后得出用戶在使用產品的過程中存在以下現象：

1、瀏覽頁面文案是較高文化素養用戶的典型行為。

2、在平均600至800字的頁面上，用戶只能閱讀大約20％的文案。

3、簡潔的文案，目標清晰的語言和可閱讀的提示性文案能將產品可用性提高124％。

02. 什么是提示性文案？

它是以微觀的形式，存在于彈窗、按鈕、搜索等鏈接位置，信息性或指導性的文本，在使用產品時以提示的形式告知和幫助用戶提升使用體驗。

當用戶采取特定操作（例如搜索產品）時，“提示性文案復制”可作為指南。它還可以建立用戶對產品的信任和同理心，并與整體品牌形成更牢固的聯系。

那么合理有效的提示性文案設計是：

· 清晰，簡潔且易于理解

例如在一些登錄注冊頁面我們盡量讓提示性文案設計的清晰明了，易于理解。讓用戶可以毫不費力的理解這些文案的作用，提升用戶使用體驗。

· 融合產品品牌調性及語氣

在設計提示文案時，最好能夠從產品品牌調性和用戶特性出發。

· 視覺上與整體設計渾然一體

提示性文案作為產品的一部分，在風格上應該與整體的設計保持一致，不需要過于特立獨行，與整體設計渾然一體最為合適。

· 滿足用戶需求，回答問題或建立同理心

提示性文案設計是為了更好的幫助用戶理解頁面的操作邏輯，若設計改變了用戶的心理與習慣，可能會增加用戶的學習成本或者被用戶拋棄。我們在進行設計的時候，如果要設計一些創新的操作規則，那么需要做更多的調研和測試，確保這個規則符合用戶的心理。

a

03.提示性文案是如何提高用戶參與度的？

有效的提示文案可以試圖理解預測用戶的期望，讓用戶感覺好像是正在與該頁面進行對話，參與其中從而吸引用戶并增加轉化的作用。

· 要與用戶產生同理心

提示性文案增添情感, 可以與用戶建立更好的關系, 并有助于建立更牢固的聯系。當遇到設計流程頁面時也可以利用提示文案讓產品的使用步驟更透明清晰，以達到同理心。

· 要做到清晰與控制

清晰明了有控制的使用提示性文案也會減少焦慮并更好地傳達信息給用戶。

· 透明傳達信息，建立信任

由于有些產品可能引起人們對安全性和隱私的關注, 因此建立信任的提示性文案將對產品帶來積極影響。

· 促使人們采取行動

好的提示性文案可以幫助用戶完成任務, 提高參與度并鼓勵用戶走得更遠, 做更多的事情。例如在很多電商APP“購物車”中會常常出現這種用來鼓勵用戶繼續探索其他類似產品的提示性文案。

因此推動提高用戶參與度，同理心、透明感以及清晰感和控制感, 都是好的提示性文案設計的宗旨，但是, 并非所有的都是好的。

04.糟糕的提示性文案的影響

在設計過程中應始終努力設計出有效的提示性文案，但是, 一定是有比沒有要好嗎？個人認為也是不必要的，糟糕的提示性文案甚至會破壞產品中最好的用戶體驗。例如以下幾種情況：

· 含糊不清

· 過于啰嗦

· 無意義，產生誤導

· 無同理心

…

因此糟糕的提示文案設計會誤導用戶在產品中采取不必要的操作, 從而使他們感到生氣和困惑，甚至可能會破壞品牌對用戶的忠誠度，產生本末倒置的結果，也給用戶帶來不佳體驗。

05.結語

提示性文案設計對產品體驗產生很大影響，好的提示性文案設計優點是可觀的：增加用戶參與度，品牌忠誠度，信任度和絲滑的產品體驗。如果運用的巧妙得當，好的提示性文案可以幫助產品在競爭日益激烈的市場中脫穎而出。以上是我對于一些提示性文案設計的一點兒心得體會，歡迎與大家共同探討。

文章中部分圖片來源于網絡

原文地址： 58UXD

作者：環鐵藝術家

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計  、包裝設計、圖標定制、用戶體驗、交互設計、網站建設  、平面設計服務

評論(0) 瀏覽(1966)

032021-6

揭密可視化專家配色秘笈，你在乎的顏色遠遠不夠

ui設計分享達人

AntV 色板是基于 Ant Design 色彩體系，并結合數據可視化特性而設計。在可視化設計中，色板的運用原則上優先保障準確性，考慮在操作指引、交互反饋上起到強化或凸顯的作用。其次需兼顧色障礙群體，幫助有色盲色弱的人群也能在數據可視化中獲取洞見。本文為你揭秘可視化色板的搭配種類、以及如何使用。

顏色映射原理

在數據可視化領域中，數據與顏色的映射是非常重要的一個環節。顏色有三個視覺通道，分別是色調（H）、飽和度（S）、明度（B），不同的視覺通道可以與不同的數據類型建議關聯。

色調（H）：通常使用顏色中的不同色調來描述不同的分類數據，如水果品類中蘋果映射為紅色、香蕉映射為黃色、梨映射為綠色，將品類與色調（H）建立了關聯。

飽和度（S）/明度（B）：顏色通過明暗和飽和度的共同變化來描述有序或數值型的連續數據，比如身高由低到高或由 160cm 到 180 cm 的顏色映射為由淺到深，將連續變化與顏色的明暗飽和變化建立關聯。

6 大色板類型

AntV 色板以螞蟻極客藍為起始主色，根據不同數據類型、使用場景擴展出 6 種可視化色板類型，可完美兼容 Ant Design UI 資產。以下所有色板均通過無障礙測試校驗，可放心使用。

分類色板

分類色板用于描述分類數據，如蘋果、香蕉、梨，常用一個顏色代表一個值以區分不同類型，取色時色相分布均衡，相鄰顏色之間明暗需考慮差異性，常用于餅圖的不同分類、填充地圖中的不同國家、關系圖中的不同角色等。

用法示例

如圖水果價格走勢對比，使用紅色代表蘋果價格、藍色代表藍莓價格、黃色代表香蕉價格。

順序色板

順序色板，一般使用同一或鄰近色相，通過明度和飽和度的漸變，常用來表示同一事物中的數值大小或梯度變化，如排行榜等級變化、一個國家或地區新增人口數對比、風險等級變化等。

單色順序色板

單一色相漸變稱之為單色順序色板，人眼可識別的色彩數量 5～7 個，為保證信息的最佳識別度，盡可能的克制使用顏色數量。

鄰近色順序色板

為拉開顏色差異，可用兩個或以上個色相，通過明度或飽和度漸變，顏色連續而豐富，可產生更多色彩分級，表達更多的連續數值，常用于熱力圖中的熱度變化，通過鄰近色相的差異將聚集部分突顯出來

用法示例

2017 年西安居民人均消費支出，通過連續的顏色變化，可以快速感知出居住方面消費占比最大，其次食品煙酒，第三是交替通信

發散色板

對比色漸變色板，一般是兩種互補色（也可以是對比色）去展現數據從一個負向值到 0 點再到正向值的連續變化區間，顯示相對立的兩個值的大小關系，常用于氣溫的冷熱、海拔高低、股票漲跌等

用法示例

全國等溫線圖，使用發散色板表示正負值的氣溫變化，暖色系的橙紅色容易讓人聯系到太陽或熾熱的感受，用于高溫變化，顏色越紅溫度越高，反之，冷色系的藍容易讓人聯想到冰和寒冷的感受，用于低溫變化，顏色越深溫度越低

疊加色板

疊加色板，為了色盡其用的原則，將兩組順序色板通過圖層疊加模式產生一組新的色板，一個顏色代表兩種變量數據，常用于觀察一個事物兩個維度變化的相關性，如胖瘦和高矮兩個維度的人數分布中，瘦且高的人群分布

用法示例

雙變量映射地圖，相對于單變量映射的地圖，該地圖形式更加新穎，十分適合用來展示兩個緊密聯系的變量信息。如下圖所示，圖中展現了美國國民人口居住密度和家庭生產總值的分布關系，縱向由淺到深的紫色映射了人口密度，橫向由淺到深的藍色映射了家庭收入水平，相交的顏色可以總體反映出人口和家庭的分布情況。可以從地圖中清晰地看到，人口多且收入高的大多分布在沿海地區，人口數少且收入低的則主要分布在中部地區。

強調色板

對比突出重點或特定數據，將重點關注的數據標以高飽和度的強調色，其他普通數據標以低飽和、低明度的基本色，常用于對比重點關注事物與其他分類事物的差別，如將自家產品與競品的對比使用

用法示例

如圖某工廠歷年能源消耗占比趨勢對比，分別用五種不同的顏色代表五種能源，其中「天然氣」為重點關注的能源類型，使用飽和度高的藍代表「天然氣」，其他能源類型著以低飽和度的分類顏色，以便關注的「天然氣」能夠快速被觀察到，同時其他類型可作為對比參考而不會因顏色過多而產生干擾。

語義色板

色彩在地圖可視化中的使用，不僅是數據信息傳遞的可視化通道，同時也是更深一層的文化故事的載體，用于表達意義或情感。重視用色習慣，遵循相關標準，色彩也不是都能寓意的，相當一部分圖表色彩選擇和感情因素無關，而是按照某種習慣來設定色彩，即所謂約定俗成，有的甚至形成來規范。如氣象預警配色，紅綠燈配色，股市的紅漲綠跌等。

用法示例

某水產公司 2019 年的月盈利變化，使用紅色表示盈利，綠色表示虧損。

8 條使用建議

我們發現，在提供官方色板的前提下，仍有用戶并不是十分擅長在實際場景中應用色板，以下幾條設計指引供使用時參考。

避免使用過多顏色

在實際應用中，經常會出現大量顏色使用的誤區，建議高亮重要的數據（不超過 7 個），其他數據默認置灰，通過圖例交互進行查看。

保持唯一映射通道

同樣的數據，映射通道應當保持唯一性。例如當使用柱子高度來映射數據大小時，就不需要再使用顏色通道去映射數據。

解釋你的顏色

當圖表中出現不同顏色時，需要向讀者解釋顏色所代表的含義。

上下文保持顏色一致性

結合當前頁面環境，建立視覺連續性，對于統一度量，使用同樣的顏色方案，而且在整個頁面（通常是儀表盤）使用時，注意保持整體顏色方案的一致性。

不同數據對應不同色板

不同的數據類型建議使用對應的色板，比如分類數據就不建議使用連續色板。

不用彩虹色環表達連續數據

不以色環順序來表達連續的有序型或數值型數據，因為色環順序并非人眼自然記憶，且彩虹色變化并非均衡變化，如下圖中灰階的轉化，很容易看出彩虹色并不是一個連續逐漸加深的色板，因此彩虹色環并不適合展示連續數據，容易引起誤解。

順序色板選擇需均衡

下圖右側“不建議”圖中，第 2 、第 3 個顏色很相近，難以區分，第 3 、第 4 個顏色跳躍很大，對于均衡的連續數據表達中，容易引起數據感知的誤差，均衡選色可在 PhotoShop 的拾色器中使用 Lab 模式下固定色相不變，調節 L 值進行等距取色。

為視障群體設計

AntV 色板在做無障礙驗證時，得出以下幾點取色建議：

分類色板選取需明暗交替

雖然正常人眼中右側分類色板通過色相可以區分差異，但在視障人士、甚至全色盲，則主要靠顏色的明暗差異來識別不同的數據類型，因此分類色板需要注意適度的明暗交替

離散色板盡量選取藍黃對比

一般場景中，我們常也會使用黃綠配色，黃綠對比中，黃是暖色系，綠是冷色系，同樣能給到對比感受，且打破常規的藍紅對比色，給到新穎的色彩感受，但如果你的用戶中視障人士占比較多，則盡量避免綠黃配色，如圖為兩種色板在正常人眼和紅綠色盲眼中的對比效果，黃綠配色在紅綠色盲眼中就失去了色彩對比，難以區分。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2896)

032021-6

用戶體驗設計定義&詳細案例

ui設計分享達人

一、什么是用戶體驗？

用戶體驗（User Experience，簡稱UE/UX）這個詞是在上世紀90年代中期，由用戶體驗設計師唐納德·諾曼（Donald Norman）所提出和推廣。

定義：用戶在使用產品過程中建立起來的一種純主觀感受。即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。

二、可用性原則

可用性指的是產品對用戶來說有效、易學、高效、好記、少錯和令人滿意的程度，即用戶能否用產品完成他的任務，效率如何，主觀感受怎樣，實際上是從用戶角度所看到的產品質量，是產品用戶體驗的核心，不好的可用性會導致用戶放棄使用產品。

可用性由易學性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預測性組成。

01 易學性

指的是用戶學習如何與產品進行交互，以實現目標所花費的時間和精力，即用戶能否在初次使用產品時完成簡單的任務或實現用戶目標。

02 效率

用戶在使用產品一段時間后，能否在合理的時間完成想要達成的目標任務。這里以騰訊視頻為例，用戶能否快速的下載想要的東西，在同一系列中，可以快速下載更多的相關內容。

03 可記憶性

我們常說互聯網是有記憶的，好的產品體驗是幫助用戶去記憶。用戶在體驗中，要對一些有意識、無意識的行為進行記憶是一個比較大的負擔，如果在一些環節通過系統能幫用戶記錄，會降低用戶的負擔。比如在搜索、歷史記錄、瀏覽記錄等。

04 容錯性

用戶在使用產品時，發生錯誤后，能否快速幫助用戶識別和糾正錯誤，幫助用戶從錯誤中恢復的能力。如常見的注冊登錄，當用戶屬于郵箱格式不對的時候，給出提示，并且告知錯在哪里。如果提示語只是："請輸入正確的郵箱" 用戶可能會疑惑，錯在哪里。

05 滿意度

滿意度指的是用戶與設計互動產生的愉悅程度，可以是用戶使用產品時流暢的交互和優秀的視覺設計，也可以是用戶在產品中得到的滿足感。比如sir語音交互，王者榮耀等級（滿足感）

06 實用性

產品能否提供用戶在完成任務時所需要用到的基本功能，例如P圖類軟件，用戶需要對圖片進行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。

07 個性化

在滿足實用性的基礎上針對用戶提供不同場景下的功能定制，如美圖秀秀，在提供圖片美化的同時，針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。

08 可預測性

用戶能夠預測到下一步操作或者整個流程的交互，將會發生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預測到下一步或者整個流程的步驟會發生什么。

三、可見性原則

可見性是用戶根據界面中可見元素確定產品可以做什么的設計原則。

01 物理功能可見性

物理功能可見性是基于對象的物理外觀。在視覺上，這種類型的功能可見性使用戶能夠立即清楚地看到在設計界面中能干什么。例如當我們使用音樂類軟件，最常使用的就是播放/暫停，上一曲/下一曲。我們就會尋找去這些圖標。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中，這就是功能可見性。

02 狀態可見性

當信息或者列表過多時區分狀態的展示，將重要的狀態信息呈現在盡可能高的信息層級當中。如iOS信息和QQ郵箱中區分未讀信息的微標。如果將這些徽標隱藏起來，會極大地破壞易用性，因為人們將不得不進入一個個郵件詳情頁當中進行確認，才能獲取到原本由徽標提供的狀態信息，這樣的互動非常低效且乏味。

03 步驟可見性

當用戶在執行某項任務的時候應該清晰明了的告知用戶目前在什么步驟，后面還有多少步驟，完整清晰的流程展示。如果將這些信息隱藏起來，用戶會困惑當前進行到哪一步，接下來還有多少步驟。

四、可供性原則

強調需要明確的視覺線索向用戶展示產品可以做什么。例如用戶界面中的交互元素（如滾動條、命令按鈕和圖標等）的設計必須能夠為用戶提供足夠清楚的建議，讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么，以及如何與它們進行交互行為（點擊、長按、滑動等）

五、反饋

給用戶及時、恰當的反饋，是體驗設計中非常重要的一項原則；對每個用戶的操作都應該有恰當的系統反饋（包含視覺、聽覺、觸覺）。

01 告知性

明確告知用戶當前操作發生了什么。如點擊下載和下載過程給出相對應的反饋及進度條。

02 動作連接性

當用戶產生某個動作時，給予相對應的連接反饋。如大概用戶點擊某個按鈕時，按鈕默認的外觀與點擊后的外觀發生變化，結合現實世界的開關去思考（按下開燈）動作與反饋是連接的，即時的。

六、?？硕?

?？硕桑?951年由威廉·埃德蒙·?？耸紫忍岢龅模J為人們從數組中選擇目標的時間取決于可用選項的數量。也就是當一個人所面臨的選擇越多，做出選擇所花的時間就越多，當面臨選擇的數量增加，做出決定的時間也會跟著增加。

如京東篩選，在搜索結果頁會將篩選條件收起，因為里面的篩選條件內容過多。用戶會在當前頁面選擇的時間增加.將一些項目分組放入二級下單，并且做好歸類，用戶能夠更迅速的作出決定。

七、費茨定律

費茨定律，是1954 年由保羅.菲茨首次提出，在人機交互中指的是通過圖形用戶界面使用鼠標或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。

T：代表完成移動所需的平均時間

A：代表光標開始/停止時間

B：代表光標移動速度

D：代表從起點到目標中心的距離

W：代表目標的尺寸

簡單來說就是指：隨著目標的距離增加，移動到目標的時間更長，并且隨著目標的尺寸減小，選擇目標的時間也會增加。

所以在界面設計當中會遵循越重要的功能，占據面基會越大。重要圖標的點擊熱區也會增大。便于用戶快速點擊。

屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中，所以我們在進行產品設計的過程中，會將常用/重要的操作放置在屏幕邊緣處，便于用戶操作。

八、神奇數字 7 ± 2

神奇數字7±2法則是1956年由喬治·米勒所提出的，根據喬治·米勒的研究，人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數APP底部導航為5個的原因。

由于人類的大腦處理信息的能力有限，大腦會將復雜信息劃分成塊和小的單元。如：京東和每日優鮮的分類處理。

人類短期的記憶一般一次只能記住5-9個，所以人們總是傾向于把一串數字拆分為多個較短的部分進行記憶。如銀行卡號和手機號碼等。

九、復雜守恒定律

復雜守恒定律是1984年由拉里·泰斯勒所提出的，也稱作泰斯勒定律。認為每一個產品設計的過程中，都有其固有的復雜性，存在著一個臨界點，超過了這個點產品設計的過程就不能再簡化了，你只能將固有的復雜性從一個地方轉移到另外一個地方。

在產品設計中，會盡量的簡化界面。當功能過多時進行一個整合的處理，跳轉或者滑動操作。如查看更多或者常見的漢堡導航。

十、新鄉重夫：防錯原則

新鄉重夫認為遺忘有兩種：一種是疏漏，另一種是忘卻。他建議采用一些措施來預防產品的缺陷。

防錯原則認為大部分的意外都是由設計的疏忽，而不是人為操作疏忽。因此，在設計中要有必要的防錯機制；比如常見的信息輸入狀態，未輸入置灰不可點，輸入變為可點擊狀態。

微信拍一拍：微信在出了拍一拍功能之后，很多時候點擊頭像的時候會不小心拍到別人，現在的拍一拍是可以撤銷的，在客戶端鼠標懸浮上就可以進行撤回，移動端長按出現撤回彈窗，兩分鐘內有效。

微信朋友圈動態：點擊返回圖標會出現的彈窗，避免誤操作。利用防錯原則，可以避免用戶重新編輯。微信當中有很多友好的體驗細節。可以多多去感受。

十一、奧卡姆剃刀原理

奧卡姆剃刀定律：它是由14世紀英格蘭的邏輯學家、圣方濟各會修士奧卡姆的威廉（William of Occam，約1285年至1349年）提出。這個原理稱為“如無必要，勿增實體 ”，即“ 簡單有效原理 ”

01、只放置必要的元素

不必要的元素會降低設計的效率，不管是實體、視覺或者認知上，多余的設計元素，有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息，可以用「更多信息」來實現。如夸克瀏覽器，首頁只放置重要功能搜索和幾個整合內容的圖標入口。

02、減少點擊次數

讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件，在播放音樂之后進入其他的tab，在上面都會懸浮播放/暫停的區域。都能夠隨時操作。

03、“老人”規則

就是產品的易用性，如果年紀大點的人，也能夠輕松使用所設計的產品那么是成功的。如抖音沉浸式的體驗，簡單的滑動就能夠觀看想看的內容。目前抖音的用戶老年人也逐漸包含在內，并且抖音會根據用戶的停留時長等推送用戶感興趣的內容。

04、減少“段落”個數

頁面的使用率，當你想要在一屏新增很多內容時，頁面的布局就會變得擁擠和區域變小，容易過于干擾用戶做出選擇，重要功能不夠突出等?？淇藶g覽器首頁強化了搜索功能和幾個整合內容的圖標入口；uc瀏覽器首頁內容過多，當用戶想要使用搜索功能時很容易被其他內容干擾。

05、給予更少的選項

前面說到的?？硕烧f到，當選擇的數量越多，用戶做決定的時間就更長。做過多的決定也是一種壓力，在展示內容的時候要努力減少用戶的思維負擔。如攜程和馬蜂窩金剛區的內容展示，馬蜂窩根據產品屬性放置了6個重要的功能入口，便于用戶更快的去選擇所想要的功能。

十二、設計和藝術的區別是什么？

最后我們來探討一下設計和藝術的區別是什么。我看到一句話覺得挺好的。設計和藝術的重要區別是：藝術拋出問題，而設計解決問題。

我們設想一個場景，當你在藝術展廳站在一副名畫面前，你所思考的是什么？是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事，你會不會思考藝術家在作畫時的心情，處境，為什么要這么去畫？想表達怎么樣的情感？

然后我們再設想一個場景，同樣在藝術展廳，你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是相機對吧？因為相機的拍照效果在任何環境下都會比手機好。這就是設計。是能夠真真切切的解決用戶問題的。能夠去感知到的。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷作者：左言右設

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2348)

032021-6

用戶體驗設計定義&詳細案例

ui設計分享達人

一、什么是用戶體驗？

用戶體驗（User Experience，簡稱UE/UX）這個詞是在上世紀90年代中期，由用戶體驗設計師唐納德·諾曼（Donald Norman）所提出和推廣。

定義：用戶在使用產品過程中建立起來的一種純主觀感受。即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。

二、可用性原則

可用性指的是產品對用戶來說有效、易學、高效、好記、少錯和令人滿意的程度，即用戶能否用產品完成他的任務，效率如何，主觀感受怎樣，實際上是從用戶角度所看到的產品質量，是產品用戶體驗的核心，不好的可用性會導致用戶放棄使用產品。

可用性由易學性、效率、可記憶性、容錯性、滿意度、實用性、個性化、可預測性組成。

01 易學性

指的是用戶學習如何與產品進行交互，以實現目標所花費的時間和精力，即用戶能否在初次使用產品時完成簡單的任務或實現用戶目標。

02 效率

用戶在使用產品一段時間后，能否在合理的時間完成想要達成的目標任務。這里以騰訊視頻為例，用戶能否快速的下載想要的東西，在同一系列中，可以快速下載更多的相關內容。

03 可記憶性

我們常說互聯網是有記憶的，好的產品體驗是幫助用戶去記憶。用戶在體驗中，要對一些有意識、無意識的行為進行記憶是一個比較大的負擔，如果在一些環節通過系統能幫用戶記錄，會降低用戶的負擔。比如在搜索、歷史記錄、瀏覽記錄等。

04 容錯性

用戶在使用產品時，發生錯誤后，能否快速幫助用戶識別和糾正錯誤，幫助用戶從錯誤中恢復的能力。如常見的注冊登錄，當用戶屬于郵箱格式不對的時候，給出提示，并且告知錯在哪里。如果提示語只是："請輸入正確的郵箱" 用戶可能會疑惑，錯在哪里。

05 滿意度

滿意度指的是用戶與設計互動產生的愉悅程度，可以是用戶使用產品時流暢的交互和優秀的視覺設計，也可以是用戶在產品中得到的滿足感。比如sir語音交互，王者榮耀等級（滿足感）

06 實用性

產品能否提供用戶在完成任務時所需要用到的基本功能，例如P圖類軟件，用戶需要對圖片進行裁剪、添加濾鏡、摳圖、美顏、補妝、添加文字、去除水印、添加文字等操作。

07 個性化

在滿足實用性的基礎上針對用戶提供不同場景下的功能定制，如美圖秀秀，在提供圖片美化的同時，針對用戶不同的使用場景還提供視頻剪輯、視頻美容等功能。

08 可預測性

用戶能夠預測到下一步操作或者整個流程的交互，將會發生什么。舉例淘寶的購買流程。點擊購買按鈕> 選擇商品屬性> 付款> 輸入密碼> 購買成功; 用戶在點擊購買按鈕開始就能夠預測到下一步或者整個流程的步驟會發生什么。

三、可見性原則

可見性是用戶根據界面中可見元素確定產品可以做什么的設計原則。

01 物理功能可見性

物理功能可見性是基于對象的物理外觀。在視覺上，這種類型的功能可見性使用戶能夠立即清楚地看到在設計界面中能干什么。例如當我們使用音樂類軟件，最常使用的就是播放/暫停，上一曲/下一曲。我們就會尋找去這些圖標。其次是分享、收藏、下載、評論等功能需要用到的功能展示在頁面中，這就是功能可見性。

02 狀態可見性

當信息或者列表過多時區分狀態的展示，將重要的狀態信息呈現在盡可能高的信息層級當中。如iOS信息和QQ郵箱中區分未讀信息的微標。如果將這些徽標隱藏起來，會極大地破壞易用性，因為人們將不得不進入一個個郵件詳情頁當中進行確認，才能獲取到原本由徽標提供的狀態信息，這樣的互動非常低效且乏味。

03 步驟可見性

當用戶在執行某項任務的時候應該清晰明了的告知用戶目前在什么步驟，后面還有多少步驟，完整清晰的流程展示。如果將這些信息隱藏起來，用戶會困惑當前進行到哪一步，接下來還有多少步驟。

四、可供性原則

強調需要明確的視覺線索向用戶展示產品可以做什么。例如用戶界面中的交互元素（如滾動條、命令按鈕和圖標等）的設計必須能夠為用戶提供足夠清楚的建議，讓用戶可以清晰地辨別出這些元素所代表的意思是什么、它們的功能是什么，以及如何與它們進行交互行為（點擊、長按、滑動等）

五、反饋

給用戶及時、恰當的反饋，是體驗設計中非常重要的一項原則；對每個用戶的操作都應該有恰當的系統反饋（包含視覺、聽覺、觸覺）。

01 告知性

明確告知用戶當前操作發生了什么。如點擊下載和下載過程給出相對應的反饋及進度條。

02 動作連接性

當用戶產生某個動作時，給予相對應的連接反饋。如大概用戶點擊某個按鈕時，按鈕默認的外觀與點擊后的外觀發生變化，結合現實世界的開關去思考（按下開燈）動作與反饋是連接的，即時的。

六、?？硕?

希克定律，是1951年由威廉·埃德蒙·?？耸紫忍岢龅模J為人們從數組中選擇目標的時間取決于可用選項的數量。也就是當一個人所面臨的選擇越多，做出選擇所花的時間就越多，當面臨選擇的數量增加，做出決定的時間也會跟著增加。

如京東篩選，在搜索結果頁會將篩選條件收起，因為里面的篩選條件內容過多。用戶會在當前頁面選擇的時間增加.將一些項目分組放入二級下單，并且做好歸類，用戶能夠更迅速的作出決定。

七、費茨定律

費茨定律，是1954 年由保羅.菲茨首次提出，在人機交互中指的是通過圖形用戶界面使用鼠標或其他類型的指針從一個起始位置移動到一個最終目的所需的時間。

T：代表完成移動所需的平均時間

A：代表光標開始/停止時間

B：代表光標移動速度

D：代表從起點到目標中心的距離

W：代表目標的尺寸

簡單來說就是指：隨著目標的距離增加，移動到目標的時間更長，并且隨著目標的尺寸減小，選擇目標的時間也會增加。

所以在界面設計當中會遵循越重要的功能，占據面基會越大。重要圖標的點擊熱區也會增大。便于用戶快速點擊。

屏幕外邊緣和四個角部比屏幕中的其他位置都更容易被定為和選中，所以我們在進行產品設計的過程中，會將常用/重要的操作放置在屏幕邊緣處，便于用戶操作。

八、神奇數字 7 ± 2

神奇數字7±2法則是1956年由喬治·米勒所提出的，根據喬治·米勒的研究，人類短期的記憶一般一次只能記住5-9個。也就是為什么大多數APP底部導航為5個的原因。

由于人類的大腦處理信息的能力有限，大腦會將復雜信息劃分成塊和小的單元。如：京東和每日優鮮的分類處理。

人類短期的記憶一般一次只能記住5-9個，所以人們總是傾向于把一串數字拆分為多個較短的部分進行記憶。如銀行卡號和手機號碼等。

九、復雜守恒定律

復雜守恒定律是1984年由拉里·泰斯勒所提出的，也稱作泰斯勒定律。認為每一個產品設計的過程中，都有其固有的復雜性，存在著一個臨界點，超過了這個點產品設計的過程就不能再簡化了，你只能將固有的復雜性從一個地方轉移到另外一個地方。

在產品設計中，會盡量的簡化界面。當功能過多時進行一個整合的處理，跳轉或者滑動操作。如查看更多或者常見的漢堡導航。

十、新鄉重夫：防錯原則

新鄉重夫認為遺忘有兩種：一種是疏漏，另一種是忘卻。他建議采用一些措施來預防產品的缺陷。

防錯原則認為大部分的意外都是由設計的疏忽，而不是人為操作疏忽。因此，在設計中要有必要的防錯機制；比如常見的信息輸入狀態，未輸入置灰不可點，輸入變為可點擊狀態。

微信拍一拍：微信在出了拍一拍功能之后，很多時候點擊頭像的時候會不小心拍到別人，現在的拍一拍是可以撤銷的，在客戶端鼠標懸浮上就可以進行撤回，移動端長按出現撤回彈窗，兩分鐘內有效。

微信朋友圈動態：點擊返回圖標會出現的彈窗，避免誤操作。利用防錯原則，可以避免用戶重新編輯。微信當中有很多友好的體驗細節?？梢远喽嗳ジ惺?。

十一、奧卡姆剃刀原理

奧卡姆剃刀定律：它是由14世紀英格蘭的邏輯學家、圣方濟各會修士奧卡姆的威廉（William of Occam，約1285年至1349年）提出。這個原理稱為“如無必要，勿增實體 ”，即“ 簡單有效原理 ”

01、只放置必要的元素

不必要的元素會降低設計的效率，不管是實體、視覺或者認知上，多余的設計元素，有可能造成失敗或者其它問題。這并不意味著不能提供給用戶很多的信息，可以用「更多信息」來實現。如夸克瀏覽器，首頁只放置重要功能搜索和幾個整合內容的圖標入口。

02、減少點擊次數

讓用戶通過較少的點擊就能找到他們想要的東西或使用功能。如音樂類軟件，在播放音樂之后進入其他的tab，在上面都會懸浮播放/暫停的區域。都能夠隨時操作。

03、“老人”規則

就是產品的易用性，如果年紀大點的人，也能夠輕松使用所設計的產品那么是成功的。如抖音沉浸式的體驗，簡單的滑動就能夠觀看想看的內容。目前抖音的用戶老年人也逐漸包含在內，并且抖音會根據用戶的停留時長等推送用戶感興趣的內容。

04、減少“段落”個數

頁面的使用率，當你想要在一屏新增很多內容時，頁面的布局就會變得擁擠和區域變小，容易過于干擾用戶做出選擇，重要功能不夠突出等。夸克瀏覽器首頁強化了搜索功能和幾個整合內容的圖標入口；uc瀏覽器首頁內容過多，當用戶想要使用搜索功能時很容易被其他內容干擾。

05、給予更少的選項

前面說到的?？硕烧f到，當選擇的數量越多，用戶做決定的時間就更長。做過多的決定也是一種壓力，在展示內容的時候要努力減少用戶的思維負擔。如攜程和馬蜂窩金剛區的內容展示，馬蜂窩根據產品屬性放置了6個重要的功能入口，便于用戶更快的去選擇所想要的功能。

十二、設計和藝術的區別是什么？

最后我們來探討一下設計和藝術的區別是什么。我看到一句話覺得挺好的。設計和藝術的重要區別是：藝術拋出問題，而設計解決問題。

我們設想一個場景，當你在藝術展廳站在一副名畫面前，你所思考的是什么？是驚嘆畫家的畫技還是整個畫面給你的感覺是一種故事，你會不會思考藝術家在作畫時的心情，處境，為什么要這么去畫？想表達怎么樣的情感？

然后我們再設想一個場景，同樣在藝術展廳，你身上帶有手機和相機。你會選擇用相機拍照還是用手機。答案是相機對吧？因為相機的拍照效果在任何環境下都會比手機好。這就是設計。是能夠真真切切的解決用戶問題的。能夠去感知到的。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷作者：左言右設

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1783)

032021-6

Node.js+Vue+mysql項目實戰入門之環境搭建，項目創建-附github地址

Node進行后端開發，Vue進行前端頁面的開發，實現了前后端的分離。在開發中使用Express框架可以快速地開發web應用程序。

1.安裝node.js

下載對應版本的，網址：https://nodejs.org/en/download/；

進行傻瓜式安裝：最后點擊install即可；

安裝完成后出現完成界面，cmd去命令列界面測試，如圖：出現版本號說明安裝成功。

如果安裝的路徑不是默認路徑，那么需要執行下面步驟，這樣在之后進行一些包的安裝時會保存到自定義位置而不是默認盤符。

首先在安裝路徑下新建兩個文件夾【node_global】及【node_cache】，如下：

然后cmd執行命令




    

        

            

            

        

        

            
                npm config set prefix "E:\Program Files\node_js\node_global"
            

        

    

    

        

            

            

        

        

            
                npm config set cache "E:\Program Files\node_js\node_cache"

接著配置環境變量，系統變量里新建：

用戶變量里的改為E:\Program Files\node_js\node_global；

最后可以測試一下是否安裝到了新的路徑里：可以看到成功了

npm install express -g ，其中 -g 表示全局，不加會安裝在當前路徑C:/users/dell下

2.安裝Visual Studio Code

下載：https://code.visualstudio.com/docs/?dv=win；

傻瓜式安裝：

3.Visual Studio Code中搭建并運行NodeJS環境

首先安裝express `npm install express -g和`express應用生成器 `npm install express-generator -g；`

`然后打開終端，如圖`

使用express創建一個項目：express mytest

結果報錯：express : 無法加載文件 E:\Program Files\node_js\node_global\express.ps1，因為在此系統上禁止運行腳本。有關詳細信息，請參閱 https:/
go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
+ express mytest
+ ~~~~~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess

那就解決錯誤先：解決方法如圖

這樣就創建成功了。

這里應該是先新建一個文件夾來存放項目，然后進入指定位置。默認的話就放到c盤了。

測試

在終端執行如下代碼

然后瀏覽器輸入http://localhost:3000/

4.創建Vue項目

首先安裝webpack、vue腳手架到全局：命令行執行 :npm install webpack -g，npm install vue vue-cli -g

接下來在終端里，進入項目存放文件夾cd 路徑，vue init webpack 項目名，創建項目完成，如圖；

接下來安裝項目依賴，如圖；

進入項目，運行項目；

瀏覽器輸入http://localhost:8080進行訪問，如下圖。

github地址附上：https://vuejs-templates.github.io/webpack

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

部分借鑒自：csdn 作者：狼丶宇先生

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(2448)

032021-6

從零開始部署到上線：手把手教你搭建屬于自己的個人博客網站！

現在是互聯網逐漸發展，已經出現了很多可以供自己寫博客的網站，大家可以在上面發表自己的文章，供自己記錄或者是供他人閱讀。但是，可不可以自己搭建一個只屬于自己的個人博客網站呢？這篇文章就帶你從0開始搭建一個自己的個人博客網站，并部署到屬于自己服務器。這里有一點要說的是，沒有服務器的同學使用自己機器的linux系統也是一樣的操作。我們選用一個很好用的博客框架Hexo進行搭建我們的個人博客。

博客框架Hexo介紹：

Hexo是一個快速，簡介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在幾秒內，即可生成一個靜態網頁展示我們發布的文章，同時也提供了大量精美的博客主題供我們使用。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BUkzFJqh-1622032930743)(pictures/image-20210524011732509.png)]

Hexo博客框架的優點

速度極快：Node.js 所帶來的超快生成速度，讓上百個頁面在幾秒內瞬間完成渲染。
支持MarkDown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多數插件。
一鍵部署：只需一條指令即可部署到 GitHub Pages, Heroku 或其他平臺。
插件和可擴展性：這個也是hexo很強大的一個地方，強大的 API 帶來無限的可能，與數種模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）輕易集成

Hexo博客框架搭建：

我們使用Centos7系統作為演示，使用其他linux系統也是可以的，只需要更換為對應Linux版本的軟件安裝命令即可。

1.安裝Git

直接使用yum安裝即可，在命令行輸入 yum -y install git

完成之后輸入git version 查看是否安裝成功，如果顯示git版本信息即為成功，如下：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gVJMnq6W-1622032930745)(pictures/image-20210526142911469.png)]

2.安裝Node.js

Node.js是一種運行在服務端的JavaScript，是一個基于Chrome JavaScript運行時建立的一個平臺。

Hexo基于Node.js，所以安裝Node.js是必須的一個操作，安裝步驟如下：

2.1：下載安裝包：

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz  


    
        1

2.2：解壓縮軟件包并配置環境變量：

#解壓 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移動到/usl/lcoal目錄下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #創建軟鏈接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加環境變量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #讓環境變量生效  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

2.3：測試是否安裝成功：

在命令行輸入node -v 和 npm -v，若是顯示出了版本號，即為安裝成功：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-47pt856h-1622032930748)(pictures/image-20210526143600103.png)]

3.安裝并使用Hexo

Hexo的安裝較為簡單，使用如下命令安裝

npm install -g hexo-cli #這里有一點要注意的就是，npm的源是在國外的，訪問可能會很慢，這里可以換成我們國內的源進行安裝加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    
        1
    

    
        2
    

    
        3

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TEjeb2E6-1622032930750)(pictures/image-20210526143826327.png)]

3.1：初始化Hexo

上面的安裝完成之后執行下面的命令進行對Hexo進行一個初始化

#這個文件名字可以自己指定，之后會在當前目錄下生成對應文件夾 hexo init <文件名字> cd 文件名字 npm install  


    
        1
    

    
        2
    

    
        3
    

    
        4

可以看到安裝好之后的一個目錄結構：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-raE9WJQX-1622032930751)(pictures/image-20210526144057199.png)]

目錄文件說明：

_config.yml：網站的配置信息，您可以在此配置大部分的參數。

package.json：應用程序的信息。EJS, Stylus 和 Markdown renderer 已默認安裝，您可以自由移除。

scaffolds：模版文件夾。當您新建文章時Hexo 會根據 scaffold 來建立文件Hexo的模板是指在新建的文章文件中默認填充的內容。例如，如果您修改scaffold/post.md中的Front-matter內容，那么每次新建一篇文章時都會包含這個修改。

source：資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析并放到 public 文件夾，而其他文件會被拷貝過去。

themes：主題文件夾。Hexo 會根據主題來生成靜態頁面。

查看hexo的版本以及對應的數據：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1B3aWxn9-1622032930752)(pictures/image-20210526144143747.png)]

3.2生成靜態文件，并開啟Hexo服務：

進入到了hexo的安裝目錄之后，使用hexo generate來生成靜態文件，也可以使用hexo g，之后使用hexo server（可以寫成hexo s）命令啟動服務，操作如下：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-YuvIWOuI-1622032930753)(pictures/image-20210526144957135.png)]

可以看到4000端口的服務已經開啟，之后在你的瀏覽器輸入http://<你的linux機器的ip地址或者服務器公網地址>:4000,如下可以看到最開始的一個界面：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-w9ELcFFg-1622032930753)(pictures/image-20210526145217729.png)]

4.初步使用Hexo：

使用前，我們對我們的站點進行一個配置，也就是我們創建的hexo目錄的_config.yml文件，可以修改的部分介紹如下：

# Site
title: QIMING.INFO #博客網站的標題
subtitle:          #博客網站的副標題
description:       #你的網站描述
keywords:          #網站的關鍵詞  
author:            #作者的名字
language:          #博客網站使用的語言
timezone:          #網站時區  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

我自己的修改如下供大家參考，這里的修改沒有太大的限制：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-G0cTYgQ1-1622032930754)(pictures/image-20210526145734893.png)]

4.1：開始使用Hexo發布自己的第一篇博客！

執行下面的目錄創建一篇新文章：

hexo new post <文章標題>  


    
        1

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

這里我創建了一篇標題為First_Blog的博客，創建之后hexo目錄下面的source/_post文件夾下會產生一個First_Blog.md的文件

4.2:編輯文章

進入到上面說的那個目錄下可以看到我們創建的博客文件：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cuPREJLQ-1622032930756)(pictures/image-20210526150208204.png)]

直接使用vim或者vi就可以對我們的博客文章進行編輯了，打開此First_Blog.md后可以看到—分隔的區域，這部分主要對文章進行標注變量，如下：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GOYKjBSu-1622032930756)(pictures/image-20210526150326264.png)]

title：標題

tage：標簽

categories：分類

date：時間

這些標注大家在-----區域可以進行使用

4.3：發布文章

輸入如下命令，生成靜態網頁，靜態網頁會存放在public文件下

之后就可以去瀏覽器訪問了！可以看到我們發布的文章已經成功在瀏覽器顯示，到這里個人博客網站就已經成功搭建了。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2ZpSg9fl-1622032930757)(pictures/image-20210526150824449.png)]

5.主題的選擇：

主題網站：https://hexo.io/themes/ hexo提供了大量精美的主題供我們選擇，選擇喜歡的主題，在hexo目錄下的themes文件夾下使用git clone下載主題，之后再配置文件_config.yml把theme后面修改成下載的主題的名字，之后運行hexo clean ，hexo g即可看到生效的主題。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eN5cZDmN-1622032930757)(pictures/image-20210526161641366.png)]

將Hexo部署上線到服務器：

如果是有服務器的小伙伴，也可以將Hexo部署到服務器供全網訪問，服務器的購買這里就不多說，阿里云跟騰訊云上面對于學生也有較為優惠的價格。部署到服務器的話，就需要將上面的全部操作，在你的服務器系統上面執行，之后我們使用Nginx（反向代理服務器）進行部署。

Nginx安裝：

Nginx是一款高性能的 HTTP 和反向代理服務器，這里我們采用編譯安裝的方式,按照下面的指引依次執行命令

#安裝gcc編譯環境： yum install -y gcc-c++ #安裝zlib-devel庫： yum install -y zlib-devel #安裝OpenSSL密碼庫： yum install -y openssl openssl-devel #安裝pcre正則表達式庫：編譯nginx，需要需要指定pcre的路徑，這里我們選擇安裝穩定版本的。 下載地址：https://ftp.pcre.org/pub/pcre/ #選擇對應的版本下載下來之后上傳到我們的服務器，也可以使用wget直接下載 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

下載編譯安裝nginx：

nginx下載官網：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #編譯指定安裝路徑需要進入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  這是支持https的一個模塊，就是可以使用https：//這樣去訪問。 make && make install #編譯安裝  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

啟動nginx服務：

#啟動： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式啟動  -c #測試： /usr/local/nginx/sbin/nginx -t #這個用于測試nginx的語法是否有問題 顯示is successful即為成功。 #關閉： /usr/local/nginx/sbin/nginx -s stop #繼續輸入以下命令使Nginx開機自動啟動： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

之后我們需要配置服務器公網ip，編輯配置文件。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-TOR7RVwA-1622032930758)(pictures/image-20210526174027780.png)]

之后再重啟nginx服務，開啟hexo服務，這個時候使用公網的ip就可以訪問到我們的hexo服務了！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

部分借鑒自：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

評論(0) 瀏覽(1751)

032021-6

都2021年了，再不學ES6你就out了 —— 一文搞懂ES6

JS干貨分享 —— 一文搞懂ES6

導語：ES6是什么？用來做什么？

導語：ES6是什么？用來做什么？

ES6，全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發版
雖然15年就有正式版本了，但是國內普遍商用是在2018年之后去了，甚至到現在有很多前端仍然搞不懂ES6（都2021年了，兄dei~）
ES6 的出現主要是為了解決 ES5 的先天不足，比如 JavaScript 里并沒有類的概念
目前存在少數低版本瀏覽器的 JavaScript 是 ES5 版本，大多數的瀏覽器已經支持 ES6
ES6提供了大量的語法糖，讓你寫代碼的時候簡直不要太爽！
你必須要知道的是：現在各企業都普遍使用，不會ES6意味著你很難找到工作，上班了你連別人的代碼都看不懂

1. let 與 const

1.1 let 與 var

let：ES6新增，用于聲明變量，有塊級作用域
var：ES5中用于聲明變量的關鍵字，存在各種問題（例如：紅杏出墻~）
如果你的代碼里還存在 var，那你的良心就大大的壞了！

var存在的問題：

 // 1.聲明提升 // 此處會正常打印，但這是錯誤的（屬于先上車后買票了?。?/span> console.log(name); var name = "大帥比"; // 2. 變量覆蓋 var demo = "小明"; var demo = "小紅"; // 此處會打印小紅，這也是錯誤的（屬于套牌車，違法的啊，兄弟） // 同一個項目中，發生變量覆蓋可能會導致數據丟失以及各種不可預知的bug，原則上來說：變量不能重名 console.log(demo) // 3. 沒有塊級作用域 function fn2(){ for(var i = 0; i < 5; i++){ // do something } // 此處會正常打印出 i 的值，這是錯誤的 // i是定義在循環體之內的，只能在循環體內打印，當前現象叫做紅杏出墻?。。?/span> console.log(i); } fn2(); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22

let不會存在上述問題：

 // 1. 不會存在聲明提前 // 此處會報錯（這里必須報錯，原則上來說不能先上車后買票） console.log(name); let name = "大帥比"; // 2. 不會有變量覆蓋 let demo = "小明"; let demo = "小紅"; // 此處會報錯（不能使用套牌車！）告訴你已經定義了此變量。避免了項目中存在變量覆蓋的問題 console.log(demo) // 3. 有塊級作用域 function fn2(){ for(let i = 0; i < 5; i++){ // do something } // 此處會報錯，無法打印，防止紅杏出墻?。?！ // i是定義在循環體之內的，循環體外當然無法打印  console.log(i); } fn2(); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21

const

const 聲明一個只讀的常量，一旦聲明，常量的值就不能改變
一般用于全局變量
通常變量名全部大寫（請按照規則來，不要亂搞，容易出事情）

const PI = "3.1415926"; 


    
        1

2. 解構賦值

解構賦值是對賦值運算符的擴展
針對數組或者對象進行模式匹配，然后對其中的變量進行賦值
代碼簡潔且易讀，語義更加清晰明了，方便了復雜對象中數據字段獲?。?span style="box-sizing:border-box;outline:0px;user-select:text !important;font-weight:700;overflow-wrap:break-word;">簡而言之：用起來很爽！）

在這里插入圖片描述

2.1 用在數組上

let [a, b, c] = [1, 2, 3]; // a = 1，b = 2，c = 3 相當于重新定義了變量a,b,c，取值也更加方便 // , = 占位符 let arr = ["小明", "小花", "小魚", "小豬"]; let [,,one] = arr; // 這里會取到小魚 // 解構整個數組 let strArr = [...arr]; // 得到整個數組 console.log(strArr); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

2.2 用在對象上

let obj = { className : "卡西諾", age: 18 } let {className} = obj; // 得到卡西諾 let {age} = obj; // 得到18 // 剩余運算符 let {a, b, ...demo} = {a: 1, b: 2, c: 3, d: 4}; // a = 1 // b = 2 // demo = {c: 3, d: 4} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

3. 模板字符串

模板字符串相當于加強版的字符串，用反引號 ``
除了作為普通字符串，還可以用來定義多行字符串，可以在字符串中加入變量和表達式

3.1 普通字符串

// 普通字符串 let string = "hello"+"小兄弟"; // hello小兄弟 // 如果想要換行 let string = "hello'\n'小兄弟" // hello // 小兄弟 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

3.2 模板字符串

let str1 = "穿堂而過的"; let str2 = "風"; // 模板字符串 let newStr = `我是${str1}${str2}`; // 我是穿堂而過的風 console.log(newStr) // 字符串中調用方法 function fn3(){ return "帥的不行！"; } let string2= `我真是${fn3 ()}`; console.log(string2); // 我真是帥的不行！ 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

4. ES6 函數（升級后更爽）

4.1 箭頭函數

箭頭函數是一種更加簡潔的函數書寫方式
箭頭函數本身沒有作用域（無this）
箭頭函數的this指向上一層，上下文決定其this
基本語法：參數 => 函數體

a. 基本用法

let fn = v => v;
//等價于
let fn = function(num){
 return num;
}
fn(100);  // 輸出100 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

b. 帶參數的寫法

let fn2 = (num1,num2) => {
 let result = num1 + num2;
 return result;
}
fn2(3,2);  // 輸出5 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

c. 箭頭函數中的this指向問題

箭頭函數體中的 this 對象，是定義函數時的對象，而不是使用函數時的對象。在函數定義的時候就已經決定了

function fn3(){
  setTimeout(()=>{
    // 定義時，this 綁定的是 fn3 中的 this 對象
    console.log(this.a);
  },0)
}
var a = 10;
// fn3 的 this 對象為 {a: 10}，因為它指向全局: window.a
fn3.call({a: 18});  // 改變this指向，此時 a = 18 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

d. 箭頭函數適用的場景

當我們代碼里存在這樣的代碼：let self = this;
需要新建變量去保存this的時候
案例如下：

let Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

4.2 函數參數的擴展

1. 默認參數

// num為默認參數，如果不傳，則默認為10 function fn(type, num=10){ console.log(type, num); } fn(1); // 打印 1，10 fn(1,2); // 打印 1，2 （此值會覆蓋默認參數10） 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

需要注意的是：只有在未傳遞參數，或者參數為 undefined 時，才會使用默認參數，null 值被認為是有效的值傳遞。

2. 不定參數

// 此處的values是不定的，且無論你傳多少個 function f(...values){ console.log(values.length); } f(1,2); // 2 f(1,2,3,4); // 4 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

在這里插入圖片描述

5. Class類

class (類)作為對象的模板被引入，可以通過 class 關鍵字定義類
class 的本質是 function，同樣可以看成一個塊
可以看作一個語法糖，讓對象原型的寫法更加清晰
更加標準的面向對象編程語法

5.1 類的定義

// 匿名類 let Demo = class { constructor(a) { this.a = a; } } // 命名類 let Demo = class Demo { constructor(a) { this.a = a; } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

5.2 類的聲明

class Demo { constructor(a) { this.a = a; } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

請注意，類不能重復聲明
類定義不會被提升，必須在訪問前對類進行定義，否則就會報錯。
類中方法不需要 function 關鍵字。
方法間不能加分號

5.3 類的主體

公共屬性（依然可以定義在原型上）

class Demo{} Demo.prototype.a = 2; 


    
        1
    

    
        2

實例屬性

class Demo { a = 2; constructor () { console.log(this.a); } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

方法：constructor

class Demo{ constructor(){ console.log('我是構造器'); } } new Demo(); // 我是構造器 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

如果不寫constructor，也會默認添加

5.4 實例化對象

class Demo { constructor(a, b) { this.a = a; this.b = b; console.log('Demo'); } sum() { return this.a + this.b; } } let demo1 = new Demo(2, 1); let demo2 = new Demo(3, 1); // 兩者原型鏈是相等的 console.log(demo1._proto_ == demo2._proto_); // true demo1._proto_.sub = function() { return this.a - this.b; } console.log(demo1.sub()); // 1 console.log(demo2.sub()); // 2 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20

6. Map()

6.1 Maps 和 Objects 的區別

一個 Object 的鍵只能是字符串或者 Symbols，但一個 Map 的鍵可以是任意值
Map 中的鍵值是有序的（FIFO 原則），而添加到對象中的鍵則不是
Map 的鍵值對個數可以從 size 屬性獲取，而 Object 的鍵值對個數只能手動計算

6.2 Map中的key

// 1. key是字符串 let myMap = new Map(); let keyString = "string"; myMap.set(keyString, "和鍵'string'關聯的值"); // keyString === 'string' myMap.get(keyString); // "和鍵'string'關聯的值" myMap.get("string"); // "和鍵'string'關聯的值" // 2.key是對象 let myMap = new Map(); let keyObj = {}, myMap.set(keyObj, "和鍵 keyObj 關聯的值"); myMap.get(keyObj); // "和鍵 keyObj 關聯的值" myMap.get({}); // undefined, 因為 keyObj !== {} // 3. key也可以是函數或者NaN  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19

6.3 Map 的迭代

// 1.使用 forEach let myMap = new Map(); myMap.set(0, "zero"); myMap.set(1, "one"); // 0 = zero , 1 = one myMap.forEach(function(value, key) { console.log(key + " = " + value); }, myMap) // 2. 也可以使用 for...of 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

6.4 Map 與 Array的轉換

letkvArray = [["key1", "value1"], ["key2", "value2"]]; // Map 構造函數可以將一個 二維 鍵值對數組轉換成一個 Map 對象 let myMap = new Map(kvArray); // 使用 Array.from 函數可以將一個 Map 對象轉換成一個二維鍵值對數組 let outArray = Array.from(myMap); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

6.5 關于map的重點面試題

請談一下 Map和ForEach 的區別（問到map，必定問到此題）

詳細解析：

forEach()方法不會返回執行結果，而是undefined
map()方法會得到一個新的數組并返回
同樣的一組數組，map()的執行速度優于 forEach()（map() 底層做了深度優化）

性質決定了兩者應用場景的不同

forEach() 適合于你并不打算改變數據的時候，而只是想用數據做一些事情（比如存入數據庫）

let arr = ['a', 'b', 'c', 'd']; arr.forEach((val) => { console.log(val); // 依次打印出 a,b,c,d }); 


    
        1
    

    
        2
    

    
        3
    

    
        4

map() 適用于你要改變數據值的時候，它更快，而且返回一個新的數組

let arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(num => num * 2).filter(num => num > 5); // arr2 = [6, 8, 10]

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。


    
        


    
    
        

    
    
        部分借鑒自：csdn  
    
    
        分享此文一切功德，皆悉回向給文章原作者及眾讀者.
    

    
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
    

    
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

評論(0) 瀏覽(1912)

032021-6

app界面賞析+圖標分享 ——— 北京藍藍設計移動端UI設計資源分享（二十六）

App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。

摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。

接下來為大家分享精美的app UI設計案例：

--手機appUI設計--

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務

更多精彩文章：

手機appUI界面設計賞析（一）

手機appUI界面設計賞析（二）

手機appUI界面設計賞析（三）

手機appUI界面設計賞析（四）

手機appUI界面設計賞析（五）

手機appUI界面設計賞析（六）

手機appUI界面設計賞析（七）

手機appUI界面設計賞析（八）

手機appUI界面設計賞析（九）

手機appUI界面設計賞析（十）

手機appUI界面設計賞析（十一）

手機appUI界面設計賞析（十二）

手機appUI界面設計賞析（十三）

手機appUI界面設計賞析（十四）

手機appUI界面設計賞析（十五）

手機appUI界面設計賞析（十六）

手機appUI界面設計賞析（十七）

手機appUI界面設計賞析（十八）

手機appUI界面設計賞析（十九）

手機appUI界面設計賞析（二十）

手機appUI界面設計賞析（二十一）

手機appUI界面設計賞析（二十二）

手機appUI界面設計賞析（二十三）

手機appUI界面設計賞析（二十四）

手機appUI界面設計賞析（二十五）

評論(0) 瀏覽(2274)

032021-6

網站推廣方式有哪些

網站推廣方式有：1、搜索引擎推廣；2、電子郵件推廣； 3、資源合作推廣；4、信息發布推廣；5、病毒性營銷，即利用用戶之間的主動傳播，讓信息像病毒那樣擴散，從而達到推廣的目的；6、快捷網址推廣；7、網絡廣告推廣；8、綜合網站推廣。

本文操作環境：Windows7系統，Dell G3電腦。

網站推廣的八種基本方式

1、搜索引擎推廣

搜索引擎推廣是指利用搜索引擎、分類目錄等具有在線檢索信息功能的網絡工具進行網站推廣的方法。由于搜索引擎的基本形式可以分為網絡蜘蛛型搜索引擎（簡稱搜索引擎）和基于人工分類目錄的搜索引擎（簡稱分類目錄），因此搜索引擎推廣的形式也相應地有基于搜索引擎的方法和基于分類目錄的方法，前者包括搜索引擎優化、關鍵詞廣告、競價排名、固定排名、基于內容定位的廣告等多種形式，而后者則主要是在分類目錄合適的類別中進行網站登錄。隨著搜索引擎形式的進一步發展變化，也出現了其他一些形式的搜索引擎，不過大都是以這兩種形式為基礎。

搜索引擎推廣的方法又可以分為多種不同的形式，常見的有：登錄免費分類目錄、登錄付費分類目錄、搜索引擎優化、關鍵詞廣告、關鍵詞競價排名、網頁內容定位廣告等。

從目前的發展趨勢來看，搜索引擎在網絡營銷中的地位依然重要，并且受到越來越多企業的認可，搜索引擎營銷的方式也在不斷發展演變，因此應根據環境的變化選擇搜索引擎營銷的合適方式。

2、電子郵件推廣

以電子郵件為主要的網站推廣手段，常用的方法包括電子刊物、會員通訊、專業服務商的電子郵件廣告等。

基于用戶許可的Email營銷與濫發郵件（Spam）不同，許可營銷比傳統的推廣方式或未經許可的Email營銷具有明顯的優勢，比如可以減少廣告對用戶的滋擾、增加潛在客戶定位的準確度、增強與客戶的關系、提高品牌忠誠度等。根據許可Email營銷所應用的用戶電子郵件地址資源的所有形式，可以分為內部列表Email營銷和外部列表Email營銷，或簡稱內部列表和外部列表。內部列表也就是通常所說的郵件列表，是利用網站的注冊用戶資料開展Email營銷的方式，常見的形式如新聞郵件、會員通訊、電子刊物等。外部列表Email營銷則是利用專業服務商的用戶電子郵件地址來開展Email營銷，也就是電子郵件廣告的形式向服務商的用戶發送信息。許可Email營銷是網絡營銷方法體系中相對獨立的一種，既可以與其他網絡營銷方法相結合，也可以獨立應用。

3、資源合作推廣

通過網站交換鏈接、交換廣告、內容合作、用戶資源合作等方式，在具有類似目標網站之間實現互相推廣的目的，其中最常用的資源合作方式為網站鏈接策略，利用合作伙伴之間網站訪問量資源合作互為推廣。

每個企業網站均可以擁有自己的資源，這種資源可以表現為一定的訪問量、注冊用戶信息、有價值的內容和功能、網絡廣告空間等，利用網站的資源與合作伙伴開展合作，實現資源共享，共同擴大收益的目的。在這些資源合作形式中，交換鏈接是最簡單的一種合作方式，調查表明也是新網站推廣的有效方式之一。交換鏈接或稱互惠鏈接，是具有一定互補優勢的網站之間的簡單合作形式，即分別在自己的網站上放置對方網站的LOGO或網站名稱并設置對方網站的超級鏈接，使得用戶可以從合作網站中發現自己的網站，達到互相推廣的目。交換鏈接的作用主要表現在幾個方面：獲得訪問量、增加用戶瀏覽時的印象、在搜索引擎排名中增加優勢、通過合作網站的推薦增加訪問者的可信度等。交換鏈接還有比是否可以取得直接效果更深一層的意義，一般來說，每個網站都傾向于鏈接價值高的其他網站，因此獲得其他網站的鏈接也就意味著獲得了于合作伙伴和一個領域內同類網站的認可。

4、信息發布推廣

將有關的網站推廣信息發布在其他潛在用戶可能訪問的網站上，利用用戶在這些網站獲取信息的機會實現網站推廣的目的，適用于這些信息發布的網站包括在線黃頁、分類廣告、論壇、博客網站、供求信息平臺、行業網站等。信息發布是免費網站推廣的常用方法之一，尤其在互聯網發展早期，網上信息量相對較少時，往往通過信息發布的方式即可取得滿意的效果，不過隨著網上信息量爆炸式的增長，這種依靠免費信息發布的方式所能發揮的作用日益降低，同時由于更多更加有效的網站推廣方法的出現，信息發布在網站推廣的常用方法中的重要程度也有明顯的下降，因此依靠大量發送免費信息的方式已經沒有太大價值，不過一些針對性、專業性的信息仍然可以引起人們極大的關注，尤其當這些信息發布在相關性比較高。

5、病毒性營銷

病毒性營銷方法并非傳播病毒，而是利用用戶之間的主動傳播，讓信息像病毒那樣擴散，從而達到推廣的目的，病毒性營銷方法實質上是在為用戶提供有價值的免費服務的同時，附加上一定的推廣信息，常用的工具包括免費電子書、免費軟件、免費FLASH作品、免費賀卡、免費郵箱、免費即時聊天工具等可以為用戶獲取信息、使用網絡服務、娛樂等帶來方便的工具和內容。如果應用得當，這種病毒性營銷手段往往可以以極低的代價取得非常顯著的效果。關于病毒性營銷的詳細介紹及案例分子請參考本文作者的《網絡營銷基礎與實踐》第2版(http://www.wm23.com)一書相關內容，網上營銷新觀察《120種網站推廣實用方法》系列連載文章中也會有適當介紹。

6、快捷網址推廣

即合理利用網絡實名、通用網址以及其他類似的關鍵詞網站快捷訪問方式來實現網站推廣的方法?？旖菥W址使用自然語言和網站URL建立其對應關系，這對于習慣于使用中文的用戶來說，提供了極大的方便，用戶只需輸入比英文網址要更加容易記憶的快捷網址就可以訪問網站，用自己的母語或者其他簡單的詞匯為網站“更換”一個更好記憶、更容易體現品牌形象的網址，例如選擇企業名稱或者商標、主要產品名稱等作為中文網址，這樣可以大大彌補英文網址不便于宣傳的缺陷，因為在網址推廣方面有一定的價值。隨著企業注冊快捷網址數量的增加，這些快捷網址用戶數據可也相當于一個搜索引擎，這樣，當用戶利用某個關鍵詞檢索時，即使與某網站注冊的中文網址并不一致，同樣存在被用戶發現的機會。

7、網絡廣告推廣

網絡廣告是常用的網絡營銷策略之一，在網絡品牌、產品促銷、網站推廣等方面均有明顯作用。網絡廣告的常見形式包括：BANNER廣告、關鍵詞廣告、分類廣告、贊助式廣告、Email廣告等。BANNER廣告所依托的媒體是網頁、關鍵詞廣告屬于搜索引擎營銷的一種形式，Email廣告則是許可Email營銷的一種，可見網絡廣告本身并不能獨立存在，需要與各種網絡工具相結合才能實現信息傳遞的功能，因此也可以認為，網絡廣告存在于各種網絡營銷工具中，只是具體的表現形式不同。將網絡廣告用戶網站推廣，具有可選擇網絡媒體范圍廣、形式多樣、適用性強、投放及時等優點，適合于網站發布初期及運營期的任何階段。

8、綜合網站推廣

除了前面介紹的常用網站推廣方法之外，還有許多專用性、臨時性的網站推廣方法，如有獎競猜、在線優惠卷、有獎調查、針對在線購物網站推廣的比較購物和購物搜索引擎等，有些甚至采用建立一個輔助網站進行推廣。有些網站推廣方法可能別出心裁，有些網站則可能采用有一定強迫性的方式來達到推廣的目的，例如修改用戶瀏覽器默認首頁設置、自動加入收藏夾，甚至在用戶電腦上安裝病毒程序等，真正值得推廣的是合理的、文明的網站推廣方法，應拒絕和反對帶有強制性、破壞性的網站推廣手段。

文章來源：中文網

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計  、包裝設計、圖標定制、用戶體驗、交互設計、網站建設  、平面設計服務

評論(0) 瀏覽(1950)

« 1 ... 10 11 12 13 14 15 16 »

分類

日歷

鏈接

個人資料

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

存檔

亚洲va欧美va天堂v国产综合