2016年3月，阿里巴巴中國零售交易市場(chǎng)2016財(cái)年商品交易即時(shí)總額即將突破三萬億，這是阿里歷史性的一刻，也見證了消費(fèi)的力量， 為了記錄這一歷史時(shí)刻，三萬億大屏項(xiàng)目應(yīng)運(yùn)而生。這是阿里UED的一些文章。

城市大屏

在技術(shù)上，所有的媒體大屏都是基于web端技術(shù)實(shí)現(xiàn)的，這樣的選擇是因?yàn)閿?shù)據(jù)大屏幕只是數(shù)據(jù)可視化在我們?nèi)粘９ぷ髦械囊粋€(gè)運(yùn)用場(chǎng)景，我們需要能讓數(shù)據(jù)可視化的技術(shù)能在日常工作中得到最廣泛的落地運(yùn)用，web端當(dāng)然就是我們的主戰(zhàn)場(chǎng)。當(dāng)然。拋開這一點(diǎn)，我們認(rèn)為web端的相關(guān)技術(shù)也是大家落地相關(guān)數(shù)據(jù)可視化開發(fā)的良好平臺(tái)，為什么這么說呢？這基于以下幾點(diǎn)：功能全，前端技術(shù)svg，canvas，webgl三者的相互補(bǔ)充，已經(jīng)讓我們?cè)诮换ィ?D&3D以及大規(guī)模數(shù)據(jù)量繪制有了充足的發(fā)揮空間，其次我們團(tuán)隊(duì)在以前開發(fā)數(shù)據(jù)產(chǎn)品的過程中已經(jīng)用Nodejs建立了良好的中間件來連接各種數(shù)據(jù)源，這讓目前接入各種數(shù)據(jù)庫變得非常便捷。最后就是便于分享，在任何硬件設(shè)備上只要打開瀏覽器就能看到最終的數(shù)據(jù)可視化作品，在當(dāng)今這個(gè)注重信息分享的時(shí)代，這一點(diǎn)非常關(guān)鍵。

一個(gè)完整的后臺(tái)，由菜單/導(dǎo)航、數(shù)據(jù)/圖形展示、表格、表單、控件/組件以及彈窗等構(gòu)成，下面跟大家分享后臺(tái)中的表格和表單的設(shè)計(jì)細(xì)節(jié)。

當(dāng)接到一個(gè)全新的網(wǎng)頁后臺(tái)項(xiàng)目時(shí)，首先確定設(shè)計(jì)風(fēng)格，然后考慮這個(gè)后臺(tái)尺寸是做居中固定式，還是全屏響應(yīng)式。全屏響應(yīng)式的網(wǎng)頁設(shè)計(jì)，除非有規(guī)定，否則你可以選擇任意主流尺寸作為基尺寸來設(shè)計(jì)網(wǎng)頁。當(dāng)然，不管選擇什么尺寸，都得基于做好一個(gè)后臺(tái)而開展工作。

照搬他人的模式要比創(chuàng)造新的東西容易。做大家都知道如何去做的事，只會(huì)使世界發(fā)生從1到N的改變，增添許多類似的東西。但是每次我們創(chuàng)造新事物的時(shí)候，會(huì)使世界發(fā)生從0到1的改變。                     

  —— Peter Thiel,Blake Masters《從0到1：開啟商業(yè)與未來的秘密》

移動(dòng)端產(chǎn)品最難的地方就是在很小的屏幕上展示出你所有的業(yè)務(wù)。因?yàn)橛辛似聊坏南拗疲由弦苿?dòng)端的客戶碎片化閱讀的習(xí)慣和高流失率。所以業(yè)務(wù)復(fù)雜的App是設(shè)計(jì)難度較高的。電商就是這種類型的App，既要保證首頁業(yè)務(wù)展示完整性，又要保證用戶體驗(yàn)滿意度，每一個(gè)頁面設(shè)計(jì)都要考慮一些技巧和思考維度，非?？简?yàn)設(shè)計(jì)師的設(shè)計(jì)功力。所以電商類App是要展示內(nèi)容最多也是最難做的一類App。所以我們以電商為例來分析首頁設(shè)計(jì)。

圖標(biāo)設(shè)計(jì)如何具有品牌性？這可能是設(shè)計(jì)師工作中經(jīng)常會(huì)遇到的問題。

但很多新人也許并不了解什么是品牌性，更不知道如何將品牌性融入到圖標(biāo)當(dāng)中，不過沒關(guān)系，看了這篇文章你就不會(huì)那么困惑了！

隨著移動(dòng)優(yōu)先的趨勢(shì)，APP的設(shè)計(jì)也越來越受到公司重視，不斷地提高APP的設(shè)計(jì)質(zhì)量是每個(gè)設(shè)計(jì)師的追求，有哪些設(shè)計(jì)中的細(xì)節(jié)被你忽略了呢？讓我們一起來看看這些細(xì)節(jié)你都把握住了嗎。

視覺表現(xiàn)型問題

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在過去的幾年當(dāng)中，網(wǎng)絡(luò)上所流傳的各種設(shè)計(jì)和開發(fā)資源，在素質(zhì)上有明顯的提升。其中有一些已經(jīng)幾乎成為了設(shè)計(jì)師和開發(fā)者必備的工具，但是其中絕大多數(shù)由于其應(yīng)用范疇的局限，或者傳播不夠廣，導(dǎo)致它們大多并廣為人知。將這些素材集中到一起，很大程度上是希望它們的目標(biāo)用戶能夠明白，需要這些工具的時(shí)候，上哪兒找。

這次的前端干貨合集內(nèi)容也很齊全，仔細(xì)看看，總能找到幾款你所需要的。

MuzzleApp

Muzzle 是之前 CodeKit 的開發(fā)者的新產(chǎn)品，是一款應(yīng)用在macOS 平臺(tái)的應(yīng)用，當(dāng)你和別人共享屏幕的時(shí)候，它可以幫你關(guān)閉通知和其他的私密信息，避免尷尬。無論你共享屏幕時(shí)候的平臺(tái)是Skype、Google Hangouts 還是 Slack，它都能讓macOS 進(jìn)入“免打擾”模式。

Fractures

Fractures 是一個(gè)CSS類 合集，可以幫你快速創(chuàng)建網(wǎng)頁原型。Fractures 是基于原子設(shè)計(jì)模式來構(gòu)建的，樣式表被分割為小段。

CSS DB

CSS DB 能為你列舉出還在不斷開發(fā)中的CSS特性列表以及目前的狀態(tài)，讓你可以更好地使用CSS選擇器。

Preact

Apache 最近宣布禁止將 BSD+專利許可證分發(fā)給 ReactJS 和類似的項(xiàng)目，如果你的產(chǎn)品受到類似的專利許可證的影響，可以考慮 Preact 這樣的 ReactJS替代品。

Pell

Pell 是一款用來構(gòu)建所見即所得編輯器的JavaScript 庫，默認(rèn)情況下，它會(huì)帶有常見的富文本編輯器的按鈕。Pell 是使用ES6來構(gòu)建，它不會(huì)像jQuery 那樣需要大量的依賴庫，體積小巧，可維護(hù)性強(qiáng)，還兼容 IE9。

Markvis

Markdown 在語法和功能上是有限制的，而Markvis 在它的基礎(chǔ)上增加了圖表的功能。

Moment PHP

Moment 是一款 PHP 庫，用來處理日期和時(shí)間，類似于 Moment.js 之于 JavaScript。這個(gè)庫的使用也很簡(jiǎn)單，可以快速設(shè)置時(shí)區(qū)、時(shí)間和顯示方式。

Tonik

這是一款使用現(xiàn)代PHP來構(gòu)建的Wordpress 新手主題，它充分利用了命名空間，自定義模板，自動(dòng)加載器，WebPack 以及一大堆現(xiàn)代Web開發(fā)的優(yōu)點(diǎn)。

Awesome Guidelines

這是一個(gè)包含了許多編程語言標(biāo)準(zhǔn)的列表，其中包含了C語言，JS，PHP，Ruby，甚至包括Visual Basic。這些標(biāo)準(zhǔn)能夠幫你的代碼保持簡(jiǎn)潔、干凈。

BotUI

聊天機(jī)器人已經(jīng)逐漸成為主流。這款 JS 庫能夠幫你構(gòu)建對(duì)話式UI，這個(gè)庫比起傳統(tǒng)的“表單”體驗(yàn)更加優(yōu)秀。

Reaction Commerce

開源的內(nèi)容管理系統(tǒng)這些年變化并不大，其中絕大多數(shù)都是基于PHP來構(gòu)建的。

TinyReset

這是一款非常小巧的 CSS resetter，它可以作為 Eric Meyer 所創(chuàng)建的reset.css的替代品。

Martinet

Martinet 是一款用來構(gòu)建靜態(tài)網(wǎng)站的命令行工具，其中包含了諸如 Webpack、TypeScript、Pug for templating、LESS和 NPM 這樣的現(xiàn)代工具。它的存在讓設(shè)計(jì)者不用擔(dān)心網(wǎng)站配置，只需要正常使用 Martinet 就能對(duì)網(wǎng)站進(jìn)行調(diào)整。

Billboard

BillboardJS 是一款基于 D3.js 來構(gòu)建的交互式數(shù)據(jù)可視化數(shù)據(jù)庫工具，它可以用來創(chuàng)建可視化的柱狀圖，餅圖，折線圖等。

SVGI

SVGI 是一款用來查找SVG元素和文件的命令行工具，安裝它之后，你可以采用svgi 命令來檢索 SVG 文檔的大小、元素、層次結(jié)構(gòu)和節(jié)點(diǎn)列表。

TimeStrap

TimeStrap 是另外一個(gè)非常實(shí)用的開源平臺(tái)，它可以像 WordPress 一樣可以在任何地方運(yùn)行和訪問的發(fā)票系統(tǒng)。對(duì)于喜歡自己控制而不希望使用外部服務(wù)來管理發(fā)票的用戶而言，這是一個(gè)很好的選擇。

Slate

Slate 是一款為API 文檔創(chuàng)建靜態(tài)網(wǎng)頁的工具，諸如 WooCommerce、Travis-、CoinBase甚至 NASA 都采用了這一工具。

FontJoy

FontJoy 是一款能夠生成大量有效字體組合的工具，點(diǎn)擊“Generate”按鈕就能生成許多新的字體組合。有趣的地方在于，這款工具還有具備深度學(xué)習(xí)的功能。

CoolHue

毫無疑問漸變色再一次回歸主流，而CoolHue 是另外一款非常優(yōu)秀的漸變色生成工具。

FrontPress

FrontPress 是一款前端框架，可用來控制 WP-API 和 AngularJS。如果你想創(chuàng)建一款用于 WordPress 的內(nèi)容管理系統(tǒng)，可以從 FrontPress 著手。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)

我們今天來聊的是一個(gè)真實(shí)的工作任務(wù)，做任務(wù)的整個(gè)過程分為以下幾個(gè)階段：

1.收到任務(wù)

2.找參考

3.根據(jù)參考執(zhí)行

4.感覺沒有品牌性

5.根據(jù)品牌基因法提取基因

6.再次執(zhí)行

7.棒棒噠

作為一名產(chǎn)品經(jīng)理，有幸逃過UI “五彩斑斕的黑”這樣的千古難題，也不像開發(fā)一樣面臨“什么是最好的語言”這樣的靈魂拷問，但世事無完美，不信抬頭看，蒼天饒過誰。

需求，正是這樣的終極存在，他是產(chǎn)品經(jīng)理存在的意義，也是眾多套路的根源。無論是文能提筆寫文檔、武能調(diào)試查異常的老司機(jī)，還是熟讀《夢(mèng)的解析》、倒背需求層次論的學(xué)院派，和需求打交道的日子也難免“被套路”。

面對(duì)千變?nèi)f化的需求，也許很難抽象出一套普適的方法論，不妨一起來看看需求分析過程中的那些常見套路，或許能有一些值得借鑒和思考。

1. 披著需求外衣的解決方案

從交互細(xì)節(jié)優(yōu)化到業(yè)務(wù)流程調(diào)整，我們總會(huì)遇到這樣一些需求：描述簡(jiǎn)單明了、細(xì)節(jié)清晰，幾乎稍作整理就可以形成PRD、開發(fā)實(shí)施：

• “輸入框需要加長(zhǎng)一點(diǎn)，保證輸入內(nèi)容完整可見”
• “工單需要支持批量分配，勾選后自動(dòng)顯示可分配對(duì)象列表”
• “用戶注冊(cè)推送新手任務(wù)提醒，引導(dǎo)完善資料，必填項(xiàng)有XXX……”