在視覺界面設(shè)計(jì)中，不同于藝術(shù)作品傳達(dá)的是設(shè)計(jì)者自身的情感和寄托，這里關(guān)注的重點(diǎn)是傳達(dá)的行為和信息，也就是目標(biāo)。而在視覺設(shè)計(jì)元素中，重點(diǎn)關(guān)注的有：

多出現(xiàn)于信息內(nèi)容頁面，用戶將絕大部分注意力集中在內(nèi)容信息本身上。當(dāng)信息不足或者展現(xiàn)形式上不符合自身要求，臨時(shí)調(diào)用工具對(duì)該頁面內(nèi)容進(jìn)行添加、編輯等操作。在臨時(shí)頁面停留時(shí)間短暫，只想快速操作后重新回到信息內(nèi)容本身上面。   

各種不同的穿戴設(shè)備

從簡(jiǎn)單的健康追蹤設(shè)備，到能夠與手機(jī)系統(tǒng)同步的功能齊全的手表，設(shè)計(jì)這些小屏幕界面時(shí)，有許多變種需要考慮。

部分原生控件上只存在風(fēng)格上的差異，對(duì)用戶無顯著影響。

Material Design 不會(huì)大興其道，更不可能逆襲（用 Material Design 設(shè)計(jì)的 App 在 iOS 上使用），iOS 的實(shí)用主義設(shè)計(jì)會(huì)顯著影響 Material Design。

桌面常見的交互形式也將更多影響移動(dòng)端，要支持 iPad Pro 這樣的生產(chǎn)級(jí)設(shè)備，iOS/Android 會(huì)為了兼容桌面場(chǎng)景作出優(yōu)化。

搜羅了 App 分類的過程中,發(fā)現(xiàn)較能體現(xiàn)數(shù)據(jù)應(yīng)用表達(dá)的,多數(shù)分布在:財(cái)務(wù)、 健康、醫(yī)療、商務(wù)、工具、效率這幾類;其中以財(cái)務(wù)、健康、商務(wù)類的應(yīng)用為最 廣泛,今天就枚舉這三大類的圖表應(yīng)用來和大家一起看看。

本文譯自蘋果官方人機(jī)界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由騰訊ISUX設(shè)計(jì)師翻譯整理，非發(fā)文者一人之作。譯文首發(fā)于ISUX博客，如在閱讀過程中發(fā)現(xiàn)錯(cuò)誤與疏漏之處，歡迎不吝指出。后續(xù)章節(jié)會(huì)陸續(xù)更新，敬請(qǐng)期待。

首先在確保用研對(duì)象是目標(biāo)用戶之后，用戶所提出的所有合理需求(不包括用戶提出我就是喜歡這個(gè)顏色這種)都是有活生生的使用場(chǎng)景支持的，肯定是用戶在使用過程中確實(shí)遇到了這樣的問題。很多時(shí)候用戶不會(huì)告訴你我遇到了什么問題，他們不會(huì)想展示他們蠢的一面，他們只會(huì)告訴你他們想要的解決方式，然而這個(gè)解決方式并不一定是合適的或者是具有片面性的。所以在分析需求的過程中我覺得有以下幾個(gè)比較重要的點(diǎn)。

我(原作者)的手機(jī)又震了。當(dāng)時(shí)我正在冰島的一個(gè)什么地方，離我的車有十多里地遠(yuǎn)，四下無人。我正拿著馬上就要沒電的手機(jī)查看著Google Maps。

“Spotify剛剛向Afternoon Acoustic歌單添加了兩首歌曲哦”，真是時(shí)候。一條來自Periscope的消息：“@kayvon和你分享了一段視頻…”，還有Mailbox的 兩封新郵件通知，Twitter上多了個(gè)follower，Slack里的一條消息，總共9條通知。當(dāng)你拿著一部電量只剩下2%的手機(jī)，被困在一個(gè)荒無人 煙、網(wǎng)絡(luò)連接十分不穩(wěn)定的地方時(shí)，當(dāng)你只想那見鬼的地圖能快些加載時(shí)，這些通知真的很是讓人欲哭無淚。

過去20年里，科技進(jìn)步的太多太多，但通知服務(wù)似乎還停留在上個(gè)世紀(jì)。

對(duì)任何信息進(jìn)行排布的時(shí)候，首先必須要掌握的是對(duì)齊/重復(fù)/親密/對(duì)比，貫穿設(shè)計(jì)的四大原則。

對(duì)齊除了能建立一種清晰精巧的外觀，還能方便開發(fā)的實(shí)現(xiàn)。基于從左上至右下的閱讀習(xí)慣，移動(dòng)端界面中內(nèi)容的排布通常使用左對(duì)齊和居中對(duì)齊，表單填寫的輸入項(xiàng)使用右對(duì)齊。

有一種“奇怪的”現(xiàn)象會(huì)經(jīng)常的看到“很多設(shè)計(jì)師沒有辦法清楚的跟其他人解釋他們是如何設(shè)計(jì)的，越細(xì)致的地方可能越是如此。比如，這個(gè)菜單的寬度為什么是200px？250px或者190px是否可以？圖片的尺寸為什么是278px*196px？如何確定網(wǎng)頁的寬度？“

軟件界面的設(shè)計(jì)師除了視覺本身以外，對(duì)于設(shè)計(jì)是否可以實(shí)現(xiàn)、大概以何種方式實(shí)現(xiàn)、規(guī)范可否被理解并且復(fù)制執(zhí)行、設(shè)計(jì)實(shí)現(xiàn)的性價(jià)比與時(shí)間比等緯度都應(yīng)有相當(dāng)高度的認(rèn)識(shí)。就像建筑設(shè)計(jì)師一樣，他們一定很了解建筑材料以及如何建筑，雖然他們不會(huì)去親自砌墻。:)

希望通過此文可以交流關(guān)于柵格化和盒子比例的設(shè)計(jì)方法。

柵格化

對(duì)于網(wǎng)頁的寬度，設(shè)計(jì)師之間基本上比較容易達(dá)成共識(shí)，比如：950px、960px、1000px、1190px、1200px。但是如果接下來讓 每一個(gè)設(shè)計(jì)師設(shè)計(jì)一個(gè)左右布局的版式，左邊是一個(gè)樹形菜單，右邊是主要內(nèi)容區(qū)域。那么可能會(huì)有很多結(jié)果。但是這些結(jié)果基本上是比較接近的。如果這些設(shè)計(jì)師 都服務(wù)于一個(gè)品牌下的話，這種情況并不是一個(gè)好的事情。會(huì)給人以沒有一致性的感覺。

圖1：一個(gè)產(chǎn)品站點(diǎn)，同樣是980px的頁面寬度，但是菜單寬度分別為：200px和245px