首頁

品牌基因法做圖標(升級篇)

用心設(shè)計

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


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

品牌基因法做圖標(升級篇)

24個容易忽略的APP設(shè)計細節(jié)

資深UI設(shè)計者

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

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

暑期干貨!2017年8月前端開發(fā)者超實用干貨大合集

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

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

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

MuzzleApp

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

Fractures

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

CSS DB

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

Preact

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

Pell

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

Markvis

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

Moment PHP

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

Tonik

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

Awesome Guidelines

這是一個包含了許多編程語言標準的列表,其中包含了C語言,JS,PHP,Ruby,甚至包括Visual Basic。這些標準能夠幫你的代碼保持簡潔、干凈。

BotUI

聊天機器人已經(jīng)逐漸成為主流。這款 JS 庫能夠幫你構(gòu)建對話式UI,這個庫比起傳統(tǒng)的“表單”體驗更加優(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è)計者不用擔心網(wǎng)站配置,只需要正常使用 Martinet 就能對網(wǎng)站進行調(diào)整。

Billboard

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

SVGI

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

TimeStrap

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

Slate

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

FontJoy

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

CoolHue

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

FrontPress

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

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

品牌基因法做圖標——實戰(zhàn)篇

用心設(shè)計

我們今天來聊的是一個真實的工作任務(wù),做任務(wù)的整個過程分為以下幾個階段:


1.收到任務(wù)

2.找參考

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

4.感覺沒有品牌性

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

6.再次執(zhí)行

7.棒棒噠


品牌基因法做圖標——實戰(zhàn)篇

需求分析:我走過最長的路,就是需求的套路

資深UI設(shè)計者

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

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

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

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

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

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

資深視覺詳解APP設(shè)計中的微妙細節(jié)

用心設(shè)計

寫在前面

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


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

資深視覺詳解APP設(shè)計中的微妙細節(jié)

內(nèi)容遷移到移動端時,用戶體驗優(yōu)化的7個關(guān)鍵點

資深UI設(shè)計者

好的設(shè)計往往需要好的內(nèi)容作為基礎(chǔ)支撐。無論是內(nèi)容還是設(shè)計,想要讓兩者最大化的搭配,往往是需要進行調(diào)整和優(yōu)化才行。

當你的內(nèi)容需要遷移到移動端上的時候,要怎么讓內(nèi)容和用戶體驗無縫地配合起來呢?設(shè)計師要基于小屏幕的交互來思考整個設(shè)計和優(yōu)化的策略,而今天的文章,就為你分享7個設(shè)計技巧。

1、每屏完成一項任務(wù)

超實用!體驗設(shè)計師如何自建知識體系?

資深UI設(shè)計者

為什么?

我們有這樣的焦慮,其實是因為我們對交互知識的整個體系無法預(yù)估(事實上設(shè)計的高度非標準性也令我們無法感知整個知識體系的邊界,事實上它本身也沒邊界),所以導(dǎo)致我們常常不夠安心。

事實上,知識學(xué)習本身就有一條學(xué)習曲線:剛開始是成長期,隨后就是平穩(wěn)期,然后就進入瓶頸期,需要學(xué)得更深,否則只會一直停滯。越到瓶頸期,越不知道要學(xué)什么。

字體設(shè)計的細節(jié)&形式感

用心設(shè)計



明明想法思路都對了,為什么最后呈現(xiàn)出的效果卻...略顯遺憾呢?字習時間的活動到七十多期了,其中發(fā)現(xiàn)很多作品想法思路是正確的,有些還很有意思,但整體視覺效果確一般,那為什么所想和所做會有如此差距?

所以有了本期要和大家聊的主題:字體設(shè)計的細節(jié)和形式感。本篇將會通過一些實例帶大家認識字體細節(jié)和形式感,所用大部分實例選自我課堂中的現(xiàn)場修改,時間短暫難免有瑕疵,望理解。

字體設(shè)計的細節(jié)&形式感

用品牌基因法做圖標設(shè)計,高級UI設(shè)計師才會的手法!(實戰(zhàn)篇)

資深UI設(shè)計者

1. 收到任務(wù)

我們每天都可能收到不同的設(shè)計任務(wù),作為設(shè)計師,順利的完成這些任務(wù)是我們最基本的能力,那我們今天要講的任務(wù)是什么呢?

嘿嘿!一套天氣圖標。

認真的構(gòu)思中…..

2. 找參考

算了,還是先看看別人都是怎么做的吧!

我找了一堆參考,隨機選幾個展示下,如下圖(圖片采集于花瓣網(wǎng)):

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔