今天和大家一起溫習下2021年占據主導的8個UI和UX趨勢，干貨建議提前收藏！
沒人能夠預測未來會發生什么，但是在數字世界中，趨勢確實存在于設計師的圈子中，并且在有規律的演化中。大家可以已經看膩了不少趨勢研判文章，但是，適當總結一下當年的趨勢，把這個時間線拉長，你會覺得非常好玩。從移動端設計剛開始流行的時代，到現在，設計趨勢都發生了哪些變化呢？它們是不是又會返祖，復古？周而復始？咱們不得而知。
雖然2021年已經過去一半，不過，今天咱們還是先Review一下2021年正在流行的幾個設計趨勢，加深一下印象吧！
當然，各位設計師，趨勢僅僅是一種現象，想要做的出圈，與眾不同，我們必須站在趨勢之上，做出自己的創新，這樣才能在千篇一律的設計中獨當一面。
3D 圖形越來越多地出現在 Web 和移動界面中。毫無疑問，將各種 3d 圖形應用到移動和 Web 界面是一項相當大的挑戰，需要良好的技能和藝術眼光才行。在我們的 UI/UX 設計中添加 3D 元素有很多好處：
ByMako Tsereteli
玻璃擬態是大多人更喜歡的最新UI設計趨勢，它引人注目且色彩繽紛，這種趨勢兼顧透明度和層次感。玻璃擬態設計給人以磨砂玻璃的感覺，近一段最受歡迎的趨勢。這種風格深受蘋果在 2013 年推出的 IOS 7 和 windows vista 中首次引入的類似概念的影響。在許多情況下，如果使用得當，Glassmorphism 可以使網站和應用程序對用戶更具吸引力。
ByMahmudul Hasan Manik
深色主題現在已經成為應用必備的界面了。手機的白色界面可能對我們的眼睛造成更多的刺激，這就是所有應用程序和網站都加入了暗黑模式設計的原因。暗模式有一些我們應該遵循的特定規則。深色主題的主要優點是在弱光環境中具有更好的可讀性。作為 UI 和 UX 設計師，我們應該明白它的主要作用，它主要是減少了用戶的眼睛疲勞并提高了夜間的可讀性。
ByJulius
色彩理論知識在每個 UI 和 UX 設計中都至關重要。正確使用顏色對于為您的客戶創造正面形象很重要，這就是顏色在 UI 和 UX 設計中扮演重要角色的原因。大多數 UI 設計師都使用鮮艷的色彩來將用戶的注意力集中在重要元素上，并使我們的設計令人難忘。下圖分別為單色調和雙色調界面。
By Resuscitation
包豪斯的風格通常被描述為藝術和手工藝運動與現代主義的結合。包豪斯設計幾乎沒有裝飾，注重平衡的形式和抽象的形狀。今天的 UI 和 UX 設計，也可以理解為包豪斯的復興。包豪斯設計在UI設計上的核心，就是將設計簡化為必要的功能，使其美觀和輕松，以及精心制作每一個小細節。
包豪斯設計幾乎沒有裝飾，注重平衡的形式和抽象的形狀。今天的 UI 和 UX 設計也是包豪斯風格的復興表現之一。
By Beto Garza “Helbetico”
在當今的設計中，白色背景越來越受到大家的歡迎。了解色彩心理學是創建配色的一個關鍵方面，這在數字設計中效果很好。吸引用戶的最佳方式是通過“色塊”平衡單色背景色與亮色，以突出數據中的重要內容或者異常提示部分。少即是多，當您在 UI設計中使用較少的顏色時，這將對用戶更具吸引力和亮點。
By Resuscitation
插圖是用戶界面中更直觀的視覺闡述，也一直是UI設計中長盛不衰的“趨勢”之一。動畫插圖，在與用戶交互過程中為UI注入了強大的生命力。它幫助用戶獲得更立體的反饋，為創建更生動的微交互創造了條件。
By Rachelizmarvel
極簡主義是 UI 設計中使用最多的“風格”之一，它有助于改善用戶體驗。在我們的 UI 設計開始極簡設計之前，有必要了解術語“極簡”的含義以及為什么極簡在 ui 中很重要。下面是極簡主義的特征：
By Shakib
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：人人都是產品經理 作者：Tzw_n
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
效果圖如下
//圖例組件
legend: {
top: 'center',
right: 30,
data: [],
width: "auto",
itemWidth: 10, // 小方塊尺寸
itemHeight: 10,
textStyle: {
color:'#90CCFF',
lineHeight:20,
// 通過rich自定義尺寸，加寬度使百分比及數值各自對齊
rich:{
a:{
width:100,
align:'left'
},
b:{
width:40,
align:'right'
}
}
},
orient: 'vertical', // 豎向排列
// 通過formatte自定義格式
// 因為formatter的參數里只有name一個參數，所以需要通過獲取的數據匹配顯示
// 這里的optionData是獲取到的數據，格式為
// optionData:[
// { value: 47.01, name: "水果" },
// { value: 31.67, name: "蔬菜" },
// { value: 12.51, name: "禽畜" },
// { value: 8.24, name: "禽蛋" },
// { value: 7.27, name: "水產品" },
// { value: 6.32, name: "其他" }
// ],
formatter: (name) => {
var total = 0;
var tarValue;
this.optionData.forEach((item,i) => {
total += Number(item.value)
if (item.name == name) {
tarValue = Number(item.value ? item.value : 0)
}
});
var percent = ((tarValue / total) * 100).toFixed(2)
let arr = [
'{a|'+name+" : "+percent+'%}'+'{b|'+tarValue+'張}'
]
return arr
}
}
自定義legend的方式就是這樣，遇到格式不同的可以參考上面的方式自定義
單獨定義echarts中每個圖例的樣式,自定義圖例的點擊方法
//用不同樣式的圖例用數組寫對應圖例的樣式
legend:[{
top: "15%",
right: "24%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微軟雅黑"
},
itemWidth: 27,
itemHeight: 16,
data:[{
name: "農藥",
icon: "circle"
},{
name: "LOL",
icon: "rect"
}]
},{
top: "15%",
right: "15%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微軟雅黑"
},
itemWidth: 33,
itemHeight: 16,
data:[{
name: "農藥+LOL",
icon: "image:///soyking/static/image/echarts/merge.png" //引用自定義的圖片
}]
},{
top: "15%",
right: "15%",
textStyle: {
color: "#3BAEFE",
fontSize: 14,
fontFamily: "微軟雅黑"
},
data:["\n","\n","\n","農藥占比","LOL占比"]
}],
結果:
自定義圖例的方法 (點擊圖例，顯示圖例的選中結果)
var bar = echarts.init(document.getElementById("barDiv"));
//自定義圖例的方法
bar.on("legendselectchanged",function(obj){
//獲取圖例選擇的結果
var selected = obj.selected;
for(var i in selected){
alert(selected[i]);
}
});
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
代碼如下
var data = [ { name: "一次檢驗數/條", value: 150 }, { name: "多次檢驗數/條", value: 80 } ]; var option = { legend: { show: true, left: "center", top: "245", itemHeight: 13, itemWidth: 13, itemGap: 35, icon: "circle", data: data, formatter: function(name) { var total = 0; var target; var value; for (let i = 0, l = data.length; i < l; i++) { value = data[i].value; total += data[i].value; if (data[i].name == name) { target = data[i].value; } } var arr = ["{a|" + name + "}", "{b|" + target + "}"]; return arr.join("\n"); }, textStyle: { rich: { a: { color: "#B6B6B6", verticalAlign: "top", align: "center", fontSize: 12, padding: [0, 0, 28, 0] }, b: { align: "left", fontSize: 18, padding: [0, 10, 10, 0], lineHeight: 25, color: "#181818" } } } },
echarts legend 自定義圖例
legend: {
selectedMode: true,
top: 0,
right: 0,
orient: 'vertical', // itemWidth: 24, // itemHeight: 2, textStyle: {
fontFamily: 'ABBvoiceCNSG-Regular',
fontSize: 12,
}, // icon: 'rect', data: [
{
name:"高嚴重等級報警",
icon:'rect',
},
{
name:"低嚴重等級報警",
icon: 'rect' },
{
name:"健康度",
icon: 'line' }
]
},
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：相信大家都聽說過馬斯洛需求層次理論，那么把它應用到產品需求層次設計中，會是怎樣的場景呢？作者兩個方面給我們分享了如何運用該金字塔進行產品設計，我們一起來看看吧。
美國心理學家亞伯拉罕·馬斯洛 (Abraham Maslow)在 1943 年的論文《人類動機理論》中提出了人類需求的心理層次理論。用金字塔中的五層模型來表示人類的需求。從下到上，需求分別是生理、安全、社交需求、尊重和自我實現。
該理論認為，人類在轉向更高級的需求之前，會先滿足其基本需求。例如：一個饑寒交迫的人不會集中時間和資源尋求伴侶（社交需求），因為他首先滿足生存需求（生理上的）。
隨著時間的推移，馬斯洛的理論被改編并應用于許多新領域。在產品設計領域，2010 年史蒂文·布拉德利 (Steven Bradley)提出了一套有用且實用的規則即“需求設計層次”。
用于創建新產品和評估現有產品的設計。與原始理論一樣，必須首先滿足設計的基本需求才能進入下一階段。Bradley 理論的五個層次是功能性、可靠性、可用性、熟練性和創造力。
根據該金字塔原理，可以考量產品在對應的每個階段要滿足的功能要求。
產品設計最基本但最關鍵的部分是其功能。打車軟件、聊天應用甚至一個杯子是否實現了其主要功能？如果沒有，那么進入其他發展階段就沒有什么意義了。
例如，一個水杯如果不能盛水，不能用來飲用，那么它設計和包裝是否漂亮就無關緊要。
它是無用的，它對消費者就毫無價值。隨著產品的核心功能變得更加豐富，這個過程也會變得更加復雜，需要更多考量。
正如圖表的比例所表明的，產品團隊精力應該專注于完成主要流程和功能。實踐方法：明確產品的定位和用戶畫像，始終深入研究你的客戶期望你的產品用來解決什么問題。可以充分地進行調研。例如：現場調研、用戶訪談、利益相關者訪談等。
可靠性與功能性是同樣重要的設計基礎。用戶能否相信該產品能100% 正常工作？如果用戶不相信你的產品在他每次需要時都能正常工作，他們是否愿意購買使用？
在創建可靠的產品時，關鍵是徹底的測試。實踐方法：進行可用性測試并確保給用戶能提供及時幫助。
可用性需求強調用戶輕松使用你的產品的能力。用戶能否以最少的指導弄清楚如何使用你的產品及其每個功能？例如，一款圖片編輯的應用裁剪和保存功能不直觀，那這款產品可能很難被認可。
實踐方法：可參考尼爾森可用性原則的方法。即：系統狀態的可見性、系統與現實世界相匹配、用戶控制與自由、一致性與標準化、防錯原則、減少認知負擔、使用靈活性和效率優先、簡約設計、提供幫助文檔。
熟練程度是評價真正好的設計的一個標準。為了滿足這一層要求，設計師需要問問自己產品的設計是否有助于用戶更好地使用該產品。
例如：一款針對老年人設計的社交軟件除了基礎的聊天功能外，它應該提供關于該產品的諸多視頻、圖文類教程，來引導用戶更好的使用產品。
實踐方法：要時常思考“這個產品還能做什么？”。它是否會引導用戶發現一種新的更好的做事方式？從某種意義上說，它是進步的嗎？通過與設備的每次交互，用戶是否會發現更多有關其功能的信息？
證明了產品能夠可靠地履行其核心職責后，下一步是通過創新來滿足其他需求。以跑鞋為例，除了功能屬性外還可以展示其稀缺性、款式、地位等附加功能。
實踐方法：分析用戶心理、行為、痛點和動機。發揮創意，尋找創造性的方法滿足用戶的需求，為用戶創造峰值體驗。
以下是來自medium的延伸案例：原文作者：(NATHAN TENDIDO)布拉德利對馬斯洛需求層次的改編有助于我們來理解為什么某些設計比其他設計更好。
為了應用 Bradley 對需求層次的翻譯，我將使用三個搜索引擎（Google、Bing 和 Ask）作為示例來找出明天的天氣。
（1）功能——它有效嗎？
金字塔的底部和最高層是其整個總和中最不有趣但最基礎的部分。沒有效果的產品有什么用？由于我們正在評估搜索引擎，我們可以測試三個搜索產品是否可以正常搜索并得到有效結果。
毫無疑問這三個搜索引擎都運行良好
（2）可靠性——它在我需要的時候工作嗎？
這一步和第一步同樣重要。決定了我對該產品是否信任。幸運的是，這三個引擎在我需要的時候依舊正常工作，即使是在凌晨。
（3）可用性——我能弄清楚如何讓它工作嗎？
好的設計可以通過強化主要的視覺元素對用戶進行引導。這三個搜索引擎都將搜索欄作為主頁上最突出的部分。
谷歌搜索欄
必應搜索欄
Ask搜索欄
比較視覺瀏覽軌跡
當返回搜索結果時，清晰的視覺層次感有助于用戶獲取他們想要查找的信息。如果沒有清晰的視覺層次結構，用戶可能很難完成任務。Ask的搜索結果布局與 Google 和 Bing 相比，明顯就多了一層操作，更不易找到想要的結果。
（4）熟練程度——它能告訴我如何讓它更好地工作嗎？
熟練程度是好的設計與優秀設計的區別所在。熟練程度要求設計可以幫助用戶從頭到尾成為專家。
三個引擎都使用了聯想搜索，以便更高效地引導用戶到達目標。雖然谷歌提供了更好的質量建議，但 Bing 的搜索欄在網頁上更高，讓用戶可以看到更多的建議，而不會被 iPad 鍵盤擋住。
Ask 在這方面則有所欠缺。Google 和 Bing 還提供了其他搜索分類選項。
（5）創造力——該產品對我還有什么用？
在這一點上，這些產品已經完成了它們的基本功能，基礎功能外還包含了更多友好的設計。通常主要是針對用戶未來的訪問進行個性化設置或提供工作空間以完成更多工作。
Google 提供了多種工作區工具，而 Bing 實際上獎勵使用其網站的用戶！
雖然上述案例并不是要抨擊一個網站，但是當 Bradley 的需求設計層次結構被用作通過判斷的標準時，上述三種產品之間的差異變得更突出。
這并不是說 Ask 是一個糟糕的設計。在某些地方，Google 看起來與 Ask 目前的表現完全一樣。這三個網站都可以完成搜索引擎的基本功能。
然而，當把Ask放在 Google 和 Bing 旁邊對比時，Ask 設計中的劣勢變得更加明顯。
如上所示，Bradley 的設計層次結構是思考大多數產品設計的有用過程。
然而，就像馬斯洛的原始理論也有質疑一樣。
馬斯洛的等級制度也難以解釋諸如“饑餓的藝術家”這樣一個人為了追求更高的需要而忽視低級需求的情況。幾乎沒有證據表明人們有動力一次只滿足一個需求水平，除非在需求之間存在沖突的情況下。
布拉德利的理論也不完美。對需求設計層次的批評包括以下問題：設計是否必須可靠才能可用？不能同時滿足這兩個條件嗎？
例如：有些搜索引擎可以滿足基礎的搜索功能，然而在基礎之上拓展的低級廣告引導體驗是好的嗎？設計需求的層次結構絕不是完美的，有可能你參考此結構所做的設計相較之前還要糟糕得多。
然而，更完美產品需要超越這種規范去進一步研究。例如：可以將更精細級別添加到金字塔中。還需要設計者進行更多地思考。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：隨著城市化進程加快，城市的體量在不斷增長，隨之而來的社區形態和管理也在日趨復雜。智慧社區能否解決社區管理之痛呢？本文作者對此進行了分析，與你分享。
社區是城市在小區域范圍內的一個縮影。因為兩者之間的體系結構和發展模式存在一定程度的相似和關聯，所以在智慧城市的建設路徑上，以智慧社區為切口，做好小區域范圍的智慧管理成為當下市場和社會的一個風口，也是治理切口。
在中國，隨著城市化進程加快，城市的體量在不斷增長，隨之而來的社區形態和管理也在日趨復雜。對此，暨南大學教授、華南城市研究會會長胡剛認為，建設智慧社區是作為當下社區建設的重要內容，至少應該包含三方面內容：
一是智慧信息，包括社區信息、住戶信息等基本數據的采集；
二是智慧服務，比如在此次疫情下，部分社區實行封閉管理，居民可以在網上買菜，然后有人幫他們送到門口這樣的服務就很重要。還包括社區的選舉，平時大家都上班，不容易聚集在一起，這時候就需要有這樣的網絡選舉投票服務；
三是虛擬社區，居民可以在虛擬社區聊天、共享資源、處理事務等。
由此可見，智慧社區的建設重點主要有三方面，信息感知、服務延伸以及虛擬社區。在騰訊、華為、曠視、?？低暤确諒S商的解決方案里，都能看到類似的思路和落腳點。但是如果說真正做好這三點內容的社區平臺，或許還屬微信。
為什么要這么說呢？
在這里需要理清一點，對于智慧社區建設，大部分人認為應該是房地產商、科技公司或者安防廠商的事情，但是實際上并不是，社區群眾也在參與其中的建設，以微信為支點的數字化社區正在加速形成。
值得一提的，以微信為支點推動數字化社區的成功構建并不能歸功于騰訊，而是社區群眾。
這是一個自發的、自上而下的、無意識的社會行為，微信只是一個“被民眾借用”的工具或者說平臺。
微信作為移動互聯網時代國內最大的社交軟件和聚合平臺，很多服務和模式實際上已經逐步跳脫出了它原本的范疇，通過用戶自發形成的社群成為了很多新概念的實踐場所。就以智慧社區來說，或許很多廠商還沒想明白要如何切入龐大的人群體系，實際上社區群眾已經在微信群上做到了胡教授所提及的三大內容：
首先是信息感知。盡管這樣面向小區住戶的信息采集不全面、不系統，但是通過微信群，大部分社區確實在人員信息收集、人員聯絡和信息傳達方面實現了很多跨越。過去需要挨家挨戶上門、打電話通知的內容，在短期內都能實現雙向傳遞和感知。
廣西某小區物業人員張春花（化名）告訴“智能相對論”，“從疫情爆發到現在組織打疫苗，微信群都幫了我們很多的忙，解決了大部分的聯絡組織工作。只要把通知、鏈接發到群里，艾特大伙，基本都能通知到，實在是沒有反饋的再通過電話或上門的形式傳達一下就行。包括現在誰沒打疫苗、第一針、第二針，只要在群里吆喝一下，都能快速的組織起來……”
其次是智慧服務。實際上，對于張春花所在小區的業主來說，智慧服務是什么，他們還搞不清，但是比起以前，現在通過微信群的方式，很多服務確實方便了許多。陳先生（業主）提到，“當時疫情那會兒，物業就是在微信群上來幫各家各戶統計買菜信息、送菜什么的，很方便?，F在有什么社區投票、活動舉辦的事情，我們基本都是在微信上來參與和討論?！?
最后是虛擬社區。這對于微信群來說，基本沒有什么異議。本來作為一個社交平臺，微信給用戶帶來的就是一個虛擬社區的概念。現在各家各戶有什么事情需要幫忙、或是信息需要分享的話，基本上都會通過業主群來進行發布和傳達，平常沒事也會聚在一起聊聊天、發發紅包活絡一下。
張春花表示：“小區的老人們經常在群里討論跳舞、下棋什么的，要是遇到下雨天，也都會在群里嘮嘮嗑，念叨念叨，看著他們這樣互動，有種回到以前住在村里的感覺……?！蔽⑿湃簩τ谒麄儊碚f，儼然成了另一個線上的社區。
可以說，微信群的存在很好的將社區的人連接了起來，為智慧社區的構建提供了一個基本的雛形。這種基于群眾力量自發形成的新社群，是現在很多小區管理推進的常態。
很顯然，作為一個自下而上的自發行為，社群的形成在一定程度上解決了很多社區管理的問題，但也存在諸多槽點，限制了這種模式的進一步發展。
1. 社群不系統、不全面，缺乏必要的頂層設計。
自發形成的社群本質就是片面的，它無法構成一個系統、全面的體系，很難在智慧社區的建設上發揮統領全局的作用。以具體反饋來看，雖然業主群可以覆蓋大部分的住戶，但是并不是全部，仍舊存在“漏網之魚”，而且在信息管理上，社區也將處于一個非常被動的局面，住戶可以選擇提供信息，也可以選擇不提供信息，很難規范住戶的信息條例。
這也意味著，未來的智慧社區建設在信息感知上需要化被動為主動，借助更加有效的設備或模式來提高信息感知能力。正是看到了這種進階的需求，所以科技廠商和硬件廠商此前在做智慧社區的時候，大多會從頂層切入，從全局出發來進行社區改造。
比如曠視科技目前提出的以人臉為ID的AI方案就是這樣——用戶經過小區門禁刷臉進入小區，系統可以自動識別并做好人員管理，使得進出小區的人員數據都能得到全面感知?；谌藛T數據的高度識別，智慧社區在人員管理方案，智能停車、智能物業，智能地產、安防、零售等方面都能獲取相應的數據支持，從整體上把控社區的管理工作。
2. 社群做好了“人”的連接工作，但是沒能做好“物”的數字化升級。
社群的另一個本質是人的聚集，對于業主群來說，它只是做好了人群的溝通、連接工作，但是在整個社區范圍內，僅是做好人的工作，還不足以構建一個高效、便捷的智慧社區，仍需要在“物”的基礎上實現數字化升級，比如監控、快遞、消防、電梯等等場景。
“人”與“物”構成智慧社區建設的兩條路徑，對比來看，?？低暤扔布S商更傾向于后者的升級——通過智能硬件，比如監控攝像頭、門禁設備、對講設備等的支撐，海康威視能在多個社區場景里進行數字化升級，來實現社區智慧化的表現。
比如，有了智能攝像頭，社區的管理系統可以對小區的可疑人員進行預警、對電梯內進入電瓶車等危險行為予以提示、對高空拋物等違法行為提供24小時監管，等等。物理設備的數字化升級對于智慧社區的搭建尤為關鍵，可以說等同于社區智慧化的基礎，這是微信群無法實現的。
3. 去中心化的社群無法接軌智慧城市建設。
社群是一個去中心化的概念，它由業主自發的創建，也可能會因為各種人為原因崩塌，比如廣告過多、管理不善、業主矛盾等等。這種不穩定的模式很難進一步拓展應用，只能作為一個輔助性的管理。
特別是對于智慧社區的構建而言，未來的城市智慧化需要建立在一個又一個的智慧社區之上，因此要考慮到智慧社區與智慧城市的協同發展就必須要有一個穩定的系統予以支持。對此，我們可以看到中國電信在打造智慧社區的過程中，積極推動社區系統接軌電力、水力、燃氣、養老等政務服務系統，使得小區人員可以足不出戶的享受到購電、購氣、通信繳費等服務，也確保了社區數據連接城市系統，實現雙向互利。
那么，對于智慧社區的建設而言，社群存在諸多缺陷，很難進一步推動我國數字化建設，需要更多服務廠商從大局出發，做好頂層設計來構建一個全面、高效的智慧社區。
盡管如此，但是對于智慧社區的構建來說，并不是一個極端地行為，它不需要推到一個模式，再樹立另一個模式。反之，不同的路徑在當前復雜的建設進程上都應該被重視，在融合中發揮更加顯著的價值。
簡單來說，群眾的社群路線和廠商的技術路線不沖突。在當前的現實情況下，社區的管理和人員聯絡需要微信支持，這是毋容置疑的。前者是“人”的數字化，后者是“物”的數字化，如何把這兩方面結合起來發揮雙重價值，才是智慧社區的未來所在。
因此，“智能相對論”認為，在智慧社區的構建上，騰訊是具有顯著優勢的。在濱海泰達智慧社區的建設上，騰訊就展現了這一優勢——通過投入老人關愛門磁，依托物聯網技術，利用實時感應傳輸功能打通網格化平臺，泰達街道能做到對獨居老年人等特殊人群居家情況的動態掌握，一旦出現異常情況，社區網格員便可通過微信接收到實時異常告警，精準服務相關人群。
簡單來說，騰訊手握微信，在“人”的數字化上具有明顯的優勢，其未來只需要做好“物”的數字化，就能進一步推動智慧社區的構建。但這并不意味著騰訊會比其他廠商少做一個層面的事情，相反的，如何繼續拓展微信的社群優勢需要騰訊做更進一步的構思和驗證。社群對于智慧社區建設的想象力還沒有觸碰到天花板。
在湖北宜昌，企業微信正在實現治理規范化，成為當地網格化管理向互聯網拓展的新載體，也成為了社區居民互助、交流、自治的微載體。
具體來看，社區網格員通過企業微信建立統一的社群，網格員形象統一，有官方認證的身份，形成“中心化”管理的雛形。同時，基于企業微信和微信互通的能力，社區普通居民使用微信即可與網格員聯系，也可在群中反映噪音、污染、故障等各種問題。而除了在群內溝通，網格員進行跟進調解外，還可以把相應的問題通過企業微信工作臺提交工單，轉給橫向的相關部門，如城管、環保、公安等部門處理。
簡單來說，在企業微信的支持，社群有了官方人員的介入逐步形成了一個更加系統和有效的社區管理與治理同步的體系。這對于騰訊而言，就是在“人”的數字化上發揮出了真正的信息優勢。
對于其他廠商而言，這并非是不可超越的。中國電信的短信通知同樣可行，只是相比微信缺乏了一點社群交互的基礎，但在連接人的功能上并不輸給微信。因此，對于一眾服務廠商來說，若能準確地認識到“人”與“物”的雙重數字化需求，也就能快速地把握智慧社區的建設思路，來打造出一個全面智慧化的社區。
如今，新小區的搭建、“老舊改”的推行，智慧社區依舊是一個沒有邊界的藍海市場，據數據顯示，2020年中國智慧社區產業規模達到5000億，近3-5年仍將以至少40%的比例增長。而市場上，更多的廠商仍在專注于“物”的智慧化和數字化，對于連接人的工作似乎都丟給了微信，但伴隨著智慧社區的需求愈發增長，或許其他的廠商也會逐漸把目光轉向社群的搭建和經營之上。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
JS中的對象是屬性和行為的結合體，其中屬性是對象的靜態特征，行為又稱方法，是對象的動態特征。
JavaScript中的對象主要分為三大類：
定義非空對象
// 非空對象： var 對象名 = { 屬性名： 值, ... 方法名: function([參數]){ 方法體語句; } ... }
var p1 = { color: '黑色',//給對象添加屬性 weight: '188g',//屬性之間用逗號隔開 screenSize: 6.5, call: function(name){//給對象添加方法 console.log("打出電話："+name); }, sendMassage: function(msg){ console.log("發出的信息是："+msg); }, playVideo: function(){ console.log("播放視頻"); }, playMusic: function(){ console.log("播放音樂"); } } console.log("手機顏色:"+p1['color']);//也可以使用 對象['屬性']來輸出屬性值 console.log("手機重量:"+p1.weight); console.log("屏幕尺寸:"+p1.screenSize); p1.call("張三");//調用對象的發方法 p1["sendMassage"]("helo"); p1.playVideo(); p1.playMusic(); console.log(p1);
使用new Object()創建對象
var p = new Object(); // 創建一個空對象p
p2.name = '劉備'; p2.sex = '男'; p2.age = 32; p2.sayHello = function(){ console.log('Hello'); } p2.sayHello();//調用對象的方法
可以使用構造函數來創建對象：
語法： new 構造函數名( )
function Student(name,sex,age){ this.name = name;//這里的this指向的是構造函數新創建的對象 this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓別："+this.sex) console.log("年齡："+this.age) } } var s1 = new Student('喬峰','男',28);//s1為構造函數創建的新對象 即實例 s1.show(); var s2 = new Student('段譽','男',23); s2.show();
注意："構造函數"可以有參數，也可以沒有參數，如果沒有參數小括號可以省略
遍歷對象的屬性和方法：使用for…in循環
for(var 變量名 in 對象名){ 循環語句 }
function Student(name,sex,age){ this.name = name; this.sex = sex; this.age = age; this.show = function(){ console.log("姓名："+this.name) console.log("姓別："+this.sex) console.log("年齡："+this.age) } } // s2是要遍歷的對象 var s2 = new Student('段譽','男',23); for(var k in s2){ console.log(k);//依次輸出 name sex age show() console.log(s2[k]);//依次輸出 段譽 男 23 }
in運算符
判斷成員(屬性)在對象中是否存在，存在返回true;不存在返回false。
JavaScript提供了很多常用的內置對象，包括數學對象Math、日期對象Date、數組對象Array以及字符串對象String等。
Math對象：用來對數字進行與數學相關的運算，不需要實例化對象，可以直接使用其靜態屬性和靜態方法.
Math對象:不需要實例化
Math.PI:算數常量PI Math.abs(x):返回x的絕對值
Math.max(args...):返回最大數
Math.min(args...):返回最小數
Math.pow(x,y):返回x的y次方
Math.sqrt(x):返回x的算術平方根
Math.random():返回0.0到1.0之間的隨機數
Math.round(x):返回最接近x的整數
Math.floor(x):返回一個小于等于x 并且與它最接近的整數
Math.ceil(x):返回一個大于等于x 并且與它最接近的整數
Date對象：需要使用new Date()實例化對象才能使用，創建一個對象 Date()是一個構造函數，可以給該構造函數傳遞參數生成一個日期對象。
// 1.創建一個Date對象 沒有參數 var date1 = new Date(); console.log(date1); // 2.傳入年 月 日 時 分 秒 創建一個指定日期時間的Date對象 // 月份是 0-11 var date2 = new Date(2021,4,22,10,17,55); console.log(date2); // 3.傳入一個日期和時間字符串創建一個Date對象 var date3 = new Date("2021-5-22 18:19:25"); console.log(date3); console.log(date3.getMonth())//4 console.log(date3.getTime())//表示Date對象距離1970年1月1日午夜之間的毫秒數 console.log(date1.toLocaleDateString())//2021/6/14 console.log(date1.toLocaleString())//2021/6/14 下午11:17:36 console.log(date1.getFullYear())//2021
數組：是一些類型相同的數據的集合，它和普通的對象功能類似，也是用來存儲一些值，數組是使用數字來作為索引操作內部的元素。
數組的創建
var arr=[]//創建一個空數組
var arr = new Array();//定義一個空數組
判斷一個對象是不是數組的兩種方法：
var arr = []; var obj = {}; console.log(Array.isArray(arr));//true console.log(Array.isArray(obj));//false console.log(arr instanceof Array);//trrue
關于數組的其他方法之前的文章要有詳細介紹，這里不多做解釋。
String對象:字符串對象，必須使用new String()來創建
字符串常用方法
- charAt(n) 返回n位置上的字符串 - concat(s1,s2,...) 連接多個字符串 - charCodeAt(n) 返回n位置上的ASCII碼 - split('分隔符') 將字符串按給定的分隔符 轉換成字符串數組 - substr(start,length) 從start開始提取length個字符構成一個新串 - substring(from,to) 提取from和to之間的字符串構成一個新串 - toLowerCase() 將串中的大寫字符轉換成小寫 不影響原字符串 返回一個新字符串 - toUpperCase() 將串中的所有小寫轉換成大寫 不影響原字符串 返回一個新字符串 - replace(str1,str2) 使用str2替換字符串中的str1 返回替換結果 不影響原字符串
// 輸入一個由字母組成的字符串,統計串中每個字母出現的次數 var str = 'abBSdXbdea'; var lower = new Array(26);// 存放26個小寫字母各自出現的次數 var upper = new Array(26);// 存放26個大寫字母各自出現的次數 // 初始化兩個數組 for(var i=0;i<lower.length;i++){ lower[i] = 0 upper[i] = 0 } for(var k=0;k<str.length;k++){ if(str.charAt(k)>='a' && str.charAt(k)<='z'){ lower[str.charCodeAt(k)-97]++ }else if(str.charAt(k)>='A' && str.charAt(k)<='Z'){ upper[str.charCodeAt(k)-65]++ } } console.log(lower); console.log(upper);
/* 輸入一個十進制整數和一個數制（2、8、16）將該十進制整數轉換成
對應的數值格式輸出
取余法：
m=15 k=8
m%k 將余數存放在數組中
*/ var m = parseInt(prompt('請輸入一個整數：')); var k = parseInt(prompt('請輸入一個數制(2~16)')); var result = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; var arr = new Array();//存放數制轉換的結果 var i = 0; while(m!=0){//對m進行數制轉換 將余數放在arr數組里 arr[i] = m%k; m = parseInt(m/k); i++; } var str = ''; if(k==8){ str = '0'; }else if(k==16){ str = '0x'; } for(var i=arr.length-1;i>=0;i--){ str += result[arr[i]]; } console.log('轉換的結果為：'+str);
值類型: 簡單的數據類型(字符串,數值型,布爾型,undefined,null)
引用類型: 復雜數據類型(對象) 變量中保存的是引用的地址
注意： 引用類型的特點是，變量中保存的僅僅是一個引用的地址，當對變量進行賦值時，并不是將對象復制了一份，而是將兩個變量指向了同一個對象的引用。
下面對內存中的棧和堆進行分析
棧(stack)：會自動分配內存空間，會自動釋放，簡單數據類型存放到棧里面。
堆(heap)：動態分配的內存，大小不定也不會自動釋放，復雜數據類型存放到堆里面。
由此可見存放在堆內存中的對象，變量實際保存的是一個指針，這個指針指向另一個位置，通過這個指針來尋找堆中存儲的對象的屬性和值，并且每個空間大小不一樣，要根據情況開進行特定的分配。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自csdn博客
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1.隨著互聯網的發展，頁面傳遞給后臺有太多需要驗證的東西，盡管后端的代碼是能夠實現對傳遞過來的數據進行校驗和判斷的，但是這樣的話無疑是加重了后臺程序的工作任務量，于是廣大互聯網工作人員迫切需要有一種新的辦法/語言能夠實現這樣的效果，于是js也就是在這樣的一個大的時代背景下誕生的
2.js最開始的時候是不叫js而是叫scrpit語言，他們也想將這個前景光明的明日之星賣給微軟，但是微軟沒有買下，在種種機緣巧合之后被Sun公司收購了，為了讓其與java語言走的近點 ，更是改名為JavaScript簡稱為js
在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成
1997年，在ECMA（歐洲計算機制造商協會）的協調下，由Netscape、Sun、微軟、Borland組成的工作組確定統一標準：ECMA-262。
1.弱類型語言：在書寫的時候不去做明確的數據類型的限定 例如 var a=3.14 var b=“998”
2.運行在瀏覽器端的解釋執行性語言(js—>node.js可以運行在服務器上)
3.基于對象的編程語言
4.跨平臺性：JavaScript是依賴于瀏覽器本身，與操作環境無關，只要能運行瀏覽器的計算機，并支持JavaScript的瀏覽器就可正確執行。從而實現了“編寫一次,走遍天下”的夢想。
5.動態性：JavaScript是動態的，它可以直接對用戶或客戶輸入做出響應，無須經過Web服務程序。它對用戶的反映響應，是采用以事件驅動的方式進行的。所謂事件驅動，就是指在主頁（Home Page）中執行了某種操作所產生的動作，就稱為“事件”（Event）。比如按下鼠標、移動窗口、選擇菜單等都可以視為事件。當事件發生后，可能會引起相應的事件響應。
可以簡單的理解為：只要用戶發出動作，js就會產生響應
6.安全性：JavaScript是一種安全性語言，它不直接允許訪問本地的硬盤，并不能直接將數據存入到服務器上，不允許對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互。從而有效地防止數據的丟失。
小結：js現在的用途
1）作用于瀏覽器端幫助提升用戶的體驗度
2 ) 可以用來編寫游戲腳本
3）可以被構建成各種組件(node.js,React.js，vue.js, Jquery)
<html> <head> <meta charset="UTF-8"> <title>JS</title> </head> <body> <script type="text/javascript"> alert("Hello World"); /*彈出對話框*/ </script> </body> </html>
小結：1.js在頁面內使用的時候必須要寫在<script>標簽內
2.js代碼書寫的時候不用分號標識一行編程語句的結束
3.在js代碼中xxx():此時表明這是一個函數
4.alert():以彈窗的形式將括號內的內容展示出來
JavaScript： 是一個腳本語言。它是一個輕量級，但功能強大的編程語言
1.數據類型：雖然JavaScript在書寫校驗上不去區分數據的類型，但是并不意味著是不區分數據類型，而是通過在瀏覽器中內置的JS解析器/引擎自動的去判斷的
---------------------------------------------------------------------------------------------------------
1.1數字：
var a=12 //整數
var b=2.3 //浮點數或者說是小數型
var c=-0.5
友情提示：1）在js中變量名必須以字母或下劃線（"_"）開頭
2）變量可以包含數字、從 A 至 Z 的大小寫字母
3）JavaScript 區分大小寫，即變量 myVar、 myVAR 和 myvar 是不同的變量
---------------------------------------------------------------------------------------------------------
1.2邏輯型或布爾型：
var a= true
var b=false
alert(a)
alert(b)
---------------------------------------------------------------------------------------------------------
1.3Undefined 和 null
Undefined： 用于存放 JavaScript 的 undefined 值，表示一個未聲明的變量，或已聲明但沒有賦值的變量，或一個并不存在的對象屬性
null:可以通過將變量的值設置為 null 來清空變量，其意思為空值
var a=""
var a=null
var a
alert(typeof(a))
---------------------------------------------------------------------------------------------------------
1.4字符串： 可以使用單引號或雙引號
var firstName=“biil”
var familyName=‘Gates’
alert(firstName+familyName)
---------------------------------------------------------------------------------------------------------
1.5日期：
var myDate=new Date()
alert(myDate)/默認是格里尼形式的日期格式/
提示：Date是js中的一個內置的類
new：為類Date在內存中創建一個內存空間，進而實現實例化
補充：關鍵字：就是具有特殊含義的詞
---------------------------------------------------------------------------------------------------------
1.6數組：是一種存放數據的容器，其一般可以存放多個，且需要知道其長度
var array=[40, 100, 1, 5, 25, 10]
alert(array[0])
---------------------------------------------------------------------------------------------------------
注釋：
單行注釋：//
多行注釋：/**/
擴展：注釋的作用：
1）統一規范
2）注解，幫助理解/閱讀代碼
3）扯淡
---------------------------------------------------------------------------------------------------------
連接字符和轉義字符：
連接字符：在js中場用+表示為連接字符
例如： var a=123
alert(‘變量a的值為：’+a)
轉義字符：具有特殊含義的字符
\n 換行符 alert(“這是第一局 \n 這是第二句”)
\t 制表符 alert(“這是第一局 \t 這是第二句”)
---------------------------------------------------------------------------------------------------------
2.運算符：
2.1算術運算符： +， -， *， /， %，++，--
++：自動加1 例如 var a=12
alert(a++)
++在前：先計算再輸出； ++在后：先輸出再計算
–：自動減1，例如 var h=6
alert(a–)
---------------------------------------------------------------------------------------------------------
2.2關系運算符： > ，>=， <，<=, !=, ==,===
---------------------------------------------------------------------------------------------------------
2.3邏輯運算符：
與 ：&& ：全真為真，只要有一個假則為假
或 ：|| ：全假為假，只要有一個為真則為真
非 ：！ ：取相反的
JavaScript 可以通過不同的方式來輸出數據：
1）使用 window.alert() 彈出警告框。
<html> <body> <h1>使用 window.alert() 彈出警告框</h1> <script> window.alert(5 + 6); </script> </body> </html>
2）使用 document.write() 方法將內容寫到 HTML 文檔中。
<html> <body> <h1>我的第一個 Web 頁面</h1> <script> document.write(123); </script> </body> </html>
3）使用 innerHTML 寫入到 HTML 元素。
<html> <body> <h1>使用 innerHTML 寫入到 HTML 元素</h1> <p id="demo">我的第一個段落</p> <script type="text/javascript"> document.getElementById("demo").innerHTML = "段落已修改。"; </script> </body> </html>
使用innerHTML方法，將前面定位到的選擇器中的標簽內容進行更改
4）使用 console.log() 寫入到瀏覽器的控制臺。
<!DOCTYPE html> <html> <body> <h1>使用 console.log() 寫入到瀏覽器的控制臺</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
console.log()會將想要輸出的數據寫到網頁的控制臺中顯示
1）順序語句：js默認是從上向下自動執行的
2）選擇語句：
2.1）二路分支：
if(條件)
{
//JavaScript代碼;
}
else
{
//JavaScript代碼;
}
2.2）多路決策：
switch (表達式)
{
case 常量1 :
JavaScript語句;
break;
case 常量2 :
JavaScript語句;
break;
…
default :
JavaScript語句;
}
小結：switch…case…default不僅有多路決策的特性，還有穿透性
或者：
if (time<10) { alert("早上好"); } else if (time>=10 && time<16) { alert("中午好"); } else { alert("晚上好!"); }
3）循環語句：
for循環語句：
for (var i=0;i<10;i++) { alert("當前i的值為:"+i) }
while循環語句：
var i =1 while (i>5) { alert("當前i的值為："+i) i++; }
do…while循環：
var i=5 do { alert("執行了") i++; } while (i<5);
備注：for：知道次數的循環
while：>=0次的循環
do…while：>=1次的循環
break：語句用于跳出循環。
continue：用于跳過循環中的一個迭代。
1.typeof 操作符：可以使用 typeof 操作符來查看 JavaScript 變量的數據類型。
2.將數字轉換為字符串
var a=123 //第一種方法，用String //var castResult=String(a) //第二種方法，用toString方法 var castResult2=a.toString() alert(typeof(castResult2))
3.將字符串轉換為數字
var a="123" //用Number轉換 var b=Number(a) //用parseInt方法將字符串強行轉換為數字 //var b=parseInt(a) alert(typeof(b)) alert(b+998)
1.match():匹配字符串可用正則表達式
2.search() 方法 用于檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，并返回子串的起始位置
var str = "abcderfha"; //返回查找到的下標位置 alert(str.search("er")) //返回 4 //查查找不到的時候返回-1 alert(str.search("zy"))//返回-1
3.replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
var str = "Hello World"; alert(str.replace("World","javascript"))//顯示結果為Hello javascript
語法： function 函數名( ){
}
實例一
<html> <head> <meta charset="UTF-8"> <title>JS函數</title> </head> <script type="text/javascript"> function sum(a,b){ alert(a+b) } </script> <body> <input type="button" value="求和" onclick="sum(3,4)" /> </body> </html>
定義一個求和函數，當點擊求和按鈕的時候將計算出傳入的兩個參數的和
ps：onclick單擊事件
var xx =function(x,y){
alert(x+y)
}(23,34);
或
(function( o ){
alert(o)
})(“你好”)
實例二：
<script type="text/javascript"> var fun=function(a,b){ alert(a+"\n"+b) } fun(12,45); </script> ------------------------- <script type="text/javascript"> (function( o ){ alert(o) })("你好") </script>
創建一個數組：三種方式
1：常規方式
<script type="text/javascript"> var myCars=new Array(); myCars[0]="nike" myCars[1]="李寧" myCars[2]="安踏" alert(myCars[1]) </script>
2：簡潔方式
<script type="text/javascript"> var myCars=new Array("nike","李寧","安踏"); alert(myCars[1]) </script>
3：字面方式
<script type="text/javascript"> var myCars=["nike","李寧","安踏"]; alert(myCars[1]) </script>
2：訪問數組：通過指定數組名以及索引號碼，你可以訪問某個特定的元素
例如：var name=myCars[0];
3:數組的方法和屬性
數組名.length ： 數組 中元素的數量
數組名.indexOf(“abc”)：“abc” 值在數組中的索引值
4：數組的排序
數組名.sort(); ：將數組按正序排序，但是是按照字符串的排序方式來排序，不管里面是數字還是什么都是按字符串的排序方式來排序
reverse（）：將一個數組中的元素的順序反轉，（即是將數組中的元素的頭變成尾，尾變成了頭，不是其他的）
擴展：將數組先用sort（）方法進行正序排序，在利用reverse（）方法反轉，即可達成降序的目的
字符串中常用的屬性和方法
str.length:獲取字符串的長度
str.match("")：內容匹配
str.replace（）：替換內容
var str="adsfadsf"; var n=str.replace("adsf","abcx"); var s=str.length;
1.對象：是屬性和/方法的組合
屬性：是對象所擁有的一組外觀特征，一般為名詞
方法：是對象可以執行的功能，一般為動詞
例如：對象：汽車
屬性：型號：法拉利 顏色：綠色
方法：前進、剎車、倒車
PS:三類已經存在的對象：
瀏覽器對象：BOM(已經存在于瀏覽器中的，到時候我們直接調用即可，例如Screen,History,Location,Navigator)
js腳本對象:數組，字符串，日期，Math等(JS語言中已經寫好的具有某一些功能的對象，例如Array,Number,Math…)
HTML文檔對象：DOM（已經存在于HTML中的，且已經寫好了，用的時候可以直接調用即可，例如Document）
例如：
<script type="text/javascript"> function Car(name,color) { this.name=name; this.color=color; this.type="轎車"; this.fun=function(){alert("100km/h");} } var car1=new Car("奧迪","藍色"); var car2=new Car("奔馳","綠色"); alert(car1.type); //轎車 car1.fun();//100km/h </script>
1.id選擇器：通過 id 查找 HTML 元素，如果找到該元素，則該方法將以對象的形式返回該元素。
document.getElementById("id1").value //獲取id為id1的標簽中的value值
2.name選擇器：通過name查找到HTML的元素，如果找到元素了，則會返回一個數組
var arr=document.getElementsByName("like") //將name為like的標簽全部存入arr數組中
3.通過標簽名找到 HTML 元素：
getElementsByTagName("p"); var habbies=document.getElementsByTagName("input")//其他的都與步驟2一樣
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>確認框</title> </head> <body> <p>點擊按鈕，顯示確認框。</p> <button onclick="myFun()">點擊</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=confirm("是否提交商品訂單");//彈出一個確定框，確定，返回true，取消返回false if(r==true){ x="提交成功，已確定" } else{ x="提交失敗，已取消" }、 //抓取掉id為demo的標簽，在屏幕顯示x內容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
點擊確定，會在屏幕顯示”提交成功，已確定“，點擊取消，會在屏幕顯示"提交失敗，已取消"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>確認框</title> </head> <body> <p>點擊按鈕，顯示輸入框。</p> <button onclick="myFun()">點擊</button> <p id="demo"></p> <script type="text/javascript"> function myFun() { var x; var r=prompt("請輸入你的名字","Hello"); //彈出對話框，可輸入名字 //判斷如果輸入的不為空或者不是空字符串，則x被賦值 if(r!=null && r!=""){ x="早上好"+r+"今天又是新的開始，加油" } //抓取掉id為demo的標簽，在屏幕顯示x內容 document.getElementById("demo").innerHTML=x; } </script> </body> </html>
點擊確定以后則會將被賦值的x顯示在屏幕中
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自csdn博客
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一年前更新了文章《交互手勢的容錯性和邏輯性》之后，有很多讀者朋友詢問是否能夠做一個詳細的講解交互手勢的系列文章，講解每個手勢的不同之處、應用場景以及在工作中如何使用。
我非常理解這些讀者的痛點，因為我在日常的工作中，也經常遇到一些難題。比如同樣是滑動，但是些許參數的變化就會導致體驗的天差地別，應該如何進行選擇。再比如與開發同學溝通過程中如何準確描述自己想要的效果，讓最后的結果不至于與自己的預期不一致。這些難題也促使我大量思考，大量體驗各種產品的手勢操作，希望能夠從中總結出規律，讓手勢的設計與落地能夠有理有據?，F在經過一段時間的積累，我認為我在這方面可以講一些能夠幫助大家的內容了。不足之處，希望大家指正。今天給大家帶來專欄的第一篇《交互手勢全解析之位移類手勢》。
手勢作為圖形界面與用戶之間溝通的方式之一，在便攜電子設備上大量應用。與實體按鍵相比，它有著純粹的簡潔性和無盡的創造性，手指的個數變化、不同變量的組合能夠創造出無數的操控方式。
位移類手勢是指代那些通過手指接觸屏幕后的位置變化從而操控電子設備的手勢，本篇文章主要講解單指操作的位移類手勢，多指的位移類手勢（如捏合）將放到后續文章中講解。
一談到位移類手勢，大部分設計師的腦海中可能會浮現出拖拽、甩動和輕掃這三個術語。然而，當我們想仔細談論他們三者之間的區別時，大部分設計師可能無法準確地描述。為了能夠準確描述三者的區別，我們在這里引入三個維度的概念，它們分別是控制方式、穩定化效果、以及閾值類型，這三者的不同的變化組合可以創造不同的位移類手勢，拖拽、甩動和輕掃之間的區別也是這三個維度影響的。當我們在討論不同位移類手勢之間的區別時，不如說是在討論這三個維度之間的區別。比如常見的輕掃手勢，因為這三個維度的變化就會產生不同的變種，而且不同變種在體驗上也存在很大差別，若不分場景隨意使用，很容易就影響用戶體驗。那接下來我們首先了解一下這三個維度。
第一個維度是控制方式，它分為絕對控制和相對控制，也可以通俗的表達為跟手和不跟手，區別如下。
絕對控制/跟手：施加控制的一方（后文簡稱施控物）的某個屬性變化與被施加控制的一方（后文簡稱受控物）的某個屬性變化是對應的。
相對控制/不跟手：施控物的某個屬性變化與受控物的某個屬性變化不是對應的。
比如在網易云音樂的播放頁，左右滑動黑膠時，手指是施控物，黑膠是受控物，手指的橫向位置變化和黑膠的橫向位置變化是對應的，即絕對控制。上滑調出評論頁時，評論頁的位置和手指的位置沒有對應關系，手指的上滑僅僅控制評論頁是否出現，即相對控制。
與相對控制相比，絕對控制允許用戶去操控受控物的屬性變化過程，因此給予了用戶更強的掌控感。比如在微信讀書閱讀頁邊緣右滑，手指的橫向位置與書籍封面的變化過程對應，模擬現實生活中慢慢合上書的感覺，如下圖。
但是在有些場景，為了避免混亂，屬性變化過程是不適合被用戶絕對控制的，此時我們應采取相對控制的方案。比如 iOS 的相機中，左右滑動切換拍攝模式，由于前后不同模式之間的頁面框架變化較大，切換時會有過多元素的屬性變化，如果使用絕對控制就會導致切換拖沓且混亂，使用相對控制就能避免這個問題。
定義
當我們使用手勢控制某個受控物時，由于手勢的某個屬性（如手指位移）達到閾值，進而導致受控物的某個屬性穩定在了特定狀態的效果被稱為「穩定化效果」，或者也可以稱為「吸附」。
穩定化效果能夠保持界面的視覺秩序，避免過多的中間狀態導致界面的雜亂，進而幫助用戶聚焦信息。
是否有穩定化效果是區別輕掃與另外兩個手勢即甩動和拖拽的重要維度，當某個位移類手勢有穩定化效果，我們就將其稱作輕掃。
以滑動切換抖音視頻為例，當手指上滑的位移距離和釋放速度其中的某一項屬性達到閾值后，下一條視頻會往上移動一個固定的距離然后進入穩定狀態，而不會出現停留在不完整的中間狀態，如下圖所示。
在 iOS 端的微信消息頁左滑某條消息后會出現更多操作按鈕，按鈕會在手指滑動的距離達到閾值并松開后穩定在一個固定的大小，而不會停在類似下圖左所示的混亂的中間狀態。
在多內容選擇的場景中，如果滑動與選中是綁定的話，一般需要使用穩定化效果。例如在 iOS 相機里選擇濾鏡時，滑動濾鏡選項不但能夠控制濾鏡選項的位置，并且會自動選中一個位于中間位置的濾鏡，位置的穩定化避免了被選中選項的不明確。
如果滑動與選中是分開的，比如美圖秀秀的濾鏡選項需要先滑動后選中，這種情況下穩定化效果不是必要的。
與效率的關系
不同的穩定化規則帶給用戶的體驗差異是非常大的，最明顯的差異是在效率方面。我們使用穩定化效果的強弱來理解，穩定化效果越強，單次滑動能夠切換的選項個數越少，效率越低。穩定化效果越弱，單次滑動能夠切換的選項個數越多，效率越高。
比如在比較常見的 banner 切換功能中（下圖左），無論手指位移和釋放速度的值有多高，banner 只能切換并穩定到下一個，不能夠一次切換多個 banner。而在網易云音樂的首頁排行榜中，一次滑動能夠切換多個內容卡片，我們可以說前者的穩定化效果比后者強。
拖拽和甩動雖然沒有穩定化效果，但是也存在效率的高低。我們可以將其與輕掃放在一起做對比，如下圖所示，拖拽、穩定化效果強的輕掃、穩定化效果弱的輕掃、甩動它們切換效率依次增加。
那么我們決定添加穩定化效果后，如何選擇強弱程度呢？選擇沒有絕對的對錯，整體來說主要考慮兩點，業務訴求和用戶訴求。例如在常見的 banner 切換中，banner 的總數量一般不會很多，業務的訴求是希望盡可能曝光每一個 banner，使感興趣的用戶進行消費，因此這里比較適合做穩定化效果強的輕掃。在云音樂的排行榜案例里，不同用戶感興趣的榜單是不同的，穩定化效果弱的輕掃可以方便用戶單次滑動切換多個，快速切換到自己感興趣的榜單的大概位置。
百度 App 的表情面板原本是左右輕掃瀏覽表情，在一次改版中改為了上下甩動瀏覽。主要目的之一就是為了提高瀏覽效率、降低非首屏表情的曝光難度。
微信視頻號的改版是一個典型的案例，舊版的微信視頻號的視頻流并不是類似抖音那樣的全屏化形式和輕掃手勢（下圖右），而是占據屏幕尺寸三分之一到二分之一之間的卡片形式（下圖左），并且使用甩動而非輕掃。視頻號問世初期優質內容匱乏，社交推薦算法不完善，貿然模仿抖音式的全屏化形式和輕掃手勢的話，會導致用戶瀏覽到劣質視頻時負面感受被增強且切換效率變低，反之卡片形式加甩動手勢給予了用戶更自由的選擇空間，提高了用戶的切換效率，降低了負面體驗。等到如今時機成熟，再從卡片形式和甩動手勢換成全屏化形式和輕掃手勢就勢在必行了。
在某些場景，用戶需要先通過高效的方式選擇特定區域的內容，然后進入聚焦狀態進行內容瀏覽和慢速的切換，此時我們需要設計兩種切換效率不同的手勢應對前后場景的變化。如下圖，在 iOS 的照片 App 中，先使用切換效率較高的甩動進行粗略切換找到目標圖片大概位置，點擊進入大圖模式時使用切換效率較低的輕掃進行精確切換查看。
觸發時機
觸發穩定化的時機可以分為釋放前和釋放后，不同的時機帶給用戶的體驗也不同。釋放前穩定化指的是用戶使用手指滑動屏幕時，手指位移達到閾值后，手指無需離開屏幕，穩定化即可被觸發。如下圖左，iOS 的相機滑動切換濾鏡使用的就是釋放前穩定化。釋放后穩定化指的是用戶使用手指滑動屏幕時，手指位移或釋放速度達到閾值后，手指必須離開屏幕，穩定化才能被觸發。如下圖右，常見的 banner 切換。
釋放前穩定化可以避免拖沓，增加切換效率，但是缺點是無法反悔回退且缺乏掌控感。反之，釋放后穩定化可以反悔回退，掌控感強，但是缺點是比釋放前穩定化拖沓了一些。
閾值是能夠觸發變化的最小值。比如當水的溫度達到 100 度時就開始變成水蒸氣，100 度就是一個閾值，溫度是閾值類型。在手指與屏幕的交互中，手指在屏幕上的某個停留時間、位移、釋放速度、點擊次數等都可以成為一個閾值類型，達到相應閾值后就可以觸發相應的變化，常見的變化有受控物的位置、大小、不透明度等，理論上變化可以是任意的。
在位移類手勢中，通常會用到的閾值類型有手指位移和釋放速度，手指位移是用戶在手指觸摸屏幕時的位置與之后某個時間手指位于屏幕的位置之間的距離，釋放速度是用戶的手指在屏幕表面進行位移后離開屏幕那一瞬間的速度。
市面上的 App 暫時不存在僅通過釋放速度判定而與手指位移無關的閾值判定方式，因為其不太符合常識。因此我們在設計位移類手勢時，能夠選擇的閾值判定方式常見的有兩種：① 判定手指位移和釋放速度滿足任意一個即可；② 僅判定手指位移。
當我們設計手勢時，就需要考慮兩者的區別。由于 ① 比 ② 增加了釋放速度帶來的額外移動距離，因此 ① 的主要優點是高效。但是由于我們無法預判釋放速度帶給受控物的移動距離長短，所以相對應的缺點就是易誤操作和不精確。②就恰恰相反，由于不存在釋放速度造成的不確定因素，它的優點是不易誤操作和精確，缺點是低效。
甩動和拖拽之間的區別就在于閾值判定方式，甩動是 ① ，拖拽是 ② 。如下圖，當在微信消息列表找相應的消息時，用戶的訴求就是能夠快速找到特定消息的位置，對特定消息的出現在屏幕的位置也沒有特定要求，只要能夠被手指點擊到即可，因此選用甩動較為合適，但是對于調節音量、亮度這一類的操作，滑動的范圍有限，因此用戶對效率沒有特別的要求，但是對于滑塊位置的精確度有要求，因此選用拖拽是更為恰當的。
再舉一個反例，在 Steam 移動端橫滑首頁的泳道卡片時（下圖左），使用的手勢是拖拽而不是甩動，瀏覽起來特別低效。更適合的做法應為甩動，會更符合此場景下的快速瀏覽的訴求，如下圖右的豆瓣。
對于輕掃來說，使用哪種閾值判定方式有多種情況（如下圖所示）。在本文中，根據閾值類型、穩定化效果以及控制方式的不同我將把輕掃分為 A-E 共 5 類（A-E 的命名方式僅存在于本文章，因此在向其他人傳達時，盡量使用在后文我介紹的手勢描述而不是類別名稱，以便于對方理解。）。后續會為大家仔細舉例講解，大家現在僅了解一下即可。
當我們在刷抖音視頻時使用的手勢就是輕掃，是否滑動到下一條視頻進行播放的判定方式是① 判定手指位移和釋放速度滿足任意一個即可，對應的手勢類別是上面表格中的輕掃A。如下圖所示，在刷抖音時，如果使用判定手指位移的方式，我們可以將手指在垂直方向位移大于半個屏幕高度的距離，從而切換到下一個視頻。如果使用判定釋放速度的方式，我們可以移動任意的垂直距離但是手指離開屏幕時保留一個速度從而切換到下一個視頻。大部分情況下用戶都會使用判定釋放速度的方式，因為既省力又便捷。
如果將閾值判定方式改為 ②僅判定手指位移，對應的手勢類別是上面表格中的輕掃 B，并且位移的閾值設置得比較大的話，給用戶帶來的負面體驗可能將是非常大的。比如下圖中打開美圖秀秀的短視頻評論浮層后，想要下滑收起時，App 僅判定手指位移，而且這個位移閾值設置得比較大，對于希望通過快速滑動一小段距離收起浮層的用戶來說體驗很差。即使由于開發資源有限我們只能做到僅判定手指位移，我們也可以通過減少手指位移的閾值來降低負面體驗。
但是某些場景下，②僅判定手指位移是更加合適的。比如想要在微信中下拉打開小程序選擇頁，就只能通過手指位移達到一個特定的閾值才能夠觸發，無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁。這樣處理的原因是在微信消息列表頁，上下滑動瀏覽微信消息是一個高頻操作，如果釋放速度也能作為打開小程序頁面的閾值的話，用戶可能就極易在下滑消息列表時誤操作，無意間打開小程序選擇頁。
因此，對于位移類手勢，選用哪種閾值判斷方式要依據用戶使用場景和訴求，不能想當然地設計。
了解完三個基礎維度后，我們再將其進行組合，從特定手勢的角度更全面地理解它們的差異和使用場景。三個維度的排列組合能夠生成十余種位移類手勢，我列舉出了常見的 7 類，如下圖所示，這 7 類基本涵蓋了 95% 以上的場景，我將一一舉例說明。由于施控物控制受控物改變的屬性一般都為位置，因此接下來在描述下面手勢的定義時我都以受控物的位置變化進行舉例。
定義
使用手指在受控物位置按下后，操控受控物沿著某個方向移動，無論釋放時手指是否仍有速度，受控物都會立即停止移動。（下圖的動態演示由 Principle 制作，觀看會有些不太直觀）
特點
精確度高但效率低。由于閾值類型僅判定手指位移且沒有穩定化效果，拖拽適用于對操作精度要求高，對效率要求低的功能。
案例
在 iOS 設置中調節亮度時，在有限范圍內，手指左右拖拽可以控制亮度變化。
定義
使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時手指仍有速度，受控物將移動一段距離后才慢慢停止，移動的距離與釋放速度呈正相關。若釋放時手指速度為 0，則受控物立即停止移動。
特點
精確度低但效率高。由于閾值類型判定釋放速度和手指位移，甩動適用于需要快速瀏覽較多內容的場景，如滾動瀏覽列表。
案例
在微信的消息列表頁，使用甩動手勢控制列表上下移動，若釋放時仍有速度，列表將仍移動一段距離后才慢慢停止。
定義
使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時的速度和手指位移有任意一個達到閾值，受控物將穩定在一個新位置。若釋放速度和手指位移沒有任何一個達到閾值，受控物將回到原位置。
特點
由于輕掃擁有穩定化效果，因此它能夠保持界面的視覺秩序，避免過多的中間狀態導致界面的雜亂，進而幫助用戶聚焦信息。接下來講解的其他輕掃類型都有這一特性，就不一一贅述了。輕掃 A 與接下來要講解的輕掃 B-E 的最大不同之處在于輕掃 A 的閾值類型為「釋放速度和手指位移」，這讓輕掃 A 與輕掃 B-E 有兩點不同，一是輕掃 A 可以通過釋放速度的快慢去控制內容的切換數量的多少，更加高效，二是輕掃 A 可以通過用手指在屏幕滑動很短的距離但離開屏幕時保留一個速度來切換內容，因此更加省力。
案例
在刷抖音時，如果使用判定手指位移的方式，我們可以將手指在垂直方向移動大概半個視頻高度的距離，從而切換到下一個視頻。如果使用判定釋放速度的方式，我們可以移動任意的垂直距離并且手指離開屏幕時保留一個速度從而切換到下一個視頻。
定義
使用手指在受控物位置按下后，操控受控物沿著某個方向移動。若釋放時手指位移達到閾值，受控物將穩定在一個新位置。若釋放時手指位移沒有達到閾值，受控物將回到原位置。
特點
輕掃 B 與輕掃 A 相比唯一的區別是閾值類型減少了釋放速度的判定方式，這提高了觸發切換的難度，使操作成本變高，但是在某些場景下，這也降低了誤操作的概率。如下拉刷新等。
案例
比如想要在微信中下拉打開小程序選擇頁，就只能通過手指位移達到一個特定的閾值才能夠觸發，無論怎么用力滑動去增加釋放速度都無法打開小程序選擇頁，這樣處理的原因是在消息列表頁上下滑動瀏覽消息是一個高頻操作，如果釋放速度也能作為打開小程序頁面的閾值判定方式，用戶可能就極易在下滑消息列表時誤操作，無意間打開小程序頁面。
因此，當頁面已存在一個滑動操作的情況下，還存在另外一個方向相同的滑動操作且僅會在邊界情況下才能觸發時，為了避免誤操作，會將后者的手勢設計為輕掃 B。
上文提到，輕掃 A 的閾值類型為判定「釋放速度和手指位移」，輕掃 B 的閾值類型為僅判定「手指位移」，由于前者的實現成本比后者高，導致本應適合做成輕掃 A 的功能有時只能妥協做成輕掃 B，比如之前提到過的美圖秀秀的短視頻評論浮層案例，但我們也可以通過減少手指位移的閾值來降低負面體驗，后文會講解如何與開發同學溝通。
定義
使用手指在受控物位置按下后，操控受控物沿著某個方向移動，但是受控物并不隨著手指的控制而同步移動，僅當釋放時手指位移達到閾值時，受控物才開始移動并穩定在一個新位置。若釋放時手指位移沒有達到閾值，受控物位置則一直保持不變。
特點
上文講到過釋放后穩定化和相對控制的缺點，釋放后穩定化比較拖沓，相對控制讓用戶缺乏掌控感。兩者如果應用到了同一個手勢（即輕掃 C ），就會導致用戶在滑動屏幕時得不到任何反饋，用戶會疑惑是否因為自己操作不當或是設備出現故障。只有當用戶手指離開屏幕后才會發現觸發了操作，整體的交互流程給用戶一種滯后與延遲的感覺。
因此輕掃 C 與其他類別的輕掃相比存在劣勢，但是它也存在很多的 App 的 H5 頁面中，我的猜測是由于 H5 對于判定釋放速度和絕對控制這兩個維度與客戶端相比難度大很多，因此只能退而求其次選擇輕掃 C 這個較差的方案，實際上在同樣的應用場景中用輕掃 A 替換輕掃 C 可以帶來更好的體驗。
案例
下圖左是 QQ 的個性裝扮的 H5 頁面，卡片的切換使用的就是輕掃 C，如果能夠優化為輕掃 A 體驗會更好，比如下圖右的音街首頁卡片的設計。
定義
使用手指在受控物位置按下后，操控受控物沿著某個方向移動，但是手指位移達到閾值前受控物并不隨著手指的移動而移動。若手指位移達到閾值，無需手指釋放，受控物將開始移動并穩定在一個新位置。若手指位移沒有達到閾值，無論是否釋放，受控物位置則一直保持不變。
特點
相對控制的方式降低了用戶的掌控感，釋放前穩定化減少了操作的拖沓感。使用此手勢的場景是在多個對象之間切換時，我們不希望用戶過于自由地操控對象之間的屬性變化過程，并且犧牲掌控感從而增加單次的切換效率。
案例
比如 iOS 的相機中，左右滑動切換拍攝模式時，由于前后不同模式之間的頁面框架變化較大，切換時會有不同元素的屬性變化，如果使用絕對控制和釋放后穩定化就會導致切換混亂且拖沓，使用相對控制和釋放前穩定化就能避免這個問題。
特殊說明
上文我們講到，通過輕掃手勢 A-D 對受控物的絕對/相對控制都是存在于穩定化前，受控物一旦穩定化，就脫離了手指的控制，需要手指離開屏幕后再次接觸屏幕開始下一次控制。
輕掃 E 的不同之處在于它可以在受控物穩定化后，仍然控制受控物朝著下一個節點穩定化，在每個節點之間切換時能夠明顯感覺到分段感，如下圖案例所示。
由于輕掃 E 相對于輕掃 A-D 的特殊性，控制方式中的絕對控制和相對控制無法覆蓋這個特殊現象，因此我們使用「多段相對控制」來命名輕掃 E 的這種特殊的控制方式。
定義
使用手指在受控物位置按下后，操控受控物沿著某個方向移動，若手指位移達到閾值，無需手指釋放，受控物就穩定在了一個新位置，但是此時手指還是仍然可以操控受控物繼續移動的，并且繼續移動過程中如果手指位移達到閾值將會到達下一個穩定化狀態。
特點
輕掃 E 適用于需要在多個對象之間快速切換和確認的場景，它的使用感覺很接近拖拽。如下圖所示，我們可以這樣理解，當被切換的對象數量接近于無窮大同時每個對象之間的距離接近無窮小時，輕掃 E 就可以視為拖拽。
案例
iOS 相機人像模式切換打光方式、微信的通訊錄滑動字母索引導航，它們都使用輕掃 E 來滿足多個對象之間快速切換和確認的需求。
了解完上述的維度和常用手勢后，我們在腦中就可以形成一個思考框架。當我們要針對一個功能設計位移類手勢時，就可以從閾值類型、穩定化效果以及控制方式這三個維度思考。接下來我用一個我參與過的實際項目作為案例給大家講解一下思考過程。
本案例是網易云音樂陌生人版一起聽中的一個功能，一起聽的雙方在聽歌過程中會收到彼此共同信息，比如聽歌口味相似度、是否同城、都喜歡哪些歌手等，目的是為了增加可玩性和互動性、降低退出率，鼓勵用戶互相了解、提高一起聽過程中的社交體驗。
為了營造儀式感和避免信息過載，共同信息的展示方式設計為了一次只能看一條，進入浮層后默認展示最新的一條，可以通過滑動查看上一條。因此為了避免出現兩條同時占據展示區域的混亂狀態（如下圖左），我們為其添加了釋放后穩定化效果（如下圖右），同時為了方便用戶可以快速瀏覽舊的共同信息，這里使用的穩定化效果是較弱的，用戶可以通過滑動一次切換多個共同信息。
由于需要滿足用戶快速瀏覽舊的共同信息的訴求，閾值類型選用了「判定手指位移和釋放速度滿足任意一個即可」，用戶可以通過控制釋放速度進而控制信息的切換數量。控制方式則選擇了掌控感強的絕對控制。最后的結果如下圖所示。綜合三個維度進行歸類，此手勢為穩定化效果較弱的輕掃 A。
位移類手勢的方向一般為上下或左右，但并不是一定要完全垂直或水平才能夠觸發手勢。當上下滑動和左右滑動同時存在于一個頁面時，默認會有一個容錯角度，比如上滑時手指滑動方向只要左右偏移不超過 45° 都會被判定為上滑，如下圖所示。
但是有時開發同學出現失誤，導致容錯角度沒有均分，例如下圖中觸發上滑和下滑的角度極小，導致用戶在上下滑動時非常容易誤操作為左滑和右滑。
云音樂也曾有過類似的遺留問題，iOS 端的播放頁上滑調出評論頁極易誤操作為左右滑動黑膠切歌（如下圖 A，現已修復），安卓端的賬號側邊欄上滑瀏覽極易誤操作為左滑收起側邊欄（如下圖 B ）。
因此，在驗收階段，除了上述的三個維度外，角度的容錯性檢查也是重要的一環。因此在驗收時間充裕的情況下，最好要切換不同的手持方式分別體驗一次，因為有些問題只有在特定的手持方式下才能夠被發現。（下圖素材來源于網絡，侵刪）
客戶端的角度判定方式實際上是一個比較復雜的過程，上述的內容是簡化的版本。后續將延展為一篇獨立文章給大家仔細聊一聊。
上文講到，基礎的三個維度即閾值類型、穩定化效果和控制方式決定了手勢的類別，是設計階段一定要定義清楚的。但是除此之外，設計一個手勢需要定義的細節非常多。比如受控物的移動是否有速度曲線？手指位移與受控物之間的位移的比率是多少呢？這些都是開發階段不得不面對的。幸運的是，安卓和 iOS 有系統封裝好的一套系統組件可以調用，操作系統自行解決了剛才講到的細節問題，但是 H5 框架下是無法調用系統組件的，手勢的各種細節都需要前端開發人員自己編寫，難度較大，大部分情況只能實現一些比較簡陋的效果，這也是為什么在很多 H5 框架下的界面滑動的體驗比較差的原因。
由于信息不對稱，與開發的溝通過程中，很容易出現理解偏差。比較常見的錯誤有：將甩動誤解為輕掃 A，將輕掃 A 誤解為輕掃 B 或甩動。如果造成效果達不到預期的情況，很多設計師不知道如何讓開發同學修改，只能說“這個手勢不絲滑，優化一下”，開發同學也是一頭霧水，不知道往哪個方向優化。如果我們能夠直接說出“閾值判定方式現在只有手指的位移，需要釋放時的速度也能夠觸發跳轉；這個位移的閾值太高了，滑動時很難觸發跳轉，需要把閾值改為 16pt ”類似這樣準確的描述，就能夠大大降低溝通成本，順利驗收。為了避免溝通出現問題，下面我將日常經驗總結出現希望能夠幫助到大家。
首先，一旦涉及到位移類手勢，除了必要的文字描述外（可參考上述的手勢定義的描述），最好給開發體驗 demo 或者其他 App 上類似的效果，否則很容易產生理解偏差。各種 App 上的類似效果大家可以用本文的每個手勢的案例給開發同學展示，但是 App 可能會更新，案例可能在未來某個時間就找不到了，所以我用 Principle 做了一個簡易的基礎 demo 集合，和我上述介紹的手勢是對應的，大家可以拿著這個 demo 給開發同學演示大概的效果，也可以在這個 demo 源文件修改。
拖拽和甩動由于需要定義的細節參數都被操作系統提前封裝好了，不需要我們給到額外的標注。但是對于輕掃，我們需要將細節定義清晰，下面將詳細講解。
1. 閾值類型
上文講到，閾值類型一般有兩種：① 判定手指位移和釋放速度滿足任意一個即可；② 僅判定手指位移。①的開發成本高于②。
如果我們選用輕掃的閾值類型是①，開發同學編寫代碼需要兩個參數的閾值，分別是手指位移和釋放速度。手指位移閾值一般默認為受控物的1/2，例如下圖的全屏短視頻和 Banner 。
當然我們也可以自定義一個閾值，比如 100pt、受控物高度的 1/6 等，沒有特別的需要的話使用默認值即可而且也不用給開發同學特殊說明，但是如果有特殊需要想要修改默認值，就要告知開發同學你自定義的手指位移閾值。對于釋放速度閾值，通常默認就非常的小，幾乎是大于 0 即可觸發，一般情況下使用默認值即可。
在本應該選用①的場景中，如果由于技術成本原因不得不選用②，需要注意的是由于缺少了釋放速度的判定，手指位移的閾值我們需要設置得小一些方便用戶觸發，否則就會出現上文中美圖秀秀浮層的那樣的體驗問題。經過我的實驗，手指位移閾值一般定為 16pt 是比較適中的，既不會太容易誤操作也不會難以觸發。
2. 穩定化效果
輕掃是一定存在穩定化效果的，關鍵在于告知開發是釋放前穩定化還是釋放后穩定化。從開發的角度講，系統會監測用戶的行為，用戶在使用滑動時會有按下（down）、移動（move）、抬起（up）三個行為，釋放前穩定化是在移動階段判斷閾值并觸發操作、釋放后穩定化是在抬起后判斷閾值并觸發操作，開發成本幾乎沒有區別。
上文提到過穩定化效果強弱的概念。穩定化效果越強，單次滑動能夠切換的選項個數越少，效率越低。穩定化效果越弱，單次滑動能夠切換的選項個數越多，效率越高。首先，我們需要確定單次滑動允許切換多個還是只允許切換一個，如果允許切換多個，開發同學會設定一個控制切換難度的系數，而只允許切換一個的話就不存在這個系數。通常我們也不需要修改這個默認系數，但如果想讓操作更加難或容易觸發，可以告知開發同學修改這個系數。
3. 控制方式
絕對控制比相對控制的開發成本高，如果開發資源并不是很緊張，需要絕對控制的場景就不要退而求其次使用相對控制。涉及到輕掃手勢一定要告知開發同學控制方式，否則很可能被視為相對控制處理。
通過本文的學習，我們不但可以在開發工作進行前與開發同學高效溝通，保證開發工作的順利進行，也可以對自家移動端產品的現有手勢進行逐一排查發現問題點進行記錄，并且找到合適解決方案，然后用準確的語言描述給開發同學。下圖是我在進行手勢排查后輸出的表格，挑選出一些有代表性的案例給大家作參考，開發同學可以通過它快速明確問題，理解解決方案。
本篇文章的歸納總結是通過日常積累和思考得來，希望能夠幫助大家在設計與溝通層面解決實際問題，如果有任何疏漏和不嚴謹的地方，希望大家能夠指出，后續的更新會將專欄不斷完善，交互手勢系列暫定的后續更新計劃如下。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：設成于思
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
以前，設計師們都需要去跟開發溝通并手動標注所有文件，現在，有了像 Zeplin 和 Abstract 這樣實用的標注工具，設計師幾乎不需要花太多的時間在對接上。
但是，還是避免不了很多東西會在對接過程中出現問題。比如，這個按鈕是固定大小的還是彈性大??？是保持底部邊距固定還是在一個較大的對象內居中？讓我們來看下約束布局在對接過程中的使用方法。
約束布局是定義控制應用中內容的規則。這些規則通過使用統一的元素和間距，保持跨平臺、跨環境和跨屏幕大小的一致性。通常應用在 iOS 和 Android 中。
彩云注：這里想跟大家科普下相對布局和約束布局的區別。相對布局是通過相對定位的方式讓控件出現在布局任意位置，相對布局因為邏輯原因，層級較多；而約束布局能夠有效解決布局過多問題，讓頁面更加扁平化，布局之間相對位置也更好控制。約束布局也是繼相對布局后，谷歌官方針對相對布局問題給出的一個更優解決方案，意在將來替代掉相對布局。當然，這里不再過多闡述，感興趣的可以自行去了解下，可能偏開發方面會更多一些。
如果在 sketch 文件中已經設計布局好了所有元素，就可以開始了！
1. 基礎單位
8×8
首先從定義基本單位開始，每個度量值都是其倍數。我建議使用偶數 8 來調整大小和間距，因為這樣可以方便且一致地適配各種設備。
在 Sketch 中選擇首選項>畫布，將“通過 Shift+方向鍵調整移動對象中的 10px 改成 8px”，這樣會解決很多問題！
2. 間隔單位
間隔單位是常用間距的視覺表達。例如，一個“2 間隔單元”是 16 pt/dp，因為 2×8=16。這些符號應該在設計中使用，別名應該被標注成代碼，以便在和開發對接時使用相同的語言。
垂直和水平間隔
在項目很趕的時候，你可能沒有足夠的時間手動做到完美像素對齊。通過使用這些通用單位來標識，而不是標注工具自動生成的標注像素，它可以告訴開發實際間距。數字別名與“Shift +方向鍵”移動對象的次數相匹配。
響應式按鈕：iPhone8、三星 Galaxy S8、iPhoneSE
間隔大小永遠不會改變。如果是水平間隔，則垂直高度被鎖定，反之亦然。這意味著在不同的手機寬度上，組件的尺寸會發生變化，但用于創建它的邊距的間距將保持不變。
有時元素在間隔之間對齊。間隔之間對齊的主要方法是中心對齊和底部對齊。
垂直居、中水平居中和居中對齊
中心對齊是指你想要一個對象或一組對象向中間集中對齊。對象可以水平居中，垂直居中，或者向中間集中對齊。
底部對齊
底部對齊是指希望對象與其中一個對象的底部對齊。當有兩種不同的文本大小并且想要在基線處對齊時，底部對齊就是比較常見使用方法。
1. 點擊對象
48 x 48
在手機上，最小點擊對象尺寸為 48x48dp /pt。這尺寸來自于谷歌設計指南，物理尺寸約等于 12 英寸。(HIG 建議使用 44x44pt，所以我選擇更大的)。將元素放在一起時考慮點擊對象大小。你也可以使用點擊對象符號來表示元素的哪些部分是可點擊的。
讓我們通過一些組件示例切換來測試所有約束的使用：
組件示例：列表項、按鈕和復選框
2. 基本尺寸
組件的基本尺寸，它的最小高度和寬度，應該基于最小點擊對象的尺寸。視覺上小于點擊對象的組件仍應由相同的最小點擊對象大小觸發。這意味著，如果用戶在復選框之外觸摸了一點，也會承認他們點擊了復選框。
組件相對于最小點擊對象的視覺尺寸：精確、高于和低于。
3. 內邊距
使用間隔表示組件內的邊距。
長字符串的水平邊距
你可以通過設置水平邊距來限制元素的水平位置，比如文本框。當文本太長時，你需要指出文本是否應該調整大小、換行和/或截斷。換行到兩行比截斷一行更好！
動態類型的水平和垂直邊距
垂直填充最常用于動態適配。盡管組件在當前手機尺寸、當前語言和當前字體大小下看起來可能很好——但所有這些因素都是最壞情況下的變量。當類型增加時，組件將變得比它的基本大小更大，并且你希望確保它仍然有垂直填充。
4. 基線對齊
使用居中和基線標記來示意，如何讓那些沒有接觸到所有邊的間隔元素表現出來。這部分主要是方便給開發理解的。
垂直居中的列表項文本、底部對齊的價格和居中的復選框
現在你已經布局好了一個頁面，使用與在組件中相同的方式使用間隔、點擊目標和對齊符號。
插圖來源于 Meg
……瞧!這就是移動端的響應式布局!
提示：為你在界面布局中引用的組件創建單獨的 symbol 畫板。在組件中，將所有組件規范包含在一個文件夾中，該文件夾可以輕松打開和關閉。沒有什么比同時標記組件和界面布局更好了。
即使是一個精心制作的交接文件也不能取代你與開發之間良好的語言交流。這應該與開始、移交和書面文檔一起使用。你越讓開發了解你的設計，還原的結果就越接近實際發布的產品。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：彩云譯設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn