如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
一.為什么Bitmap三級緩存？
沒有緩存的弊端 ：費流量, 加載速度慢
加入緩存的優(yōu)點： 省流量，支持離線瀏覽
二.原理
從內(nèi)存獲取圖片, 如果存在, 則顯示; 如果不存在, 則從SD卡中獲取圖片
從SD卡中獲取圖片, 如果文件中存在, 顯示, 并且添加到內(nèi)存中; 否則開啟網(wǎng)絡下載圖片
從網(wǎng)絡下載圖片, 如果下載成功, 則添加到緩存中, 存入SD卡, 顯示圖片
三.代碼
(1)添加讀寫SD卡的權限和網(wǎng)絡權限
// //Lrucache存儲工具類
public class LruUtils {
private LruCache<String,Bitmap> lruCache;
private long max=Runtime.getRuntime().maxMemory();
public LruUtils(){
lruCache=new LruCache<String,Bitmap>((int)max/8){
@Override
protected int sizeOf(String key, Bitmap value) {
return value.getByteCount();
}
};
}
public Bitmap getBitmap(String key){
return lruCache.get(key);
}
public void setBitmap(String key,Bitmap bitmap){
lruCache.put(key,bitmap);
}
1
2
3
4
5
6
7
8
9
10
11
12
}
//SD卡工具類
public class SDUtils {
public static void setBitmap(String name, Bitmap bitmap) {
if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
File file = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
File file1 = new File(file, name);
try {
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, new FileOutputStream(file1));
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
}
public static Bitmap getBitmap(String name){
if(Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)){
File file=Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
File file1=new File(file,name);
return BitmapFactory.decodeFile(file1.getAbsolutePath());
}
return null;
}
}
//網(wǎng)絡
import android.app.AlertDialog;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.concurrent.ExecutionException;
public class NewUtils {
public static Bitmap getBitmap(String url) throws ExecutionException, InterruptedException {
return new MyTask().execute(url).get();
}
static class MyTask extends AsyncTask<String,Void,Bitmap>{
@Override
protected Bitmap doInBackground(String… strings) {
String imageUrl = strings[0];
HttpURLConnection conn = null;
try {
URL url = new URL(imageUrl);
conn = (HttpURLConnection) url.openConnection();
conn.setReadTimeout(5000);
conn.setConnectTimeout(5000);
conn.setRequestMethod(“GET”);
if (conn.getResponseCode() == 200) {
InputStream is = conn.getInputStream();
Bitmap bitmap = BitmapFactory.decodeStream(is);
return bitmap;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (conn != null) {
conn.disconnect();
}
}
return null;
}
}
}
//使用三個工具類完成Bitmap的三級緩存
package com.example.administrator.myapplication;
import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import java.util.concurrent.ExecutionException;
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
Button button;
private LruUtils lruUtils= new LruUtils();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button=findViewById(R.id.button);
imageView=findViewById(R.id.imageview);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Bitmap bitmap=lruUtils.getBitmap(“czn”);
if (bitmap!=null){
imageView.setImageBitmap(bitmap);
Toast.makeText(MainActivity.this, “圖片存內(nèi)存”, Toast.LENGTH_SHORT).show();
}else{
bitmap=SDUtils.getBitmap(“czn.jpg”);
if (bitmap!=null){
imageView.setImageBitmap(bitmap);
Toast.makeText(MainActivity.this, “圖片存SD卡”, Toast.LENGTH_SHORT).show();
lruUtils.setBitmap(“czn”,bitmap);
}else{
try {
bitmap=NewUtils.getBitmap(“http://pic1.win4000.com/wallpaper/e/50d80458e1373.jpg”);
if (bitmap!=null){
imageView.setImageBitmap(bitmap);
Toast.makeText(MainActivity.this, “圖片存網(wǎng)絡”, Toast.LENGTH_SHORT).show();
SDUtils.setBitmap(“czn.jpg”,bitmap);
lruUtils.setBitmap(“czn”,bitmap);
}else{
Toast.makeText(MainActivity.this, “沒有找到”, Toast.LENGTH_SHORT).show();
}
} catch (ExecutionException e) {
e.printStackTrace();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
});
}
}
Bitmap二次采樣
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.concurrent.ExecutionException;
public class Main2Activity extends AppCompatActivity {
Button bt;
ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
bt=findViewById(R.id.bt);
imageView=findViewById(R.id.mimage);
bt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
try {
Bitmap bitmap = new MyTask().execute(“https://cdn.duitang.com/uploads/item/201211/24/20121124230042_Bfhim.jpeg”).get();
imageView.setImageBitmap(bitmap);
} catch (InterruptedException e) {
e.printStackTrace();
} catch (ExecutionException e) {
e.printStackTrace();
}
}
});
}
class MyTask extends AsyncTask<String,Object,Bitmap>{
@Override
protected Bitmap doInBackground(String... strings) {
try {
URL url = new URL(strings[0]);
HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
if(urlConnection.getResponseCode()==200){
InputStream inputStream = urlConnection.getInputStream();
//將inputStream流存儲起來
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
byte[] bytes = new byte[1024];
int len=0;
while((len=inputStream.read(bytes))!=-1){
byteArrayOutputStream.write(bytes,0,len);
}
//桶：網(wǎng)絡的圖片都放在數(shù)組里面了
byte[] data = byteArrayOutputStream.toByteArray();
//TODO 1：第一次采樣：只采邊框 計算壓縮比例
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds=true;//設置只采邊框
BitmapFactory.decodeByteArray(data,0,data.length,options);//采樣
int outWidth = options.outWidth;//獲得原圖的寬
int outHeight = options.outHeight;//獲得原圖的高
//計算縮放比例
int size=1;
while(outWidth/size>100||outHeight/size>100){
size*=2;
}
//TODO 2:第二次采樣：按照比例才像素
options.inJustDecodeBounds=false;//設置只采邊框為fasle
options.inSampleSize=size;//設置縮放比例
Bitmap bitmap= BitmapFactory.decodeByteArray(data,0,data.length,options);//采樣
return bitmap;
}
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網(wǎng)站建設 、平面設計服務。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
Fragment，在Android中指的是碎片，也就是在不切換Activity時進行頁面的切換，這是Android中的一個重點的內(nèi)容，很多的應用程序中都有這樣的功能，所以，接下來讓我們具體的學習一下Fragment的使用
首先，要將一個Fragment給創(chuàng)建出來。
新建一個類，讓這個類繼承Fragment，并重寫onCreatView()方法，之后，使用onCreatView中的inflater將一個布局文件轉換為視圖，并返回這個視圖
之后在MainActivity中獲得一個Fragment的管理者
之后我們通過這個管理者的beginTransaction()的方法獲取事務管理者
然后，我們將之前寫好的Fragment類給進行實例化
之后，我們使用事務管理者的replace()方法來給我們需要的控件上將我們的Fragment給顯示出來
之后，使用事務管理者提交事務，這樣我們的Fragment就完美的顯示出來了
碎片可以在不影響Activity時進行一個頁面的切換，所以，我們需要把我們需要顯示的所有的Fragment都放到FrameLayout布局上
這樣就可以實現(xiàn)Fragment的切換了
同時，在進行Fragment可以給Fragment添加一個回退棧的功能，使得每次按返回鍵是返回的上一個Fragment，而不是直接退出整個程序了
下面我們講一下Fragment的生命周期
Fragment的生命周期分為11個部分，分別為：
onAttach()
onCreatView()
onCreat()
onActivityCreated()
onStart()
onResume()
onPause()
onStop()
onDestoryView()
onDestory()
onDetach()
Fragment的生命周期和Activity的生命周期一樣重要，都是面試時的重點，一定要背下來
其次還要學習關于Fragment的傳值
Fragment的傳值分為兩種方法，分別是Handler傳值和接口回調(diào)方法，接下來就來學習一下兩種不同的傳值方式
首先是Handler的傳值 ，
第一步是在我們需要拿到值的Fragment中建立一個靜態(tài)的Handler，之后重寫handleMessage()方法
第二步，在傳值的Fragment的調(diào)用Handler進行傳值
這樣就可以實現(xiàn)了Fragment的Handler之間的傳值
然后我們接著說關于接口回調(diào)的傳值
首先定義一個外部接口
之后呢，在傳值的Fragment里傳遞數(shù)據(jù)
然后，我們在接收的Fragment里實現(xiàn)接口并重寫方法即可傳遞數(shù)據(jù)
這就是接口回調(diào)傳遞數(shù)據(jù)的方法
好了，關于Fragment的使用簡單說到這里
---------------------
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網(wǎng)站建設 、平面設計服務。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
寫在前面
2019年6月18日Material Design更新了設計指南中數(shù)據(jù)可視化部分，這是谷歌數(shù)據(jù)可視化團隊形成的一套全面的數(shù)據(jù)可視化指南， 涵蓋了設計原則、圖表分類、圖表的選用、樣式設計、交互設計、儀表板設計等方面。個人閱讀后進行了翻譯，希望能夠分享給更多對數(shù)據(jù)可視化有興趣的設計同學！
全文章節(jié)目錄：
原則
類型
選擇圖表
樣式
行為
儀表板
數(shù)據(jù)可視化
數(shù)據(jù)可視化就是用圖形描繪信息。
原則
數(shù)據(jù)可視化是一種以圖形描繪密集和復雜信息的表現(xiàn)形式。數(shù)據(jù)可視化的視覺效果旨在使數(shù)據(jù)容易對比，并用它來講故事，以此來幫助用戶做出決策。
數(shù)據(jù)可視化可以表達不同類型和規(guī)模的數(shù)據(jù)，包括從幾個數(shù)據(jù)點到有大量變量的數(shù)據(jù)集。
類型
數(shù)據(jù)可視化可以以不同的形式表達。圖表是表達數(shù)據(jù)的常用方式，因為它們能夠展示和對比多種不同的數(shù)據(jù)。
圖表類型的選擇主要取決于兩點：要表現(xiàn)的數(shù)據(jù)和表現(xiàn)該數(shù)據(jù)的用意。該指南描述各種類型的圖表及其用例。
圖表類型
1. 隨時間變化
隨時間變化的圖表顯示一段時間的數(shù)據(jù)，例如多個類別之間的趨勢或比較。
常見用例包括：
股價表現(xiàn)、衛(wèi)生統(tǒng)計、年表
2. 類別比較
類別比較圖表是多個不同類別數(shù)據(jù)之間的比較。
常見用例包括：
不同國家的收入、熱門場地時間、團隊分配
3. 排名
排名圖表顯示項目在有序列表中的位置。
常見用例包括：
選舉結果、性能統(tǒng)計
4. 占比
占比類圖表顯示了局部與整體的關系。
常見用例包括：
產(chǎn)品類別的綜合收入、預算
5. 關聯(lián)
關聯(lián)類圖表顯示兩個或以上變量之間的關系。
常見用例包括：
收入和預期壽命
6. 分布
分布類圖表顯示每個值在數(shù)據(jù)集中出現(xiàn)的頻率。
常見用例包括：
人口分布、收入分布
7. 流程
流程類圖表顯示了多個狀態(tài)之間的數(shù)據(jù)移動。
常見用例包括：
資金轉移、投票計數(shù)和選舉結果
8. 關系
關系圖表顯示多個項目之間的關系。
常見用例包括：
社交網(wǎng)絡、詞圖
選擇圖表
面對多種類型的圖表，以下指南提供了關于如何選擇合適的圖表見解。
顯示隨時間的變化
可以使用時間序列圖表來表示隨時間的變化，就是按時間順序表示數(shù)據(jù)點的圖表。表示隨時間變化的圖表包括：折線圖，柱狀圖（條形圖）和面積圖。
*基線值是y軸上的起始值。
柱狀圖（條形圖）和餅圖
柱狀圖（條形圖）和餅圖都可用于顯示比例，表示部分與總體的對比。
· 柱狀圖（條形圖）使用共同的基線，通過條形長度表示數(shù)量
· 餅圖使用圓的圓弧或角度表示整體的一部分
柱狀圖（條形圖），折線圖和堆疊面積圖在顯示隨時間的變化方面比餅圖更有效地。由于這三個圖表都是使用相同的基線，因此可以更輕松地根據(jù)條形長度比較值的差異。
面積圖
面積圖有多種類型，包括堆疊面積圖和層疊面積圖：
· 堆疊面積圖顯示多個時間序列（在同一時間段內(nèi)）堆疊在一起
· 層疊面積圖顯示多個時間序列（在同一時間段內(nèi)）重疊在一起
層疊面積圖建議不要使用超過兩個時間序列，因為這樣做會使數(shù)據(jù)模糊不清。取而代之，應當使用堆疊面積圖來比較一個時間間隔內(nèi)的多個值（橫軸表示時間）。
樣式
數(shù)據(jù)可視化使用自定義樣式和形狀，使數(shù)據(jù)更容易理解，以適合用戶需求。
圖表可以從以下方面進行優(yōu)化：
· 圖形元素
· 文字排版
· 圖標
· 軸和標簽
· 圖例和注釋
不同類型數(shù)據(jù)的樣式設計
可視化編碼是將數(shù)據(jù)轉換為可視形式的過程。獨特的圖形屬性可應用于定量數(shù)據(jù)（如溫度，價格或速度）和定性數(shù)據(jù)（如類別，風味或表達式）。
這些圖形屬性包括：
· 形狀
· 顏色
· 大小
· 面積
· 體積
· 長度
· 角度
· 位置
· 方向
· 密度
不同屬性的表現(xiàn)
多個視覺處理方法可以綜合應用于數(shù)據(jù)點的多個方面。例如，在條形圖中，條形顏色可以表示類別，而條形長度可以表示值（如人口數(shù)量）。
形狀可用于表示定性數(shù)據(jù)。在此圖表中，每個類別由特定形狀（圓形，正方形和三角形）表示，這樣可以在一張圖表中輕松實現(xiàn)特定范圍的比較，同時也可以進行類別之間比較。
1. 形狀
圖表可以運用形狀，以多種方式展示數(shù)據(jù)。形狀的設計可以是有趣的、曲線的，或者和高保真的等等。
形狀程度
圖表可以展示不同精度程度的數(shù)據(jù)。用于細致研究的數(shù)據(jù)應該用適合交互的形狀（在觸摸大小和功能可見性方面）展示。而旨在表達一般概念或趨勢的數(shù)據(jù)可以使用細節(jié)較少的形狀。
2. 顏色
顏色可用于以四種主要方式區(qū)分圖表數(shù)據(jù)：
· 區(qū)分類別
· 表示數(shù)量
· 突出特定數(shù)據(jù)
· 表示含義
顏色區(qū)分類別
例：圓環(huán)圖中，顏色用于表示類別。
顏色表示數(shù)量
例：地圖中，顏色用于表示數(shù)據(jù)值。
顏色突出數(shù)據(jù)
例：散點圖中，顏色用于突出特定數(shù)據(jù)。
重點區(qū)域
在不濫用的情況下，顏色可以突出焦點區(qū)域。不建議大量使用高亮顏色，因為它們會分散用戶注意力，影響用戶的專注力。
顏色表示含義
無障礙
為了適應看不到顏色差異的用戶，您可以使用其他方法來強調(diào)數(shù)據(jù)，例如高對比度著色，形狀或紋理。
將文本標簽應用于數(shù)據(jù)還有助于說明其含義，同時消除對圖例的需求。
3. 線
圖表中的線可以表示數(shù)據(jù)的特性，例如層次結構，突出和比較。線條可以有多種不同的樣式，例如點劃線或不同的不透明度。
線可以應用于特定元素，包括：
· 注釋
· 預測元素
· 比較工具
· 可靠區(qū)間
· 異常
4. 文字排版
文本可用于不同的圖表元素，包括：
· 圖表標題
· 數(shù)據(jù)標簽
· 軸標簽
· 圖例
圖表標題通常是具有最高層次結構的文本，軸標簽和圖例具有級別的層次結構。
字重
標題和字重的變化可以表達內(nèi)容在層次結構中的重要程度。但是應該保持克制，使用有限的字體樣式。
5. 圖標
圖標可以表示圖表中不同類型的數(shù)據(jù)，并提高圖表的整體可用性。
圖標可用于：
· 分類數(shù)據(jù)：用于區(qū)分組或類別
· UI控件和操作：例如篩選，縮放，保存和下載
· 狀態(tài)：例如錯誤，空狀態(tài)，完成狀態(tài)和危險
在圖表中使用圖標時，建議使用通用可識別符號，尤其是在表示操作或狀態(tài)時，例如：保存，下載，完成，錯誤和危險。
6. 坐標軸
一個或多個坐標軸顯示數(shù)據(jù)的比例和范圍。例如，折線圖沿水平和垂直坐標軸顯示一系列值。
柱狀圖（條形圖）基線
柱狀圖（條形圖）應從為零的基線（y軸上的起始值）開始。從不為零的基線開始可能導致數(shù)據(jù)被錯誤地理解。
坐標軸標簽
標簽的設計應體現(xiàn)圖表中最重要的數(shù)據(jù)。應根據(jù)需要使用標簽，并在UI中保持一致性。他們的出現(xiàn)不應該妨礙查看圖表。
文字方向
為便于閱讀，文本標簽應水平放置在圖表上。
文字標簽不應該：
· 旋轉
· 垂直堆疊
7. 圖例和注釋
圖例和注釋描述了圖表的信息。注釋應突出顯示數(shù)據(jù)點，數(shù)據(jù)異常值和任何值得注意的內(nèi)容。
1. 注釋
2. 圖例
在PC端，建議在圖表下方放置圖例。在移動端，將圖例放在圖表上方，以便在交互過程中保持可見。
標簽和圖例
在簡單圖表中，可以使用直接標簽。在密集的圖表（或更大的圖表組的一部分）中，可以用圖例。
8. 小顯示屏
可穿戴設備（或其他小屏幕）上顯示的圖表應該是移動端或PC端圖表的簡化版本。
行為
圖表具有交互模式，使用戶可以控制圖表數(shù)據(jù)。這些模式可以使用戶專注于圖表的特定值或范圍。
以下推薦的交互模式，樣式和效果（如觸覺反饋）可以提高用戶對圖表數(shù)據(jù)的理解：
漸進式披露
提供了按需求逐步展示詳細信息的明確途徑。
直接操作
允許用戶直接對UI元素進行操作，最大限度地減少屏幕上所需的操作數(shù)量，包括：縮放和平移，分頁和數(shù)據(jù)控件。
改變視角
使一種設計可以適用于不同的用戶和數(shù)據(jù)類型，例如數(shù)據(jù)控件和動效。
1. 漸進式披露
使用漸進式披露顯示圖表詳細信息，允許用戶根據(jù)需要查看特定數(shù)據(jù)點。
2. 縮放和平移
縮放和平移是常用的圖表交互，會影響用戶對圖表數(shù)據(jù)深入的研究和探索。
縮放
縮放改變界面顯示的遠近。設備類型決定了如何執(zhí)行縮放。
· 在PC端，通過單擊、拖動或滾動進行縮放
· 在移動端，通過捏合進行縮放
當縮放不是主要操作時，可以通過單擊和拖動（在PC端）或雙擊（在移動端）來實現(xiàn)。
平移
平移讓用戶能夠看到屏幕之外的界面。它應該合理的展示數(shù)據(jù)的價值。例如，如果圖表的一個維度比另一個維度更重要，則平移的方向可以僅限于該維度。
· 平移通常與縮放功能同時使用。
· 在移動端，平移通常通過手勢實現(xiàn)，例如單指滑動。
3. 分頁
在移動端，分頁是一種常見模式，讓用戶通過向右或向左滑動來查看上一個或下一個圖表。
在移動端，用戶可以向右滑動以查看前一天。
4. 數(shù)據(jù)控制
可以使用切換控件，選項卡和下拉菜單篩選或改變數(shù)據(jù)。
用戶調(diào)節(jié)控件時，這些控件還可以顯示指標。
切換控件，選項卡和下拉菜單可以更改或篩選數(shù)據(jù)。
5. 動效
動效可以強化數(shù)據(jù)之間的聯(lián)系，提升交互體驗。應該有目的地使用運動（不是裝飾性地），表達不同狀態(tài)和空間之間的聯(lián)系。
運動應該是合理，平穩(wěn)，反應靈敏，不會妨礙用戶的使用。
在此示例中，圖表數(shù)據(jù)從按天顯示動態(tài)切換到按周顯示。轉換期間不會顯示所選日期范圍之外的數(shù)據(jù)，從而降低了復雜性。
動畫能夠體現(xiàn)兩個不同圖表的相關性。
6. 空狀態(tài)
圖表數(shù)據(jù)為空的情況下，可以提供相關數(shù)據(jù)的預期。
在合適的情況下，可以展示角色動畫創(chuàng)造愉悅和鼓勵。
有特色的動畫提升了空狀態(tài)的效果。
儀表板
在稱為儀表板的UI界面中，數(shù)據(jù)可視化通過一系列圖表實現(xiàn)。多個獨立的圖表有時可以比一個復雜的圖表更好地表達故事。
儀表板設計
儀表板的目的應在其布局，樣式和交互模式中體現(xiàn)。無論是用來制作演示文稿還是深入研究數(shù)據(jù)，它的設計應該適合它的使用方式。
儀表板應該：
· 突出最重要信息（使用布局）
· 根據(jù)信息層級確定信息的焦點（使用顏色，位置，大小和視覺權重）
應根據(jù)對數(shù)據(jù)的需求確定信息的優(yōu)先級并進行安排。在此示例中設計儀表板，考慮了以下用戶問題：
1. 需要注意的問題
2. 發(fā)生問題的時間
3.發(fā)生問題的位置
4.受問題影響的其他變量
1. 分析類儀表板
分析儀類表板讓用戶能夠研究多組數(shù)據(jù)并發(fā)現(xiàn)趨勢。通常，這些儀表板包含能夠深入洞察數(shù)據(jù)的復雜圖表。
用例包括：
· 隨時間變化的突出趨勢
· 回答“為什么”和“假設”的問題
· 預測
· 創(chuàng)建有深度的報告
分析類儀表板示例：
· 跟蹤廣告活動的收效
· 跟蹤產(chǎn)品在其整個生命周期中的銷售額和收入
· 隨時間變化的城市人口趨勢
· 跟蹤隨時間變化氣候數(shù)據(jù)
分析類儀表板顯示氣候數(shù)據(jù)
2. 操作類儀表板
操作類儀表板旨在回答一組預設的問題。它們通常用于完成與監(jiān)控相關的任務。
在大多數(shù)情況下，這些類型的儀表板具有一系列關于當前信息的簡單圖表。
用例包括：
· 跟蹤目標的當前進度
· 實時跟蹤系統(tǒng)性能
操作類儀表板示例：
· 跟蹤呼叫中心的活動，例如呼叫音量，等待時間，呼叫長度或呼叫類型
· 監(jiān)控在云端應用程序的運行狀況
· 顯示股市情況
· 監(jiān)控賽車上的遙測數(shù)據(jù)
操作類儀表板顯示設備存儲指標
3. 演示類儀表板
演示類儀表板是為感興趣的主題提供的展示視圖。
這些儀表板通常包括一些小圖表或數(shù)據(jù)卡片，用動態(tài)標題描述每個圖表的趨勢和見解。
用例包括：
· 提供關鍵績效指標的總覽
· 創(chuàng)建高級執(zhí)行情況的概要
演示類儀表板示例：
· 提供投資賬戶績效的總覽
· 提供產(chǎn)品銷售和市場份額數(shù)據(jù)的概要
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網(wǎng)站建設 、平面設計服務。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
「元辰」數(shù)據(jù)概念控制中心，基于真實的使用場景和概念的表現(xiàn)手法，打造的企業(yè)及個人后臺數(shù)據(jù)管理系統(tǒng)。
主要分為首頁概覽、作品編輯、信息收集、數(shù)據(jù)統(tǒng)計和常規(guī)配置等，簡單的動效使操作回饋有了更好的交互體驗，且真實可依。
-
「元辰」注重真實的數(shù)據(jù)體驗，致力把數(shù)據(jù)信息通過大屏實時簡潔、有效的傳達給使用者。針對精準用戶“迅速獲取信息、簡化操作流程、減少學習成本”，我們將這些問題作為傳達的核心要素，一直貫穿始終。
-
歡迎溝通探討、合作交流。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
for(var i = 0; i < 5; i++) {
console.log(i)
}
這樣for循環(huán)可打印出 0 - 4的結果
for(var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i)
}, i * 1000)
}
但這樣只能間隔一秒打印出5個5
原因在于 setTimeout是異步，等for循環(huán)全部完成 i 后才會執(zhí)行
解決方法可以將 for循環(huán)中的var 變成 let
let只作用于for循環(huán)內(nèi)，這樣每次付給setTimeout的值都是當前值
或者在setTimeout外再包一層function
for(var i = 0; i < 5; i++) {
(function(i) {setTimeout(function() {
console.log(i)
}, i * 1000)})(i)
}
將 i 作為參數(shù)傳到setTimeout中運行 這樣就可以得到每隔1秒加1的log結果了
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網(wǎng)站建設 、平面設計服務。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
深入了解色彩理論屬性是非常有必要的，可以很好利用一些定式理論和色彩搭配方法應用于你的設計！
本文重點介紹了色彩理論和色彩組合在設計中應用的基礎知識: 例如學習更多關于色相環(huán)、RGB、CMYK色彩模型的相關知識。
很多人認為UI的色彩選擇主要取決于設計師的品味和美感。然而，色彩選擇的過程比表面看起來要復雜很多，在設計中起著重要的作用。在我們之前的一篇關于顏色心理學的文章中，我們發(fā)現(xiàn)顏色對我們的情緒和行為有很大的影響。這就是為什么產(chǎn)品的成功很大程度上取決于設計所選擇的顏色。研究表明，人們只需90秒就能對一種產(chǎn)品做出下意識的判斷，而其中62%至90%的判斷僅基于顏色。因此，選擇合適的顏色對于改進產(chǎn)品的轉換率和提高產(chǎn)品的可用性是非常有用的。
為了創(chuàng)造好的設計，更有效地運用顏色，你需要了解顏色是如何形成的，以及它們之間是如何相互聯(lián)系的。這就是為什么藝術學校、學院和大學的學生學習色彩理論，致力于研究色彩的本質(zhì)。今天，我們提供給你記住(甚至學習)色彩理論的基礎上的顏色組合，可以有效地應用于你的設計創(chuàng)作。
01.色相環(huán)/色輪
如果你上過有關繪畫的課，你一定見過由不同顏色組成的圓圈。它被稱為色相環(huán)/色輪，這有助于理解不同的顏色如何相互關聯(lián)，以及如何將它們組合起來。色相環(huán)通常由主色、次色和三色組成。最主要的是這三種色素的顏色不能形成任何其他顏色的組合。把原色結合起來，就得到了第二種顏色，而原色和第二種顏色的混合就得到了第三種顏色，它們通常有兩個詞的名字，比如紅紫。
色相環(huán)/色輪是由艾薩克·牛頓于1666年以示意圖的方式創(chuàng)建的，從那時起，它經(jīng)歷了許多變換，但仍然是色彩組合的主要工具。主要的想法是，色相環(huán)/色輪必須這樣做，以便顏色適當?shù)禺a(chǎn)生混合。
02.顏色模型
在你開始混合顏色之前，你需要了解顏色有兩種不同的性質(zhì):有形的顏色是物體表面的顏色，其他顏色是由光產(chǎn)生的，比如電視的光束。這些類型創(chuàng)建了兩個顏色模型，通過它們可以形成色輪:加法和減法。
加色模型將紅、藍、綠作為原色，因此也稱為RGB顏色系統(tǒng)。這個模型是屏幕上使用的所有顏色的基礎。在這個系統(tǒng)中，原色以相同比例組合而成的第二種顏色是青色、品紅和黃色，但是你需要記住，你添加的光越多，顏色就變得越亮越淺。對于習慣于油漆、染料、油墨和其他有形物體的減色法的人來說，通過混合加色得到的結果往往是違反直覺的。
減色法通過對光的減法得到顏色。它由兩種顏色系統(tǒng)組成。第一種是RYB(紅、黃、藍)，也稱為藝術系統(tǒng)，常用于藝術教育，尤其是繪畫。RYB是現(xiàn)代科學色彩理論的基礎，該理論認為青色、品紅和黃色是三種顏色中最有效的組合。這就是CMY顏色模型的形成過程。它主要用于印刷，當制版印刷的關鍵部件為黑色油墨時，該系統(tǒng)被命名為CMYK(青色、品紅、黃色和黑色)。如果沒有這種額外的色素，最接近黑色的陰影將是渾濁的棕色。
03.色彩的加法與減法
您應該記住這兩個系統(tǒng)之間的主要區(qū)別:加法用于數(shù)字屏幕，減法用于印刷媒體。如果你正在做的設計項目是要打印出來的，不要忘記一個簡單但重要的規(guī)則:你在屏幕上看到的顏色在打印出來的時候看起來不一樣。加色譜比CMYK更寬，這也是為什么建議設計師在打印前把他們的項目轉換成減色法，這樣他們就可以看到接近他們得到的結果。然而，如果您使用數(shù)字產(chǎn)品，RGB顏色系統(tǒng)是明智的選擇，因為它允許創(chuàng)建驚人的東西與它的廣譜彩色。
04.色彩協(xié)調(diào)
“協(xié)調(diào)”這個詞通常與有序和令人愉快的事物聯(lián)系在一起。色彩協(xié)調(diào)是指在設計中以最吸引人、最有效的方式對色彩進行排列，讓用戶感知。當色彩有條理的時候，觀者會感到愉悅和平靜，而不協(xié)調(diào)的設計則會給人混亂和厭惡的感覺。色彩的平衡在設計中是至關重要的，因為用戶對網(wǎng)站或應用程序的第一印象，顏色有很大的影響。設計師區(qū)分了有效工作的基本配色方案。
05.單色
它是基于一種顏色與它的各種色調(diào)搭配。單色的呈現(xiàn)總是一個勝利的選擇，因為它色彩屬性單一，容易創(chuàng)造一些簡潔的配色方案。
06.類似色/同類色
要創(chuàng)建類似的色彩，您需要使用顏色輪上相鄰的顏色。這種類型的配色方案用于不需要對比的設計，包括網(wǎng)頁或橫幅的背景。
07.互補色
互補的方案是混合的顏色放在彼此前面的色輪上。這個方案與類似的單色相反，因為它的目的是產(chǎn)生高對比度。例如，藍色背景上的橙色按鈕在任何界面中都很難被忽略。
08.分割互補
這個方案與前一個方案類似，但它使用了更多的顏色。例如，如果你選擇藍色，你需要選擇另外兩種顏色，這兩種顏色相鄰，意思是黃色和紅色。這里的對比度沒有互補方案那么鮮明，但它允許使用更多的顏色。
09.三元/三色方案
當設計需要更多的顏色時，您可以嘗試三元方案。它基于色輪上等距的三種不同顏色。為了在這個方案中保持平衡，建議使用一種顏色作為主色，另一種顏色作為輔色。
10.四色方案/雙互補
四色方案是為經(jīng)驗豐富的設計師，因為它是最難平衡。它采用了四種顏色的色輪，這是互補對。如果你把所選顏色上的點連接起來，它們就形成了矩形。這個方案很難協(xié)調(diào)，但是如果你做的一切都正確，結果可能會令人驚嘆。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
摘要
優(yōu)秀的項目源碼，即使是多人開發(fā)，看代碼也如出一人之手。統(tǒng)一的編碼規(guī)范，可使代碼更易于閱讀，易于理解，易于維護
HTML 規(guī)范
縮進
統(tǒng)一兩個空格縮進
命名規(guī)范
class 應以功能或內(nèi)容命名，不以表現(xiàn)形式命名；
class 與 id 單詞字母小寫，多個單詞組成時，采用中劃線-分隔；
使用唯一的 id 作為 Javascript hook, 同時避免創(chuàng)建無樣式信息的 class；
DOCTYPE 聲明
HTML 文件必須加上 DOCTYPE 聲明，并統(tǒng)一使用 HTML5 的文檔聲明：
<!DOCTYPE html>
meta 標簽
統(tǒng)一使用 “UTF-8” 編碼
<meta charset="utf-8">
SEO 優(yōu)化
<!-- 頁面關鍵詞 -->
<meta name ="keywords" content =""/>
<!-- 頁面描述 -->
<meta name ="description" content ="">
<!-- 網(wǎng)頁作者 -->
<meta name ="author" content ="">
優(yōu)先使用 IE 版本和 Chrome
<meta http-equiv ="X-UA-Compatible" content ="IE = edge，chrome = 1">
為移動設備添加視口
<!-- device-width 是指這個設備最理想的 viewport 寬度 -->
<!-- initial-scale=1.0 是指初始化的時候縮放大小是1，也就是不縮放 -->
<!-- user-scalable=0 是指禁止用戶進行縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
禁止自動識別頁面中有可能是電話格式的數(shù)字
<meta name="format-detection" content="telephone=no">
團隊約定：
pc 端：
<meta charset="utf-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
web前端開發(fā)資源Q-q-u-n： 767273102 ，內(nèi)有免費開發(fā)工具，零基礎，進階視頻教程，希望新手少走彎路
移動端：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
標簽
html 標簽分為以下幾類：
自閉合標簽（self-closing），無需閉合。例如：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 等 )
閉合標簽（closing tag），需閉合 。例如：textarea、title、h、div、span 等
團隊約定：
所有具有開始標簽和結束標簽的元素都必須要寫上起止標簽，某些允許省略開始標簽或和束標簽的元素亦都要寫上
自閉合標簽不要加上結束標簽
自定義標簽的名字必須包含一個破折號（-），<x-tags>、<my-element>和<my-awesome-app>都是正確的名字，而<tabs>和<foo_bar>是不正確的。這樣的限制使得 HTML 解析器可以分辨那些是標準元素，哪些是自定義元素
自定義標簽必須寫上開始標簽和閉合標簽
盡量減少標簽數(shù)量
元素屬性
元素屬性值使用雙引號語法
推薦：
<input type="text">
不推薦：
<input type=text>
<input type='text'>
代碼嵌套
塊元素可以包含內(nèi)聯(lián)元素或某些塊元素，但內(nèi)聯(lián)元素卻不能包含塊元素，它只能包含其它的內(nèi)聯(lián)元素
標題和段落中不能包含塊，如：h1、h2、h3、h4、h5、h6、p、dt
塊與內(nèi)聯(lián)不能并列，塊級元素與塊級元素并列、內(nèi)嵌元素與內(nèi)嵌元素并列
有些標簽是固定的嵌套規(guī)則，比如 ul 包含 li、ol 包含 li、dl 包含 dt 和 dd 等等。
靈活使用偽類
不要讓非內(nèi)容信息污染了你的 HTML，打亂了 HTML 結構?？梢允褂?before、:after 等偽類元素
推薦：
HTML 代碼
<!-- That is clean markup! -->
<span class="text-box">
See the square next to me?
</span>
CSS 代碼：
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
1
不推薦：
HTML 代碼：
<!-- We should not introduce an additional element just to solve a design problem -->
<span class="text-box">
<span class="square"></span>
See the square next to me?
</span>
CSS 代碼：
.text-box > .square {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
web前端開發(fā)資源Q-q-u-n： 767273102 ，內(nèi)有免費開發(fā)工具，零基礎，進階視頻教程，希望新手少走彎路
特殊符號必須使用轉義符
符號 描述 轉義符
空格
< 小于 <
> 大于 >
& 和 &
" 引號 "
純數(shù)字輸入框
使用 type=“tel” 而不是 type=“number”
<input type="tel">
類型屬性
不需要為 CSS、JS 指定類型屬性，HTML5 中默認已包含。
推薦：
<link rel="stylesheet" href="" >
<script src=""></script>
不推薦：
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
注釋規(guī)范
單行注釋
一般用于簡單的描述，如某些狀態(tài)描述、屬性描述等
注釋內(nèi)容前后各一個空格字符，注釋位于要注釋代碼的上面，單獨占一行
推薦：
<!-- Comment Text -->
<div>...</div>
不推薦：
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
6
模塊注釋
注釋內(nèi)容前后各一個空格字符
<!-- S Comment Text -->表示模塊開始
<!-- E Comment Text -->表示模塊結束，模塊與模塊之間相隔一行
模塊注釋內(nèi)部嵌套模塊注釋，<!-- /Comment Text -->
推薦：
<!-- S Comment Text A -->
<div class="mod_a">
<div class="mod_b">
...
</div>
<!-- /mod_b -->
<div class="mod_c">
...
</div>
<!-- /mod_c -->
</div>
<!-- E Comment Text A -->
<!-- S Comment Text D -->
<div class="mod_d">
...
</div>
<!-- E Comment Text D -->
web前端開發(fā)資源Q-q-u-n： 767273102 ，內(nèi)有免費開發(fā)工具，零基礎，進階視頻教程，希望新手少走彎路
22
語義化
沒有 CSS 的 HTML 是一個語義系統(tǒng)而不是 UI 系統(tǒng)
通常情況下，每個標簽都是有語義的
語義化的 HTML 結構，有助于機器（搜索引擎）理解，另一方面多人協(xié)作時，能迅速了解開發(fā)者意圖
建議頁面中多使用語義化標簽，而不是整個頁面以 div 構成
常見標簽語義：
標簽 語義
<p> 段落
<hn> 標題(h1~h6)
<ul> 無序列表
<ol> 有序列表
<nav> 標記導航，僅對文檔中重要的鏈接群使用
<main> 頁面主要內(nèi)容，一個頁面只能使用一次。如果是 web 應用，則包圍其主要功能
<article> 定義外部的內(nèi)容，其中的內(nèi)容獨立于文檔的其余部分
<section> 定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。
<aside> 定義其所處內(nèi)容之外的內(nèi)容。如側欄、文章的一組鏈接、廣告、友情鏈接、相關產(chǎn)品列表
<header> 頁眉通常包括網(wǎng)站標志、主導航、全站鏈接以及搜索框
<footer> 頁腳，只有當父級是 body 時，才是整個頁面的頁腳
<figure> 規(guī)定獨立的流內(nèi)容（圖像、圖表、照片、代碼等等）（默認有 40px 左右 margin）
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網(wǎng)站建設 、平面設計服務。
我們先從真實生活場景中的互動說起。
人與人之間的互動無處不在，它是我們生活中必要的組成部分，也是整個人類社會的基石。從本質(zhì)上來講，社交產(chǎn)品要解決的問題就是人們之間互動的問題。那么如何定義互動呢，我們可以從日常的生活場景中窺得一二。
首先，讓我們來看一看日常生活中的互動案例：
這是一個很常見的熟人互動案例，我們可以看到，熟人間很容易產(chǎn)生話題，并持續(xù)互動下去。但是如果同樣的話題發(fā)生在不是很熟悉的人之間，可能就會是另一番場景：
在例二中，因為A與B互相不熟悉，所以A沒有對B的回復產(chǎn)生進一步互動，對話因此而結束。我們可以進一步推理，其實在這個案例中，不管原因變成什么，只要A沒有響應B的反饋，那么A與B的互動就大概率會終止。
這是因為良好的互動行為一定是雙方(或多方)的互相行為，一旦因為某些原因?qū)е缕渲械姆答佒袛啵訉o法持續(xù)。由此可以總結出：
互動在本質(zhì)上是由一系列的反饋(互動)組成的一條反饋鏈
但是光有反饋鏈還遠遠不夠，在社交場景下，我們往往希望反饋鏈足夠長，這樣才能讓互動雙方產(chǎn)生感情升溫。在例二中，其實是存在著一條很短的反饋鏈的，A與B只互動了一個回合。A沒有繼續(xù)響應B的反饋，是因為B的反饋質(zhì)量較低。試想，當A向B問好時，若B的回復是“早上好，你今天穿的真精神！”，那么A會不會響應B的反饋呢？我想大概是會的。由此可見：
反饋鏈的長短取決于每次反饋(互動)的質(zhì)量。
高質(zhì)量的反饋具備很多特點，其中有三個尤為重要
1 反饋鏈中的指向性
我們?nèi)粘Ｉ钪械幕有袨?，一般都會以一個“握手機制”作為開端。這個握手機制可以是顯性的（直接喊出對方的稱呼，可以是名字、外號，也可以是關系稱謂），有時也可以是隱性的（眼光的對視、話題的流轉等）。這個握手機制幫助互動雙方建立了互動的場景，讓雙方達成"開始交流"的共識，以便信息的接收者做好傾聽并回復的準備，這就是互動中的指向性。
任何互動行為都是發(fā)生在兩個或者多個明確的對象之間的，因此在良好的互動行為中，指向性顯得尤為重要——沒有人會去響應別人的自言自語。在互動的過程中，指向性不明確的互動行為是低質(zhì)量的，不容易獲得進一步的反饋，例如評論區(qū)中的統(tǒng)一回復、群發(fā)的新年問候、領導在臺上的講話等。反之指向性明確的互動是高質(zhì)量的，比較容易獲得反饋，例如群聊中@某個人、收件人為某個人而非郵件組的郵件、多人聊天時眼光的對視等。
2 適度的互動行為
互動行為的適度包含兩個方面：信息適度及行為適度。
一方面，由于互動行為本質(zhì)上是信息的傳遞過程，因此每次反饋的信息質(zhì)量會直接影響到反饋的整體質(zhì)量。好的反饋應該傳達適度的信息，讓接收者可以對傳遞的信息進行輕松的接收及處理，降低接收者的反饋門檻。
另一方面，傳遞信息的行為也應該是適度的。在生活中，不同的場合下，我們會選擇不同的行為來表達同樣的意思，比如比較正式的場合會選擇握手作為問好，而與家人久別后的見面則可能是一個熱情的擁抱。
3 反饋的即時性
互動行為是依賴于一定語境的，當語境消失，互動也將停止。在社交產(chǎn)品的互動場景中，互動語境一般會隨時間流逝而逐漸減弱直到消失，所以反饋的質(zhì)量也隨時間的流逝而逐漸衰減，若想讓反饋鏈可以得到延續(xù)，要盡量保證在語境消失前產(chǎn)生反饋行為，因此即時性的反饋就顯得十分重要。
有了以上的理論基礎，接下來分析一下Qzone中的互動行為。
Qzone中的互動方式可以歸為三類：評論、轉發(fā)、點贊。其中，評論和轉發(fā)都可以產(chǎn)生完整的反饋鏈。針對評論，用戶還可以繼續(xù)通過評論、點贊等方式進行反饋；針對轉發(fā)內(nèi)容，用戶也可以進行進一步的評論、轉發(fā)、點贊。而對于點贊行為，反饋鏈到此戛然而止，用戶無法對點贊行為進行直接的反饋。
因此，為了讓用戶的點贊可以形成完整的反饋鏈，我們的設計目標就呼之欲出——為Qzone中的點贊行為尋找一個具有指向性的、適度的、具有即時性的反饋行為。互動場景的選擇
既然要設計的是一個具有指向性的互動行為，我們就必須在可以接收到贊的場景里去做這件事。所以我們首先遍歷了主人態(tài)下，所有可以看到別人給自己點贊的場景。
但是以上的場景中，并不是都適合承載點贊的反饋行為。根據(jù)用戶的行為目的，我們可以把以上場景分為兩類：圍繞點贊行為的關鍵行為路徑（圖c.消息列表、圖d.點贊列表）、不以點贊為核心目標的其他場景（圖a.好友動態(tài)、圖b.個人主頁）。顯然，我們應該把圍繞點贊行為的關鍵行為路徑作為主要互動場景。并且所有對于點贊的反饋都是直接依附于點贊行為本身的，使反饋行為具有明確的指向性。
前文提到，適度的互動包含“信息適度”和“行為適度”兩個方面，落地到產(chǎn)品里，就是定義互動行為的“語義”和“交互行為”。
關于點贊反饋行為的語義表達，我們列舉了很多來自現(xiàn)實社交場景中的備選方案，然后以動作的情感程度和成熟程度劃分了4個象限，對這系列動作進行歸類。
由于點贊行為本身所傳達的情感是比較輕量化的，我們更傾向于選擇一個輕量化的情感表達方式作為點贊的反饋；同時由于Qzone的用戶群體以年輕用戶為主，我們還需要選擇一個盡量貼合年輕用戶感官的語義。因此我們在象限圖中初步選中位于左下角的“擊掌”和“剪刀手”兩個概念?？紤]到“擊掌”比“剪刀手”具有更為明顯的指向性，所以確定“擊掌”為最終的落地方案。
同時，因為點贊行為本身是一個及其輕量化的行為，所以我們也用最輕量的交互操作作為它的反饋，只需要一次點擊即可。
用戶每次收到針對點贊的反饋，都會收到一條與點贊相同的消息提醒，通過push、首頁新消息提醒、紅點等讓用戶第一時間知曉。在消息箱列表中，每一條點贊和回贊都成為單獨的一條消息，可以讓用戶最直觀的查看并進行反饋。
綜上所述，我們確定了整個反饋鏈的交互框架：
擊掌的視覺設計是一個發(fā)現(xiàn)問題到解決問不斷循環(huán)的過程。在這個過程中，推動解決方案逐步升級的核心方法是情感化設計。
擊掌動作本身就帶有豐富的情緒，而情感化的設計方法可以讓情緒的釋放更大化，所以在視覺設計階段，我們以情感化設計作為方法去推進方案逐步完善，最終建立起用戶與產(chǎn)品、用戶與用戶間的情感連接，加深用戶對功能的認可和共鳴，帶來更加有趣的體驗。
情感化設計具象到擊掌這個功能，需要解決兩個問題：
1.如何喚起用戶在現(xiàn)實場景中的擊掌記憶；
2.如何符合空間用戶群體的基本調(diào)性。
設計之初，我們用平面icon的形式來表現(xiàn)擊掌，雖然可以滿足基本的功能訴求，但是在視覺體驗上乏善可陳，我們又嘗試更豐富的各種視覺表現(xiàn)以此引起用戶對擊掌這個動作的共鳴。
在設計推敲的過程中共經(jīng)歷了三個階段，在不斷發(fā)現(xiàn)問題和解決問題的循環(huán)中尋找更優(yōu)的設計方案：
Step 1 | 靜態(tài)展示到動勢塑造
我們用兩個手掌疊加的樣式構造了擊掌icon的基本造型。為了增強用戶對于“擊掌”的語義感知使用了漫畫中常用的動態(tài)線條，讓用戶從視覺上直觀感受到這是一個動態(tài)的互動行為，而非簡單的單方面點亮icon，以此加強用戶對擊掌這個互動行為的認知。
Step 2 | 2D動畫演繹
但是這樣的動勢表達仍然具有局限性，動態(tài)線條的表達方式并不具備普適性，無法保證用戶可以理解其中的含義。因此我們在第二個階段的設計迭代中使用更加直觀的動畫來幫助用戶理解，使其與現(xiàn)實生活中的動作產(chǎn)生呼應。
Step 3 | 3D表現(xiàn)
在解決了語義表達的問題后，我們遇到了一個新的挑戰(zhàn)，由于整個動畫的展示視范圍較小，在視覺表現(xiàn)力上并不理想。因此在第三個設計階段中，我們通過放大動畫、嘗試3D表現(xiàn)形式的方法解決上述問題。同時，3D的表現(xiàn)手法還可以通過光影和質(zhì)感來傳達更多信息，更加直觀易懂，具有極強的代入感。
空間的主流用戶以年輕人居多，為了匹配用戶群體的基本調(diào)性需要打造一個“年輕”、“有趣”的3D擊掌動畫。為此，我們以“3D”、“young”、“fun”作為關鍵詞收集參考素材，以此建立情緒版。
1 趣味和輕量的質(zhì)感
如前文所述，對于擊掌反饋行為是一個輕量化的互動，為避免3D表現(xiàn)手法過于寫實而帶來不必要的厚重感，同時也為了增加動畫的趣味性，我們選擇卡通的手掌造型進行建模；在材質(zhì)的選擇上我們偏向黏土材質(zhì)，弱化高光，讓視覺上體驗更加輕量。
2 彈性曲線讓動畫更生動
現(xiàn)實生活中的擊掌動作是一個減速運動，但是為突出擊掌的動勢和加強趣味性，我們采用了非寫實的彈性曲線來打造這個動畫，以此加強動畫的趣味性。
3 禮花烘托氛圍
在后續(xù)的產(chǎn)品迭代優(yōu)化過程中，我們引入了無限擊掌的玩法，用戶之間可以無限回贊。這就導致動畫被重復播放，會加速用戶對動畫的審美疲勞。所以為配合產(chǎn)品玩法的升級對動畫的設計也進行了迭代，基于擊掌次數(shù)設計了不同的展示彩蛋——在擊掌達到特定次數(shù)后，會有彩帶禮花蹦出，在烘托多次擊掌的熱情氛圍的同時，給用戶帶來更多趣味和驚喜。
在擊掌功能的設計過程中，我們不斷在發(fā)現(xiàn)問題、解決問題的循環(huán)中不斷尋求更優(yōu)解，逐步把一個不到100像素范圍內(nèi)的擊掌icon做到更好，以此來喚起用戶的對現(xiàn)實擊掌的記憶，建立起與用戶情感上的連接。
另外，通過趣味性的視覺表現(xiàn)手法不斷推敲動畫設計，讓Qzone的年輕用戶不僅從心理上建立連接，在表現(xiàn)層也能感知到符合自身標簽的趣味調(diào)性。
除上文提到的彩帶禮花以外，在擊掌玩法升級過程中，我們也拓展了更多內(nèi)容：
隨著用戶間反復擊掌次數(shù)變多，粒子效果會不斷升級，并加入富有層次的入場效果；而且達到關鍵擊掌次數(shù)的時候，會展示擊掌的次數(shù)，通過用戶的成就感來刺激其產(chǎn)生更多的擊掌行為。
為了豐富手掌樣式的選擇，給用戶提供更多樣的體驗，我們和增值團隊一起設計了更多的手掌形式，同時引入一些IP形象，讓擊掌更能喚起用戶的共鳴，也更加有趣。
擊掌這個功能從前期探索到上線和二次迭代經(jīng)歷了很長一段時間，整個項目對設計師來說也是一次收獲滿滿的過程。
創(chuàng)新也可以是從1到N的過程
創(chuàng)新并不都是從0到1從無到有的創(chuàng)新，尤其對于功能和框架體系成熟的產(chǎn)品，盲目的追求創(chuàng)新去改變用戶的認知和習慣是不妥的，從小的問題點著手去深挖和思考，找到合適的解決方案并打磨細節(jié)給用戶創(chuàng)造驚喜，以小博大去做創(chuàng)新也能達到四兩撥千斤的效果。
打磨細節(jié)創(chuàng)造驚喜
探索和挖掘到一個不錯的想法之后，打磨細節(jié)也是同樣重要的，我們出了各種不同的擊掌效果方案，去找到給用戶驚喜和操作輕量的平衡，這個功能上線以后我們也一直在關注用戶的反饋，從用戶反饋中發(fā)現(xiàn)還可以做驚喜升級，從一個點出發(fā)，把這個點不斷的擴充做的更細致和更加閉環(huán)。
從生活中來，到生活中去
擊掌這個功能之所以有這個好的數(shù)據(jù)和用戶認可度，有一個很重要的原因是因為本身這個行為和現(xiàn)實生活中的場景是相對應的，所以讓用戶能很快的理解和操作，符合用戶真實場景的認知所以學習成本比較低，我們在做設計的時候用生活場景挖掘產(chǎn)品，能達到事倍功半的效果。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
前言
之前有個同學詢問我是否能夠爬取知乎的全部回答，當初只會Scrapy無法實現(xiàn)下拉的數(shù)據(jù)全部加載。后來在意外中接觸了selenium的自動化測試，看出了selenium的模擬能力的強大，而昨天有個同學問我能否爬取中國工商銀行遠程銀行的精彩回答，我說可以試試。
思路
selenium模擬下拉直至底部
然后通過selenium獲取數(shù)據(jù)集合
通過pandas寫入excel
selenium模擬下拉直至底部
此處全靠一位大佬的博客點撥，實在不好意思的是，selenium就看了下常用的api，實在不懂如何判斷是否加載完畢，而該博客代碼的原理也好理解，通過不斷下拉判斷與上一次高度進行對比，知道前端頁面的滾動高度屬性就懂了，當然思想最重要。
見代碼:
#將滾動條移動到頁面的底部
all_window_height = [] # 創(chuàng)建一個列表，用于記錄每一次拖動滾動條后頁面的最大高度
all_window_height.append(self.driver.execute_script("return document.body.scrollHeight;")) #當前頁面的最大高度加入列表
while True:
self.driver.execute_script("scroll(0,100000)") # 執(zhí)行拖動滾動條操作
time.sleep(3)
check_height = self.driver.execute_script("return document.body.scrollHeight;")
if check_height == all_window_height[-1]: #判斷拖動滾動條后的最大高度與上一次的最大高度的大小，相等表明到了最底部
print("我已下拉完畢")
break
else:
all_window_height.append(check_height) #如果不想等，將當前頁面最大高度加入列表。
print("我正在下拉")
然后通過selenium獲取數(shù)據(jù)集合
通過find_elements_by_css_selector方法獲取元素對象列表，然后通過遍歷列表獲取單個對象，通過對象的text屬性獲取數(shù)據(jù)。
代碼與"通過pandas寫入excel"代碼想結合。
通過pandas寫入excel
example.xlsx
批量將數(shù)據(jù)依次寫入excel，此處個人知道有兩種寫法，推薦后者。
寫法一:
problem = cls.driver.find_elements_by_css_selector("li h2.item-title a")
data = pd.read_excel('example.xlsx', sheet_name = 'Sheet1')
problemtext = []
for i in problem:
problemtext .append(i.text)
replytext = []
reply = cls.driver.find_elements_by_css_selector("div.item-right p")
for j in reply:
replytext.append(j.text)
data.loc[row,'答案'] = j.text
data['問題'] = problemtext
data['答案'] = replytext
DataFrame(data).to_excel('test.xlsx', sheet_name='Sheet1')
寫法二:
problem = cls.driver.find_elements_by_css_selector("li h2.item-title a")
data = pd.read_excel('example.xlsx', sheet_name = 'Sheet1')
row = 1
for i in problem:
data.loc[row,'問題'] = i.text
row += 1
row = 1
reply = cls.driver.find_elements_by_css_selector("div.item-right p")
for j in reply:
data.loc[row,'答案'] = j.text
row += 1
DataFrame(data).to_excel('test.xlsx', sheet_name='Sheet1')
完整代碼
import pandas as pd
from pandas import DataFrame
import unittest
import time
from selenium import webdriver
from selenium.webdriver.support.ui import Select
from selenium.webdriver.support.select import Select
from selenium.webdriver.support.ui import WebDriverWait
class autoLogin(unittest.TestCase):
URL = 'http://zhidao.baidu.com/business/profile?id=87701'
@classmethod
def setUpClass(cls):
cls.driver = webdriver.Firefox()
cls.driver.implicitly_wait(20)
cls.driver.maximize_window()
def test_search_by_selenium(self):
self.driver.get(self.URL)
self.driver.title
time.sleep(1)
#將滾動條移動到頁面的底部
all_window_height = []
all_window_height.append(self.driver.execute_script("return document.body.scrollHeight;"))
while True:
self.driver.execute_script("scroll(0,100000)")
time.sleep(3)
check_height = self.driver.execute_script("return document.body.scrollHeight;")
if check_height == all_window_height[-1]:
print("我已下拉完畢")
break
else:
all_window_height.append(check_height)
print("我正在下拉")
@classmethod
def tearDownClass(cls):
html=cls.driver.page_source
problem = cls.driver.find_elements_by_css_selector("li h2.item-title a")
data = pd.read_excel('example.xlsx', sheet_name = 'Sheet1')
row = 1
for i in problem:
data.loc[row,'問題'] = i.text
row += 1
row = 1
reply = cls.driver.find_elements_by_css_selector("div.item-right p")
for j in reply:
data.loc[row,'答案'] = j.text
row += 1
DataFrame(data).to_excel('test.xlsx', sheet_name='Sheet1')
#保存成網(wǎng)頁
with open("index.html", "wb") as f:
f.write(html.encode())
f.close()
cls.driver.quit()
if __name__ == '__main__':
unittest.main(verbosity=2)
text.xlsx
總結
在使用Scrapy爬蟲時，可以通過selenium來執(zhí)行網(wǎng)頁中的一些js腳本，但是如何將二者結合起來，以及各種框架之間的靈活運用，都將是我需要面對的。
---------------------
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網(wǎng)站建設 、平面設計服務。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
在過去兩個月，從國外的 Google I/O、Apple WWDC、Facebook 開發(fā)者大會，到國內(nèi)的飛聊、QQ改版、豆瓣FM 6.0，可以看到很多關于交互設計上的趨勢。同時，我從日常的產(chǎn)品體驗中，整理了一些思考內(nèi)容，以下是對 2020 年交互設計趨勢的展望。
在 iOS 13 中，模態(tài)面板采用了新的卡片樣式，它占據(jù)了屏幕 90% 的面積。模態(tài)面板拉起時，原有的頁面會有一個縱深效果，以灰色狀態(tài)顯示，防止用戶和它們發(fā)生交互。模態(tài)面板可以通過滑動操作下拉關閉，適用于單手操作，專為大屏服務。
在系統(tǒng)郵件、日歷、通訊錄、Apple Music、信息 Animoji 等自帶應用中，模態(tài)面板得到了廣泛應用。
△ Apple Music & 郵件
夸克瀏覽器是專注下半部分做得最好的一個，夸克并沒有像 Safari、Chrome 那樣把搜索框放在頂部，而是將整合后的搜索欄放在了用戶更容易操作的屏幕下半部分。
分層內(nèi)容是基于動作菜單，彈出分層內(nèi)容。分層內(nèi)容的展現(xiàn)形式可以減少頁面跳轉，讓用戶保持在最原始的環(huán)境中。并且主要操作交互位于界面下半部分，觸手可及。
△ Snapchat & Keep
1. 懸停分層
在網(wǎng)易云音樂、即刻、飛聊等應用中，采用了懸停分層。頂部展示的是介紹性內(nèi)容，隨著頁面下滑，介紹內(nèi)容隱藏，同時功能欄將置頂懸停，展示的內(nèi)容區(qū)域大大增加。
△ 網(wǎng)易云音樂 & 即刻
△ Broadcasting iOS App UI Exploration
連續(xù)性頁面的轉換效果可以很好記住產(chǎn)品路線，加強了頁面的層級關系。同時，流暢的動畫轉換效果，帶來了更連貫的用戶體驗。
App Store 和 Behance，以及最近發(fā)布的豆瓣 FM 6.0，都采用了這種方式。
△ App Store & Behance
很多App在引導評分樣式上，都采用的是系統(tǒng)彈窗。在 Keep App 上，設計了一個全屏展示的評分提示。形式新穎，加上背景圖的氣氛，讓人想去評分的意愿大大增加。
同樣，Airbnb 的系統(tǒng)通知提示也是采用的全屏展示，這是一個趨勢，值得我們?nèi)リP注。
△ Airbnb 愛彼迎 & Keep
1. 蘋果賬號登錄
近兩年幾乎所有的 App 都會推薦首先使用手機號+短信驗證碼的方式注冊/登錄，同時也會接入像微信、QQ、支付寶這樣的三方登錄。
在 WWDC 2019 上，蘋果也給我們帶來了 「使用蘋果賬號登錄」，幾乎所有的蘋果設備都會登錄 Apple ID。因此，我們可以在不久的將來，通過蘋果賬號，就可以直接登錄所有的 App，是不是很方便？
2. 號碼識別
網(wǎng)易易盾的號碼識別，可以自動獲取當前開啟流量的 SIM 卡號碼，一鍵點擊即可完成注冊、登錄操作。減少手機號輸入、短信驗證碼等待時間等傳統(tǒng)步驟，提升關鍵環(huán)節(jié)轉化率。
△ 網(wǎng)易易盾
近年來，智能語音技術在很多場景得到了應用，微軟的 Cortana，蘋果的 Siri、谷歌的 Assistant。在引入深度學習后，語音助手可以在訓練中越來越強，吐詞更連貫。夸克的語音助手有本地天氣、本周本月可視化數(shù)據(jù)、新聞熱點、節(jié)日問候、冷知識等功能。
在5月的開發(fā)者大會上，谷歌展示了其人工智能與語音識別的 Live Relay 技術。其能夠為不便應答電話的用戶，提供基于實時語音/文字互轉的通話支持。對于聾啞人來說，這絕對是一項實用的功能。
△ Google I/O 2019 Live Relay
事實上，Live Relay 也能幫助到一般人，例如當我們需要接聽重要電話，但卻無法離開當下所進行事項，Live Relay 在此時就能派上用場，透過輸入文字的方式，接聽重要來電。
最方便的是，Live Relay 還可整合即時的翻譯功能，這在與外國人士溝通時起了很大的幫助作用，可說是另外一種「無障礙功能」。
1. WANNA KICKS 通過AR技術「試鞋」
通過 AR 增強現(xiàn)實技術與智能手機相機的結合，幫助你看到 YEEZY BOOST 350 等運動鞋「穿」在自己腳上的效果，它甚至還能模擬出鞋子在光線不同環(huán)境下的各種效果。
2. 小程序AR+口紅試色
昨天，首個支持AR動態(tài)試妝的小程序「阿瑪尼美妝」同步更新上線?；谛〕绦蚧A能力和谷歌 TensorFlow 機器學習開源平臺支持，歐萊雅集團開發(fā)了 AR 動態(tài)試妝能力。相比以前上傳照片的試色方式，AR 動態(tài)試妝讓試色更真實。
AR 使用在網(wǎng)頁設計或應用程序領域，它能夠自然地將虛擬與現(xiàn)實結合，帶來身臨其境的新體驗。
△ App Store & QQ
在 QQ 的版本中，列表頁面長按消息，會彈出多窗口模式，消息可以來回切換，類似于 iOS 后臺切換模式。在會話窗口長按任意地方，也會呼出多窗口模式。
科技發(fā)展給設計產(chǎn)生的影響是巨大的，讓我更深刻地認識到作為設計師的責任。這些設計趨勢有意或無意地將幫助用戶得到更好的產(chǎn)品體驗。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。
藍藍設計的小編 http://sillybuy.com