App界面設(shè)計(jì)對(duì)于設(shè)計(jì)師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉(zhuǎn)移到了移動(dòng)平臺(tái)，使得更多的UI設(shè)計(jì)師涌入移動(dòng)端領(lǐng)域，甚至出現(xiàn)了市場(chǎng)飽和的言論，對(duì)于從事移動(dòng)端的UI設(shè)計(jì)師來講，充滿壓力的同時(shí)又面臨無限機(jī)遇，唯有不斷的學(xué)習(xí)才能滋生出源源不斷的設(shè)計(jì)靈感，站穩(wěn)腳跟。

摹客想在這方面給各位設(shè)計(jì)師朋友做點(diǎn)什么，除了提供簡(jiǎn)單好用的設(shè)計(jì)工具，我們也整理了非常多的優(yōu)秀設(shè)計(jì)案例，希望可以對(duì)設(shè)計(jì)師朋友有借鑒意義。這將會(huì)是一個(gè)系列的專題，我們以月為單位，整理了國(guó)內(nèi)外設(shè)計(jì)師的優(yōu)秀APP界面設(shè)計(jì)案例，我們是搬運(yùn)工，更是好設(shè)計(jì)的傳達(dá)者，希望你會(huì)喜歡。

接下來為大家分享精美的app UI設(shè)計(jì)案例：

--手機(jī)appUI設(shè)計(jì)--

  更多精彩文章：

      手機(jī)appUI界面設(shè)計(jì)賞析（一）

       手機(jī)appUI界面設(shè)計(jì)賞析（二）

       手機(jī)appUI界面設(shè)計(jì)賞析（三）

       手機(jī)appUI界面設(shè)計(jì)賞析（四）

       手機(jī)appUI界面設(shè)計(jì)賞析（五）

       手機(jī)appUI界面設(shè)計(jì)賞析（六）

       手機(jī)appUI界面設(shè)計(jì)賞析（七）

       手機(jī)appUI界面設(shè)計(jì)賞析（八）

       手機(jī)appUI界面設(shè)計(jì)賞析（九）

        手機(jī)appUI界面設(shè)計(jì)賞析（十）

       手機(jī)appUI界面設(shè)計(jì)賞析（十一）

      手機(jī)appUI界面設(shè)計(jì)賞析（十二）

      手機(jī)appUI界面設(shè)計(jì)賞析（十三）

      手機(jī)appUI界面設(shè)計(jì)賞析（十四）

      手機(jī)appUI界面設(shè)計(jì)賞析（十五）

      手機(jī)appUI界面設(shè)計(jì)賞析（十六）

      手機(jī)appUI界面設(shè)計(jì)賞析（十七）

      手機(jī)appUI界面設(shè)計(jì)賞析（十八）

      手機(jī)appUI界面設(shè)計(jì)賞析（十九）

      手機(jī)appUI界面設(shè)計(jì)賞析（二十）

      手機(jī)appUI界面設(shè)計(jì)賞析（二十一）

     手機(jī)appUI界面設(shè)計(jì)賞析（二十二）

     手機(jī)appUI界面設(shè)計(jì)賞析（二十三）

最近，我花了一些時(shí)間觀察UI設(shè)計(jì)的發(fā)展方向。我偶然發(fā)現(xiàn)了一些非常有創(chuàng)意的趨勢(shì)，我認(rèn)為這些趨勢(shì)將在不久的將來將重新塑造UI設(shè)計(jì)。

以下是根據(jù)我的觀察得出的10種趨勢(shì)：

1.新Neuomorphism

新形態(tài)在不斷發(fā)展，我想它會(huì)一直存在（無論你喜歡與否）。它最初的形式并沒有持續(xù)很長(zhǎng)時(shí)間，但是它正在朝著更加復(fù)雜和易于訪問的方向發(fā)展。這幾乎就像擬物象，但有一種新鮮、現(xiàn)代、更美學(xué)的氛圍。

2.軟漸變

漸變無處不在！實(shí)際上，我在背景和UI元素（例如按鈕，卡片和圖形）上看到了很多。

混合兩種以上的顏色以創(chuàng)建一個(gè)彩色模糊的背景也是一件事！

3.幾何元素

無論是作為主要的背景或主題，還是只是讓設(shè)計(jì)看起來更有趣的一個(gè)細(xì)節(jié)——幾何元素越來越受到關(guān)注。通常將它們混合在一起以創(chuàng)建馬賽克——結(jié)果看起來非常酷！

4.柔和的背景

不得不說我喜歡這種趨勢(shì)，我見過許多令人驚艷的、輕量級(jí)的、美觀的設(shè)計(jì)，其具有非常精致、明亮柔和的配色方案。

它使設(shè)計(jì)看起來非?，F(xiàn)代、沒有干擾、清新而令人愉悅，其中內(nèi)容扮演主要角色，其他一切只是一個(gè)微妙的背景。

5.插圖和3D

插圖仍然很流行，不同的樣式、配色方案、或多或少的抽象，所以它們符合產(chǎn)品的特點(diǎn)。不僅是平面的，而且還模仿了3D的外觀。我相信這是一個(gè)很好的改變，在地球上的每一個(gè)數(shù)字項(xiàng)目使用了這么多年的庫(kù)存圖片之后，我在這里給出了一些有關(guān)如何創(chuàng)建簡(jiǎn)單插圖的提示：

6.抽象的形狀

用于背景和不同的UI元素，它們使界面看起來更“有機(jī)”和好玩，我認(rèn)為這是一件好事。使用鋼筆工具編輯最簡(jiǎn)單的形狀（正方形，橢圓形），使用不同的邊框半徑，嘗試使用不同的顏色/漸變，你可能會(huì)得到一個(gè)非常有趣的結(jié)果。在這里嗎，我們或許可以嘗試一下這個(gè)簡(jiǎn)單卻神奇的工具Blobmaker。

7.暗模式

暗模式是界面的顏色反轉(zhuǎn)版本，以使其在晚上更易于訪問。由于我是典型的夜貓子，因此我經(jīng)常在晚上使用深色模式。創(chuàng)建暗模式時(shí)，記住要在不同元素和版式之間保持正確的對(duì)比。

8.角度元素

不僅用于Dribbble shots，而且還用作以非標(biāo)準(zhǔn)方式在網(wǎng)站上呈現(xiàn)不同內(nèi)容的方式。它使內(nèi)容看起來更有趣和吸引眼球。那么，如何快速實(shí)現(xiàn)這一效果呢？首先，對(duì)0度的角度拼貼元素。把他們分成一組。然后，更改組角度（從30°到50°），瞧！這樣，你就不必手動(dòng)更改每個(gè)元素的角度了。

9.柔和的陰影

這是另一個(gè)我最喜歡的趨勢(shì)，柔和的陰影使UI看起來更深入。這種效果通常非常微妙，但在美學(xué)上令人愉悅。一般來說，陰影使某些UI元素變得“可單擊”，并且它們有助于區(qū)分內(nèi)容之間的層次結(jié)構(gòu)。你可以在此處了解如何進(jìn)行操作：

10.簡(jiǎn)單、thick字體

我從不喜歡比較薄的字體（在iOS7時(shí)代），所以我很高興看到這種趨勢(shì)消失了。現(xiàn)在，我正在觀察使用更粗、更簡(jiǎn)單的形式（幾乎為方形）的可讀字體。它們使界面看起來更加現(xiàn)代和優(yōu)美。如果你要搜索類似的產(chǎn)品，可以試試Poppins、Montserrat（免費(fèi)）、Gilroy、Sofia Pro、Proxima Nova（付費(fèi)）。

來源：Diana Malewicz：10 Newest and promising UI design trends

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

uni-app 代碼

選擇圖片代碼（uniapp 代碼示例）

選擇圖片代碼以及文檔

uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; } }); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

上傳圖片以及文檔

tempFilePaths 為選擇圖片res 里面的其中一個(gè)對(duì)象
注意：uniapp 上傳圖片不能上傳選中的File 文件（tempFiles這個(gè)數(shù)組的東西不能夠上傳） 要上傳（tempFilePaths）讀取圖片后數(shù)組的 此數(shù)組可以用來瀏覽，上傳
選擇圖片加上傳圖片代碼

*多圖上傳注意 files 數(shù)組 對(duì)象不能直接傳 tempFilePaths這個(gè)數(shù)組 必須要更改

 let img = []; for (let i = 0; i < tempFilePaths.length; i++) { let obj = new Object(); obj.name = `file` + i; obj.uri = tempFilePaths[i]; img.push(obj); obj = null; } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

uniapp 全部代碼

 uni.chooseImage({ count: 9, success: (res) => { //上傳文件的臨時(shí)路徑 const tempFilePaths = res.tempFilePaths; let img = []; for (let i = 0; i < tempFilePaths.length; i++) { let obj = new Object(); obj.name = `file` + i; obj.uri = tempFilePaths[i]; img.push(obj); obj = null; } const tempFilePaths = res.tempFilePaths; console.log(res); uni.uploadFile({ url:'http://192.168.88.15:8978/Mailbox/'+that.api.pudatefiles, filePath: tempFilePaths[0], files: img , name: 'file', success: (uploadFileRes) => { console.log(uploadFileRes) uni.hideLoading(); if (back.status == "0") { console.log(that.host + back.filepath[0]) that.editorCtx.insertImage({ src: that.host + back.filepath[0], alt: '圖像', success: function() {} }) } else { console.log(back.msg); } }, fail: () => { uni.hideLoading(); console.log('圖片上傳失敗，請(qǐng)聯(lián)系開發(fā)'); } }); } }) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

Node后端

1. npm install multer
2. npm i express

var express = require("express"); //Express框架 const multer = require("multer"); // multer中間件上傳圖片 接收文件post數(shù)據(jù) // 設(shè)置文件上傳的地方 let storage = multer.diskStorage({ destination: (req: any, file: any, cb: Function) => { cb(null, "./StaticResource/pudate/"); }, filename: (req: any, file: any, cb: Function) => { cb(null, Date.now() + "-" + file.originalname); }, }); let multerObj = multer({ dest: "./StaticResource/pudate/", storage }); //存放上傳的文件 app.use(multerObj.any()); // 存放所有的類型文件 //設(shè)置跨域訪問 app.all("*", (req: any, res: any, next: Function) => { res.header("Access-Control-Allow-Origin", "*"); res.header( "Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild" ); res.header( "Access-Control-Allow-Headers", "content-type,SelfSummerHeader,Authorization" ); //自定義請(qǐng)求頭 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", "3.2.1"); res.header("Content-Type", "application/json;charset=UTF-8"); res.header("Content-Type", "text/xml"); if (req.method === "OPTIONS" || req.url === "/favicon.ico") { // 攔截請(qǐng)求 return res.send(); } next(); }); app.listen(COMPort, (err: Error) => { if (err) { console.log('啟動(dòng)錯(cuò)誤', err) } console.table({ 端口: COMPort, IP: systemOs.IP(), 服務(wù)地址: `http://${systemOs.IP()}:${COMPort}/Mailbox`, 靜態(tài)資源: `IP端口地址加上文件名`, 描述: `Node服務(wù)已啟動(dòng)成功`, "swagger-ui": `http://${systemOs.IP()}:${COMPort}/api (ts代碼轉(zhuǎn)為js代碼可以正常使用)`, }); // 掛載自定義中間件 app.use(middleware_router.bodyData); }); router.all( "/pudatefiles", (req: { files: { path: string }[] }, res: any, next: any) => { let data: Array<string> = []; console.log(req.files); req.files?.forEach((item: any) => { let url = item?.path.replace(/\\/g, "/"); data.push(url?.replace("StaticResource", "")); }); res.sendSuccess(data, "上傳成功"); } );










藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：csdn    

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

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

本文出自 “旋木的技術(shù)博客” 博客，請(qǐng)務(wù)必保留此出處http://mrxiong.blog.51cto.com/287318/1651098

一.數(shù)值類型

Mysql支持所有標(biāo)準(zhǔn)SQL中的數(shù)值類型，其中包括嚴(yán)格數(shù)據(jù)類型(INTEGER,SMALLINT,DECIMAL,NUMBERIC)，以及近似數(shù)值數(shù)據(jù)類型(FLOAT,REAL,DOUBLE PRESISION),并在此基礎(chǔ)上進(jìn)行擴(kuò)展。

擴(kuò)展后增加了TINYINT,MEDIUMINT,BIGINT這3種長(zhǎng)度不同的整形，并增加了BIT類型，用來存放位數(shù)據(jù)。

整數(shù)類型        字節(jié)       范圍（有符號(hào)）      范圍（無符號(hào)）          用途 

TINYINT        1字節(jié)        (-128，127)          (0，255)            極小整數(shù)值 

SMALLINT       2字節(jié)     (-32 768，32 767)       (0，65 535)         小整數(shù)值 

MEDIUMINT      3字節(jié)    (-8 388 608，8 388 607) (0，16 777 215)      中整數(shù)值 

INT或INTEGER   4字節(jié)   (-2 147 483 648，2 147 483 647) (0，4 294 967 295) 大整數(shù)值 

BIGINT         8字節(jié)   (-9 233 372 036 854 775 808，9 223 372 036 854 775 807) (0，18 446 744 073 709 551 615) 極大整數(shù)值 

FLOAT          4字節(jié)   (-3.402 823 466 E+38，1.175 494 351 E-38)，0，(1.175 494 351 E-38，3.402 823 466 351 E+38) 0，(1.175 494 351 E-38，3.402 823 466 E+38) 單精度浮點(diǎn)數(shù)值 

DOUBLE         8字節(jié) (1.797 693 134 862 315 7 E+308，2.225 073 858 507 201 4 E-308)，0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) 0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) 雙精度浮點(diǎn)數(shù)值 

DECIMAL 對(duì)DECIMAL(M,D) ，如果M>D，為M+2否則為D+2 依賴于M和D的值 依賴于M和D的值 小數(shù)值

INT 類型:

在 MySQL 中支持的 5 個(gè)主要整數(shù)類型是 TINYINT，SMALLINT，MEDIUMINT，INT 和 BIGINT。這些類型在很大程度上是相同的，只有它們存儲(chǔ)的值的大小是不相同的。

MySQL 以一個(gè)可選的顯示寬度指示器的形式對(duì) SQL 標(biāo)準(zhǔn)進(jìn)行擴(kuò)展，這樣當(dāng)從數(shù)據(jù)庫(kù)檢索一個(gè)值時(shí)，可以把這個(gè)值加長(zhǎng)到指定的長(zhǎng)度。例如，指定一個(gè)字段的類型為 INT(6)，

就可以保證所包含數(shù)字少于 6 個(gè)的值從數(shù)據(jù)庫(kù)中檢索出來時(shí)能夠自動(dòng)地用空格填充。需要注意的是，使用一個(gè)寬度指示器不會(huì)影響字段的大小和它可以存儲(chǔ)的值的范圍。

萬一我們需要對(duì)一個(gè)字段存儲(chǔ)一個(gè)超出許可范圍的數(shù)字，MySQL 會(huì)根據(jù)允許范圍最接近它的一端截短后再進(jìn)行存儲(chǔ)。還有一個(gè)比較特別的地方是，

MySQL 會(huì)在不合規(guī)定的值插入表前自動(dòng)修改為 0。

UNSIGNED 修飾符規(guī)定字段只保存正值。因?yàn)椴恍枰４鏀?shù)字的正、負(fù)符號(hào)，可以在儲(chǔ)時(shí)節(jié)約一個(gè)“位”的空間。從而增大這個(gè)字段可以存儲(chǔ)的值的范圍。

ZEROFILL 修飾符規(guī)定 0（不是空格）可以用來真補(bǔ)輸出的值。使用這個(gè)修飾符可以阻止 MySQL 數(shù)據(jù)庫(kù)存儲(chǔ)負(fù)值。

FLOAT、DOUBLE 和 DECIMAL 類型

MySQL 支持的三個(gè)浮點(diǎn)類型是 FLOAT、DOUBLE 和 DECIMAL 類型。FLOAT 數(shù)值類型用于表示單精度浮點(diǎn)數(shù)值，而 DOUBLE 數(shù)值類型用于表示雙精度浮點(diǎn)數(shù)值。

與整數(shù)一樣，這些類型也帶有附加參數(shù)：一個(gè)顯示寬度指示器和一個(gè)小數(shù)點(diǎn)指示器。比如語句 FLOAT(7,3) 規(guī)定顯示的值不會(huì)超過 7 位數(shù)字，小數(shù)點(diǎn)后面帶有 3 位數(shù)字。

對(duì)于小數(shù)點(diǎn)后面的位數(shù)超過允許范圍的值，MySQL 會(huì)自動(dòng)將它四舍五入為最接近它的值，再插入它。

DECIMAL 數(shù)據(jù)類型用于精度要求非常高的計(jì)算中，這種類型允許指定數(shù)值的精度和計(jì)數(shù)方法作為選擇參數(shù)。精度在這里指為這個(gè)值保存的有效數(shù)字的總個(gè)數(shù)，

而計(jì)數(shù)方法表示小數(shù)點(diǎn)后數(shù)字的位數(shù)。比如語句 DECIMAL(7,3) 規(guī)定了存儲(chǔ)的值不會(huì)超過 7 位數(shù)字，并且小數(shù)點(diǎn)后不超過 3 位。

忽略 DECIMAL 數(shù)據(jù)類型的精度和計(jì)數(shù)方法修飾符將會(huì)使 MySQL 數(shù)據(jù)庫(kù)把所有標(biāo)識(shí)為這個(gè)數(shù)據(jù)類型的字段精度設(shè)置為 10，計(jì)算方法設(shè)置為 0。

UNSIGNED 和 ZEROFILL 修飾符也可以被 FLOAT、DOUBLE 和 DECIMAL 數(shù)據(jù)類型使用。并且效果與 INT 數(shù)據(jù)類型相同。

二.字符串類型

MySQL 提供了8個(gè)基本的字符串類型,分別:CHAR、VARCHAR、BINARY、VARBINARY、BLOB、TEXT、ENUM 各SET等多種字符串類型。

可以存儲(chǔ)的范圍從簡(jiǎn)單的一個(gè)字符到巨大的文本塊或二進(jìn)制字符串?dāng)?shù)據(jù)。

  字符串類型     字節(jié)大小         描述及存儲(chǔ)需求

    CHAR         0-255字節(jié)          定長(zhǎng)字符串 

    VARCHAR      0-255字節(jié)          變長(zhǎng)字符串 

    TINYBLOB     0-255字節(jié)        不超過 255 個(gè)字符的二進(jìn)制字符串 

    TINYTEXT     0-255字節(jié)        短文本字符串 

    BLOB         0-65535字節(jié)      二進(jìn)制形式的長(zhǎng)文本數(shù)據(jù) 

    TEXT         0-65535字節(jié)      長(zhǎng)文本數(shù)據(jù) 

    MEDIUMBLOB   0-16 777 215字節(jié) 二進(jìn)制形式的中等長(zhǎng)度文本數(shù)據(jù) 

    MEDIUMTEXT   0-16 777 215字節(jié) 中等長(zhǎng)度文本數(shù)據(jù) 

    LOGNGBLOB    0-4 294 967 295字節(jié) 二進(jìn)制形式的極大文本數(shù)據(jù) 

    LONGTEXT     0-4 294 967 295字節(jié) 極大文本數(shù)據(jù)

    VARBINARY(M)                   允許長(zhǎng)度0-M個(gè)字節(jié)的定長(zhǎng)字節(jié)符串，值的長(zhǎng)度+1個(gè)字節(jié)

    BINARY(M)    M                 允許長(zhǎng)度0-M個(gè)字節(jié)的定長(zhǎng)字節(jié)符串

CHAR 和 VARCHAR 類型

CHAR 類型用于定長(zhǎng)字符串，并且必須在圓括號(hào)內(nèi)用一個(gè)大小修飾符來定義。這個(gè)大小修飾符的范圍從 0-255。比指定長(zhǎng)度大的值將被截短，而比指定長(zhǎng)度小的值將會(huì)用空格作填補(bǔ)。

CHAR 類型可以使用 BINARY 修飾符。當(dāng)用于比較運(yùn)算時(shí)，這個(gè)修飾符使 CHAR 以二進(jìn)制方式參于運(yùn)算，而不是以傳統(tǒng)的區(qū)分大小寫的方式。

   CHAR 類型的一個(gè)變體是 VARCHAR 類型。它是一種可變長(zhǎng)度的字符串類型，并且也必須帶有一個(gè)范圍在 0-255 之間的指示器。CHAR 和 VARCHGAR 不同之處在于 MYSQL 數(shù)據(jù)庫(kù)處理

這個(gè)指示器的方式：CHAR 把這個(gè)大小視為值的大小，不長(zhǎng)度不足的情況下就用空格補(bǔ)足。而 VARCHAR 類型把它視為最大值并且只使用存儲(chǔ)字符串實(shí)際需要的長(zhǎng)度

(增加一個(gè)額外字節(jié)來存儲(chǔ)字符串本身的長(zhǎng)度)來存儲(chǔ)值。所以短于指示器長(zhǎng)度的 VARCHAR 類型不會(huì)被空格填補(bǔ)，但長(zhǎng)于指示器的值仍然會(huì)被截短。

因?yàn)?VARCHAR 類型可以根據(jù)實(shí)際內(nèi)容動(dòng)態(tài)改變存儲(chǔ)值的長(zhǎng)度，所以在不能確定字段需要多少字符時(shí)使用 VARCHAR 類型可以大大地節(jié)約磁盤空間、提高存儲(chǔ)效率。

VARCHAR 類型在使用 BINARY 修飾符時(shí)與 CHAR 類型完全相同。

TEXT 和 BLOB 類型

對(duì)于字段長(zhǎng)度要求超過 255 個(gè)的情況下，MySQL 提供了 TEXT 和 BLOB 兩種類型。根據(jù)存儲(chǔ)數(shù)據(jù)的大小，它們都有不同的子類型。這些大型的數(shù)據(jù)用于存儲(chǔ)文本塊或圖像、

聲音文件等二進(jìn)制數(shù)據(jù)類型。

TEXT 和 BLOB 類型在分類和比較上存在區(qū)別。BLOB 類型區(qū)分大小寫，而 TEXT 不區(qū)分大小寫。大小修飾符不用于各種 BLOB 和 TEXT 子類型。

比指定類型支持的最大范圍大的值將被自動(dòng)截短。

三.日期和時(shí)間類型

在處理日期和時(shí)間類型的值時(shí)，MySQL 帶有 5 個(gè)不同的數(shù)據(jù)類型可供選擇。它們可以被分成簡(jiǎn)單的日期、時(shí)間類型，和混合日期、時(shí)間類型。

根據(jù)要求的精度，子類型在每個(gè)分類型中都可以使用，并且 MySQL 帶有內(nèi)置功能可以把多樣化的輸入格式變?yōu)橐粋€(gè)標(biāo)準(zhǔn)格式。

 類型     大小(字節(jié))     范圍               格式          用途 

 DATE       4        1000-01-01/9999-12-31 YYYY-MM-DD    日期值 

 TIME       3        '-838:59:59'/'838:59:59' HH:MM:SS    時(shí)間值或持續(xù)時(shí)間 

 YEAR       1         1901/2155               YYYY       年份值 

 DATETIME   8       1000-01-01 00:00:00/9999-12-31 23:59:59 YYYY-MM-DD HH:MM:SS 混合日期和時(shí)間值 

 TIMESTAMP  4       1970-01-01 00:00:00/2037 年某時(shí) YYYYMMDD HHMMSS 混合日期和時(shí)間值，時(shí)間戳

DATE、TIME 和 TEAR 類型

MySQL 用 DATE 和 YEAR 類型存儲(chǔ)簡(jiǎn)單的日期值，使用 TIME 類型存儲(chǔ)時(shí)間值。這些類型可以描述為字符串或不帶分隔符的整數(shù)序列。如果描述為字符串,

DATE 類型的值應(yīng)該使用連字號(hào)作為分隔符分開，而 TIME 類型的值應(yīng)該使用冒號(hào)作為分隔符分開。

需要注意的是，沒有冒號(hào)分隔符的 TIME 類型值，將會(huì)被 MySQL 理解為持續(xù)的時(shí)間，而不是時(shí)間戳。

MySQL 還對(duì)日期的年份中的兩個(gè)數(shù)字的值，或是 SQL 語句中為 TEAR 類型輸入的兩個(gè)數(shù)字進(jìn)行最大限度的通譯。因?yàn)樗?TEAR 類型的值必須用 4 個(gè)數(shù)字存儲(chǔ)。

MySQL 試圖將 2 個(gè)數(shù)字的年份轉(zhuǎn)換為 4 個(gè)數(shù)字的值。把在 00-69 范圍內(nèi)的值轉(zhuǎn)換到 2000-2069 范圍內(nèi)。把 70-99 范圍內(nèi)的值轉(zhuǎn)換到 1970-1979 之內(nèi)。

如果 MySQL 自動(dòng)轉(zhuǎn)換后的值并不符合我們的需要，請(qǐng)輸入 4 個(gè)數(shù)字表示的年份。

DATETIME 和 TIMESTAMP 類型

除了日期和時(shí)間數(shù)據(jù)類型，MySQL 還支持 DATETIME 和 TIMESTAMP 這兩種混合類型。它們可以把日期和時(shí)間作為單個(gè)的值進(jìn)行存儲(chǔ)。

這兩種類型通常用于自動(dòng)存儲(chǔ)包含當(dāng)前日期和時(shí)間的時(shí)間戳，并可在需要執(zhí)行大量數(shù)據(jù)庫(kù)事務(wù)和需要建立一個(gè)調(diào)試和審查用途的審計(jì)跟蹤的應(yīng)用程序中發(fā)揮良好作用。

如果我們對(duì) TIMESTAMP 類型的字段沒有明確賦值，或是被賦與了 null 值。MySQL 會(huì)自動(dòng)使用系統(tǒng)當(dāng)前的日期和時(shí)間來填充它。

復(fù)合類型

MySQL 還支持兩種復(fù)合數(shù)據(jù)類型 ENUM 和 SET，它們擴(kuò)展了 SQL 規(guī)范。雖然這些類型在技術(shù)上是字符串類型，但是可以被視為不同的數(shù)據(jù)類型。

一個(gè) ENUM 類型只允許從一個(gè)集合中取得一個(gè)值；而 SET 類型允許從一個(gè)集合中取得任意多個(gè)值。

ENUM 類型

ENUM 類型因?yàn)橹辉试S在集合中取得一個(gè)值，有點(diǎn)類似于單選項(xiàng)。在處理相互排拆的數(shù)據(jù)時(shí)容易讓人理解，比如人類的性別。ENUM 類型字段可以從集合中取得一個(gè)值或使用 null 值，

除此之外的輸入將會(huì)使 MySQL 在這個(gè)字段中插入一個(gè)空字符串。另外如果插入值的大小寫與集合中值的大小寫不匹配，MySQL 會(huì)自動(dòng)使用插入值的大小寫轉(zhuǎn)換成與集合中大小寫一致的值。

   ENUM 類型在系統(tǒng)內(nèi)部可以存儲(chǔ)為數(shù)字，并且從 1 開始用數(shù)字做索引。一個(gè) ENUM 類型最多可以包含 65536 個(gè)元素，其中一個(gè)元素被 MySQL 保留，用來存儲(chǔ)錯(cuò)誤信息，

這個(gè)錯(cuò)誤值用索引 0 或者一個(gè)空字符串表示。

MySQL 認(rèn)為 ENUM 類型集合中出現(xiàn)的值是合法輸入，除此之外其它任何輸入都將失敗。這說明通過搜索包含空字符串或?qū)?yīng)數(shù)字索引為 0 的行就可以很容易地找到錯(cuò)誤記錄的位置。

SET 類型

SET 類型與 ENUM 類型相似但不相同。SET 類型可以從預(yù)定義的集合中取得任意數(shù)量的值。并且與 ENUM 類型相同的是任何試圖在 SET 類型字段中插入非預(yù)定義的值都會(huì)使 

MySQL 插入一個(gè)空字符串。如果插入一個(gè)即有合法的元素又有非法的元素的記錄，MySQL 將會(huì)保留合法的元素，除去非法的元素。

一個(gè) SET 類型最多可以包含 64 項(xiàng)元素。在 SET 元素中值被存儲(chǔ)為一個(gè)分離的“位”序列，這些“位”表示與它相對(duì)應(yīng)的元素?！拔弧笔莿?chuàng)建有序元素集合的一種簡(jiǎn)單而有效的方式。

并且它還去除了重復(fù)的元素，所以 SET 類型中不可能包含兩個(gè)相同的元素。

希望從 SET 類型字段中找出非法的記錄只需查找包含空字符串或二進(jìn)制值為 0 的行。

通過對(duì)每種數(shù)據(jù)類型的用途，物理存儲(chǔ)，表示范圍等有一個(gè)概要的了解。這樣在面對(duì)具體應(yīng)用時(shí)，就可以根據(jù)相應(yīng)的特來來選擇合適的數(shù)據(jù)類型，使得我們能夠爭(zhēng)取在滿足應(yīng)用的基礎(chǔ)上，

用較小的存儲(chǔ)代價(jià)換來較高的數(shù)據(jù)庫(kù)性能。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：csdn    

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

以下是設(shè)計(jì)產(chǎn)品之前需要咨詢客戶的20個(gè)基本問題。希望通過這20個(gè)問題，在以后做產(chǎn)品設(shè)計(jì)對(duì)時(shí)候有一定的方向。 要想設(shè)計(jì)一個(gè)成功的產(chǎn)品，首先需要了解清楚客戶的需求。產(chǎn)品設(shè)計(jì)之前，通過正確地詢問客戶一些問題可以更順利地完成設(shè)計(jì)，避免不必要的返工。更容易獲得客戶對(duì)設(shè)計(jì)成果的肯定。時(shí)刻記?。罕M早建立融洽的關(guān)系，以及給于對(duì)方尊重對(duì)于合作至關(guān)重要。 以下是設(shè)計(jì)產(chǎn)品之前需要咨詢客戶的20個(gè)基本問題。這些問題不僅可以讓客戶覺得自己參與了設(shè)計(jì)過程，還可以幫助你快速清理項(xiàng)目背景，并按照正確的方向進(jìn)行設(shè)計(jì)。 一、建立共識(shí) 首先要讓客戶知道你非常在意他們這個(gè)設(shè)計(jì)項(xiàng)目。站在他們的角度，理解他們尋求設(shè)計(jì)解決方案的原因，并建立共識(shí)。詢問以下這些問題將幫助你了解他們所面臨的問題，并通過這些信息思考如何提供出最好的設(shè)計(jì)解決方案。 1. “這個(gè)產(chǎn)品背后的靈感是什么?” 從這個(gè)問題的回復(fù)中，你可以了解到客戶想做的是復(fù)制品還是與眾不同的新產(chǎn)品。探尋客戶項(xiàng)目背后的靈感可以讓你清晰地認(rèn)識(shí)到客戶想和你合作的原因，以及你應(yīng)該如何開始設(shè)計(jì)這個(gè)項(xiàng)目。 2. “你想要實(shí)現(xiàn)什么效果?” 根據(jù)客戶需要實(shí)現(xiàn)的效果設(shè)定分段目標(biāo)，這樣可以幫助你跟蹤項(xiàng)目進(jìn)度，自查設(shè)計(jì)是否符合效果。同時(shí)，當(dāng)你清楚不同時(shí)間段設(shè)計(jì)應(yīng)該完成到什么程度時(shí)，你就能合理安排時(shí)間來完善設(shè)計(jì)效果了。 3. “你的項(xiàng)目期望是什么?” 通過詢問這個(gè)問題，不僅會(huì)讓客戶覺得你是一位專業(yè)設(shè)計(jì)師；同時(shí)，也可以幫你杜絕一些不必要的麻煩。如果你了解“范圍蔓延”這個(gè)現(xiàn)象，那么你就知道在設(shè)計(jì)前關(guān)注這個(gè)問題是多么重要。 （“范圍蔓延”指項(xiàng)目范圍沒有很好的控制,項(xiàng)目工作范圍超出了項(xiàng)目立項(xiàng)時(shí)的范圍。） 二、了解客戶品牌 了解客戶的業(yè)務(wù)和品牌可以幫助你清楚他們的想法。當(dāng)你開始設(shè)計(jì)時(shí)，他們的一些想法和情感正是你在設(shè)計(jì)中需要參考的。因此，以下這些問題也是非常重要的。 4. “你們的立場(chǎng)是什么?” 這個(gè)問題可以幫助你了解驅(qū)動(dòng)客戶業(yè)務(wù)的核心價(jià)值觀。清楚客戶的立場(chǎng)有助于尊重他們的信仰，避免不必要的錯(cuò)誤。一些設(shè)計(jì)項(xiàng)目也可能包含文化或政治角度，這些價(jià)值觀可能需要成為設(shè)計(jì)的一個(gè)明確部分。 5. “貴公司的優(yōu)勢(shì)是什么?” 通過了解客戶的優(yōu)勢(shì)，有利于突出客戶獨(dú)特的賣點(diǎn)。你還可以通過這些信息來激發(fā)總體的設(shè)計(jì)思想。 6. “你的主要競(jìng)爭(zhēng)對(duì)手是誰?” 了解客戶的主要競(jìng)爭(zhēng)對(duì)手，可以幫助你了解客戶所在的行業(yè)。你會(huì)發(fā)現(xiàn)一些行業(yè)反復(fù)出現(xiàn)的元素和策略可能對(duì)你的設(shè)計(jì)項(xiàng)目有效，并有機(jī)會(huì)使其脫穎而出。 7. “你是否喜歡你們之前的品牌?” 請(qǐng)客戶提供之前的行銷材料，確保你的設(shè)計(jì)與他們現(xiàn)有的行銷材料相一致。如果客戶有過去的設(shè)計(jì)樣本，你可以從中提取有效內(nèi)容用于設(shè)計(jì)，尤其是當(dāng)接到重塑品牌的設(shè)計(jì)項(xiàng)目時(shí)。 三、定義受眾 設(shè)計(jì)前一定要了解客戶的受眾群體，從人口統(tǒng)計(jì)學(xué)(年齡、性別、民族等)和心理統(tǒng)計(jì)學(xué)(個(gè)性)兩方面了解受眾特征。 8. “你的目標(biāo)受眾是誰?” 從心理統(tǒng)計(jì)學(xué)開始分析，請(qǐng)客戶準(zhǔn)確地描述他們的理想受眾，包括他們會(huì)做什么，他們?cè)趺醋?，他們喜歡什么等等。當(dāng)你設(shè)計(jì)的時(shí)候，可以根據(jù)目標(biāo)受眾的特征使用一些元素來引起他們的思維共鳴。 9. “受眾是女性、男性還是中性?” 某些品牌可能會(huì)利用傳統(tǒng)的性別期望來吸引特定的受眾，你需要了解客戶目標(biāo)受眾的性別。如果客戶告訴你，他們受眾在性別上涉及比較廣泛；那么你可以在設(shè)計(jì)中加入更多的中性元素。 10. “產(chǎn)品針對(duì)的是哪個(gè)年齡段?” 在設(shè)計(jì)中你應(yīng)該知道，不同的年齡段對(duì)不同的事物有不同的期待和反應(yīng)。根據(jù)受眾的年齡段，你需要考慮如使用顏色、形狀、排版和風(fēng)格才能更符合他們的胃口。以及應(yīng)用這些元素是會(huì)產(chǎn)生共鳴還是會(huì)失敗? 11. “你的受眾在文化上有什么顧慮嗎?” 某些設(shè)計(jì)元素在其他文化中可能是不合適的或不被認(rèn)可的。通過提出這個(gè)問題可以避免踩雷，幫助你確保設(shè)計(jì)中的元素能被受眾群體所接受。 四、設(shè)定預(yù)期 有些客戶傾向于關(guān)注他們的需求，而忘記了產(chǎn)品的細(xì)節(jié)。如果你聽客戶說過類似這樣的話，“我想要一個(gè)獨(dú)特的、吸引用戶的設(shè)計(jì)，來展示我的產(chǎn)品有多酷，這樣我就可以增加銷量了?！蹦憔湍芡耆靼孜疫@句話的意思。 因此，設(shè)計(jì)之前需要通過問客戶一些問題來設(shè)定他們的期望。你可以贊揚(yáng)或“認(rèn)可”客戶的想法，也可以委婉地告訴他們這個(gè)計(jì)劃行不通。(例如“抱歉，我認(rèn)為我們不能把所有200名客人的名字都放在你們的請(qǐng)柬設(shè)計(jì)上。”) 12. “你想要什么樣的風(fēng)格?” 通過假設(shè)客戶可能是設(shè)計(jì)專家來確定他們?cè)谠O(shè)計(jì)美學(xué)方面的品味。但你不能這樣去問他們，“你想要包括等距插圖或一些不對(duì)稱的布局嗎?” 過于專業(yè)和生硬的問題可能讓人費(fèi)解。 你可以問得通俗一點(diǎn)，“你想要一個(gè)穩(wěn)重、干凈的產(chǎn)品外觀，還是更具挑戰(zhàn)性和動(dòng)態(tài)性的產(chǎn)品外觀?” 這個(gè)問題將幫助你盡快確認(rèn)產(chǎn)品風(fēng)格。 13. “你的設(shè)計(jì)需要哪些必備元素?” 確認(rèn)你的客戶是否有怪癖或獨(dú)特的要求。詢問這個(gè)問題可以確保不會(huì)忽略任何對(duì)設(shè)計(jì)至關(guān)重要的文本、圖像或主題。(PS：我之前有一個(gè)在時(shí)尚界工作的客戶，他就希望在設(shè)計(jì)中看到一些閃閃發(fā)光的東西。) 五、了解更多細(xì)節(jié) 通常情況下，客戶會(huì)將你的設(shè)計(jì)以印刷或數(shù)字影像的形式用于營(yíng)銷活動(dòng)、在線廣告、博客、出版等。因此，了解更多關(guān)于最終產(chǎn)品的細(xì)節(jié)信息，可以幫助指導(dǎo)你的設(shè)計(jì)。 14. “你會(huì)在哪里使用這個(gè)設(shè)計(jì)?” 請(qǐng)客戶告訴你成品的規(guī)格、位置和尺寸；并咨詢客戶將在哪里使用這個(gè)設(shè)計(jì)。了解這些信息后，對(duì)于打印或數(shù)字化，手持或大比例尺寸應(yīng)用應(yīng)該如何設(shè)計(jì)，你將會(huì)有不同的設(shè)計(jì)考慮因素。 15. “你將如何分配或使用產(chǎn)品?” 對(duì)于印刷設(shè)計(jì)，通過咨詢印刷規(guī)范來幫助你設(shè)計(jì)。根據(jù)生產(chǎn)技術(shù)，你可能需要限制你的顏色，或者也有可能需要在設(shè)計(jì)中添加更多的圖層。如果是數(shù)字化設(shè)計(jì)，你將需要準(zhǔn)備另外一種設(shè)計(jì)標(biāo)準(zhǔn)。 六、確認(rèn)合作模式 為了合作的順利進(jìn)行，一般需要先跟客戶溝通，了解他們希望如何合作。你也有機(jī)會(huì)表達(dá)你能為客戶做什么，不能做什么。最后，根據(jù)雙方的意見，設(shè)置合作模式。 16. “你更喜歡怎樣溝通?” 有些客戶更喜歡不斷地收到更新信息，而有些客戶則會(huì)給你時(shí)間“做自己的事”?！傲私饽銈兛蛻粝矚g的工作交流方式，將有助于你更專注于你的工作或預(yù)見干擾。通過這種方式，你可以安排設(shè)計(jì)任務(wù)并準(zhǔn)備更新信息提供給客戶。 17. “你愿意在這個(gè)項(xiàng)目上花多少錢?” 咨詢客戶的預(yù)算，同時(shí)也讓客戶清楚你的基本收費(fèi)是多少。如果每一次修訂都需要另外收費(fèi)，無論是按小時(shí)計(jì)算還是按修訂輪次收費(fèi)，請(qǐng)給出收費(fèi)標(biāo)準(zhǔn)。這樣可以避免最后結(jié)算時(shí)，產(chǎn)生不避免的糾紛。 18. “你想如何進(jìn)行設(shè)計(jì)反饋?” 根據(jù)這個(gè)問題來確定你更新設(shè)計(jì)版本和向客戶反饋的頻率。有些客戶喜歡和設(shè)計(jì)師來來回回地交流，也有些客戶喜歡采取不干涉的方式。咨詢并考慮好反饋方式，可以幫助你避免浪費(fèi)時(shí)間和精力。 19. “你需要什么文件和格式?” 這個(gè)問題讓客戶清楚地知道他們可以接收和處理的文件。再者，這也有助于你預(yù)測(cè)可以使用什么類型的設(shè)計(jì)資源（如字體和圖像）。 20.“這個(gè)設(shè)計(jì)需要什么時(shí)間交付?” 這個(gè)問題有助于確定你是否有足夠的時(shí)間來完成設(shè)計(jì)和其他任務(wù)。記得給自己預(yù)留一些修改的時(shí)間，因?yàn)樵O(shè)計(jì)中可能會(huì)遇到一些突發(fā)情況。 偉大的設(shè)計(jì)始于小小的問題 請(qǐng)記住，客戶需要的不只是有吸引力的設(shè)計(jì)。他們還希望有專業(yè)的建議、耐心和理解，外加一點(diǎn)關(guān)心和認(rèn)可。通過咨詢客戶正確的問題，建立共同點(diǎn)，了解他們的需求，你就可以更好地做出令客戶滿意的設(shè)計(jì)，提供對(duì)方一個(gè)愉快的合作體驗(yàn)，并可能在未來獲得再次合作的機(jī)會(huì)。 藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。                                                                分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。   藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

ui設(shè)計(jì)是一個(gè)高薪且行業(yè)前景非常好的工作，所以很多人都想要從事ui設(shè)計(jì)行業(yè)，但是其實(shí)大家對(duì)于ui設(shè)計(jì)的工作并不了解，下面我們跟隨小編一起來了解一下ui設(shè)計(jì)流程的相關(guān)資料吧。

ui設(shè)計(jì)流程

一、確認(rèn)目標(biāo)用戶

在UI設(shè)計(jì)過程中，需求設(shè)計(jì)角色會(huì)確定軟件的目標(biāo)用戶，獲取最終用戶和直接用戶的需求。用戶交互要考慮到目標(biāo)用戶的不同引起的交互設(shè)計(jì)重點(diǎn)的不同。不同類型的目標(biāo)用戶有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來源于其原有的針對(duì)現(xiàn)實(shí)的交互流程、已有軟件工具的交互流程。當(dāng)然還要在此基礎(chǔ)上通過調(diào)研分析找到用戶希望達(dá)到的交互效果，并且以流程確認(rèn)下來。

二、需求對(duì)接

確定需求之后，產(chǎn)品經(jīng)理會(huì)做具體的說明，讓交互、UI、開發(fā)、測(cè)試明確產(chǎn)品需求，明確項(xiàng)目的具體細(xì)節(jié)。這個(gè)階段里面是最關(guān)鍵的，涉及到需求與產(chǎn)品的對(duì)接。PRD文檔和線框原型圖一般情況都是在這個(gè)環(huán)節(jié)內(nèi)明確的。這里面需要注意的是：PRD文檔，線框原型圖出來了之后，設(shè)計(jì)師才開工，不然也是反復(fù)修改。

（圖片來自網(wǎng)絡(luò)）

三、提設(shè)計(jì)組內(nèi)部會(huì)議、界面風(fēng)格確定

這個(gè)時(shí)候需要確定一個(gè)設(shè)計(jì)負(fù)責(zé)人。設(shè)計(jì)負(fù)責(zé)人會(huì)給同事做具體的工作安排，線框圖標(biāo)、版式設(shè)計(jì)等都有具體的分配。后面就開始出稿，稿子出了之后，需要確定哪個(gè)UI設(shè)計(jì)風(fēng)格的效果更好。

判定結(jié)果的標(biāo)準(zhǔn)還是客戶的需求。重要的事情說三遍：需求、需求、需求!

四、一致性原則

分工已經(jīng)明確，進(jìn)行具體設(shè)計(jì)工作，進(jìn)行UI設(shè)計(jì)的過程中要達(dá)到以下幾個(gè)一致性原則：設(shè)計(jì)目標(biāo)一致、元素外觀一致、交互行為一致。

（圖片來自網(wǎng)絡(luò)）

五、可用性原則

接下來就是標(biāo)注圖、效果圖、切圖的制作，這個(gè)步驟，產(chǎn)品經(jīng)理會(huì)進(jìn)行把關(guān)。

可理解：軟件要為用戶使用，用戶必須可以理解軟件各元素對(duì)應(yīng)的功能。

可達(dá)到：用戶是交互的中心，交互元素對(duì)應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。

可控制：軟件的交互流程，用戶可以控制。功能的執(zhí)行流程，用戶可以控制。

六、開發(fā)完成，進(jìn)行最后的測(cè)試

測(cè)試工程師會(huì)對(duì)開發(fā)出來的產(chǎn)品進(jìn)行測(cè)試，看看有沒有疏漏，有沒有錯(cuò)誤，當(dāng)測(cè)試和調(diào)試完成，上線，就完成了整個(gè)開發(fā)的流程。

以上就是小編為你整理的ui設(shè)計(jì)流程的相關(guān)資料，相信一定可以幫助你在做UI設(shè)計(jì)的時(shí)候更合理的分配時(shí)間，讓你更高效的完成工作哦!

文章來源：FACEUI

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

一般調(diào)用axios接口都是這樣的格式。

this.$axios.post('api/xxxx/xxxxx', this.$qs.stringify({ username: 'qwerqw', password: '123456' })).then(res => { ... ... }).catch(error => { ... ... }) 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

這樣的格式要想獲取到返回值的話，就要將代碼都寫在then中，閱讀代碼的時(shí)候不是很清晰。于是網(wǎng)上各種搜，最后覺得這種方法能解決我的強(qiáng)迫癥。

login: async function() { // result的值就是res.data let result = await new Promise((resolve,reject) => { this.$axios.post('api/xxxx/xxxxx', this.$qs.stringify({ username: 'qwerqw', password: '123456' })).then(res => { resolve(res.data) }).catch(error => { console.log(error) }) }) ... ... } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

按照這種方式去獲取到后端的返回值，就可以將剩下的邏輯放在axios請(qǐng)求外面了。

我的理解是，axios是一種異步請(qǐng)求方法，需要用await關(guān)鍵詞修飾，等到獲取到返回值后再執(zhí)行后面的代碼。在使用await時(shí)，需要再function前添加async關(guān)鍵詞。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：csdn     作者：灰羊駝

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)