線框模型

Before we start developing something, we need a plan about what we’re doing and what is the expected result from the project. Same as developing a website, we need to create a mockup before we start developing (coding) because it will cost so much if in the development the design changed frequently.

在開始開發某些東西之前，我們需要一個關于我們正在做的事情以及該項目的預期結果的計劃。 與開發網站相同，我們需要在開始開發(編碼)之前創建一個模型，因為如果在開發中頻繁更改設計，那么它將花費很多。

When creating the plan, we need to follow the procedure that needs to be done if we want it to be organized. Just like that, when we’re creating a mockup we can’t just directly designing the home page or another page, but we need a lower-level design which is the wireframe.

在創建計劃時，如果我們希望將其組織起來，則需要遵循需要執行的過程。 就像這樣，當我們創建模型時，我們不僅可以直接設計主頁或其他頁面，還需要線框這樣的低層設計。

sparxsystemssparxsystems的圖片

There’s plenty of application that providing the canvas for design the wireframe, one of the most popular is wireframe.cc.

有很多應用程序可以提供用于設計線框的畫布，其中最流行的一種是wireframe.cc 。

But for our project, we decided to create the wireframe based on a hard-copy or using a paper. Take a look at our first wireframe design below.

但是對于我們的項目，我們決定基于硬拷貝或使用紙來創建線框。 看看下面我們的第一個線框設計。

A wireframe that created on a paper在紙上創建的線框

After designing the wireframe and already sure about the placement, we can start developing the mockup. There’s also plenty of app or websites that provide tools for creating the mockup, like Figma, Sketch, and Adobe Xd. For developing our mockup we use Figma because of a few reasons which are Figma can be accessed using our browser (Adobe Xd need to be installed if we want to use it) or using their apps in any operation system (Sketch only can be used in Apple ecosystem).

設計完線框并確定布局后，我們可以開始開發模型。 也有很多應用程序或網站提供用于創建模型的工具，例如Figma，Sketch和Adobe Xd。 為了開發模型，我們使用Figma的原因有很多，可以使用我們的瀏覽器(如果要使用Adobe Xd，則必須安裝Adobe Xd)或在任何操作系統中使用它們的應用程序來訪問Figma(僅可在以下版本中使用Sketch)蘋果生態系統)。

Example of Figma projectFigma項目示例

When we creating the mockup, there are a few rules that we need to implement if we want to maintain the user experience, called Neilsen’s 10 Usability Heuristics that developed by Jakob Nielsen with Rolf Molich.

創建模型時，如果要維護用戶體驗，需要執行一些規則，這些規則稱為Jails Nielsen和Rolf Molich共同開發的Neilsen的10 Usability Heuristics。

Neilsen’s 10 Usability Heuristics, Image by uxdesign.ccNeilsen的10種可用性試探法，圖片由uxdesign.cc提供

尼爾森的10種可用性啟發式 (Nielsen’s 10 Usability Heuristic)

There are 10 rules that pointed out and I will try to explain it with the example of how our project group implementing it.

指出了10條規則，我將嘗試以我們的項目組如何實施的示例進行解釋。

系統狀態的可見性 (Visibility of system status)

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

系統應始終在合理的時間內通過適當的反饋使用戶知道發生了什么。

Our homepage is a dashboard where users can easily get as many as the information they wanted. We also provide the notification at the navigation bar just in case the user missing some important information. If there is something important shows up, the notification icon will be added with the red-dot in the top-right icon so the user will easily recognized the event.

我們的主頁是一個儀表板，用戶可以在其中輕松獲取所需的信息。 我們還在導航欄上提供了通知，以防用戶丟失某些重要信息。 如果出現重要的事情，通知圖標將在右上方的圖標中添加紅點，以便用戶輕松識別該事件。

Dashboard as the homepage儀表板作為主頁 Notification panel shows up when user click the icon on the navbar用戶單擊導航欄上的圖標時，將顯示通知面板

系統與現實世界之間的匹配 (Match between system and the real world)

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

系統應該使用用戶熟悉的單詞，短語和概念來講用戶的語言，而不是面向系統的術語。 遵循現實世界的慣例，使信息以自然和邏輯的順序出現。

We trying to use the icon to representing what actual the feature comparing to the real world. Take a look a the report icon, in the real world we will have the report by a bunch of paper and it’s already represented by the report icon (file icon). Another example is the notification, it represents by a bell because in the real world we will easily recognize the bell sound as a notification if there’s something happen.

我們試圖使用該圖標來表示與真實世界相比實際的功能。 看一下報告圖標，在現實世界中，我們將用一堆紙來獲得報告，并且該報告已經由報告圖標(文件圖標)表示。 另一個示例是通知，它由鈴鐺表示，因為在現實世界中，如果發生任何事情，我們很容易將鈴鐺聲音識別為通知。

Icon guideline that we use for this project我們用于此項目的圖標準則

用戶控制和自由 (User control and freedom)

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

用戶經常錯誤地選擇系統功能，并且需要明確標記的“緊急出口”以離開不需要的狀態，而無需進行長時間的對話。 支持撤消和重做。

User needs to know where they are and want quick access for undoing what they have done. As an example, if the user going to homepage and clicked the wrong button, it will be easier if on that page has the back button to go to the previous page. In our project, we trying to implement it in add member form in the setting page. To make user navigation easier, we provide the back button with the title of the previous page so the user will know what it will do if they pressed the button.

用戶需要知道他們在哪里，并希望快速訪問以撤消所做的工作。 例如，如果用戶轉到主頁并單擊了錯誤的按鈕，則在該頁面上具有返回按鈕可轉到上一頁會更容易。 在我們的項目中，我們嘗試在設置頁面中以添加成員的形式實現它。 為了使用戶導航更加容易，我們為后退按鈕提供了上一頁的標題，以便用戶知道按下按鈕后將執行的操作。

back button for going back to member list page返回按鈕，返回會員列表頁面

一致性和標準 (Consistency and standards)

Users should not have to wonder whether different words, situations, or actions mean the same thing.

用戶不必懷疑不同的詞語，情況或動作是否意味著同一件事。

For maintaining our consistency in design and implementation, we build the design guidelines first before we started the project. It helps us to save time or even made a component that can be reused by other components because we already have a big picture of the result before we start the development. Here’s our guidelines snapshot or for the full version and also the implementation, you can check it on my post “Stay Consistent, Stay In The Guideline” in my profile.

為了保持設計和實施的一致性，我們在開始項目之前首先構建設計準則。 它可以幫助我們節省時間甚至制作一個可以被其他組件重用的組件，因為在開始開發之前我們已經對結果有了一個全面的了解。 這是我們的準則快照或完整版本以及實現的快照，您可以在我的個人資料中的“保持一致，遵守準則 ”一文中進行檢查。

Snapshot of our design guideline我們設計指南的快照

錯誤預防 (Error prevention)

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

精心設計的系統甚至比良好的錯誤消息更好，它可以防止問題從一開始就發生。 消除容易出錯的條件，或者檢查條件，并在用戶執行操作之前向其提供確認選項。

We can prevent some errors to minimize the resource but it has to be as informative as possible so the user can know where is the error causes. The example of our implementation for this point is when the admin trying to add a new member to the setting page. The user will be given a form that all the field needed to be filled and if there’s some field that admin forgot to fill the field will be colored with red and shows the error message which is that field is needed to be filled.

我們可以防止一些錯誤以最大程度地減少資源，但是它必須盡可能多地提供信息，以便用戶可以知道錯誤的原因。 關于這一點，我們的實現示例是當管理員嘗試向設置頁面添加新成員時。 將為用戶提供一個表格，其中需要填寫所有字段，如果有一些管理員忘記填寫的字段將被涂成紅色，并顯示錯誤消息，那就是該字段需要填寫。

Error when there’s a field not filled yet當字段尚未填寫時發生錯誤

認可而不是回憶 (Recognition rather than recall)

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

通過使對象，操作和選項可見，最大程度地減少用戶的內存負載。 用戶不必記住從對話的一部分到另一部分的信息。 該系統的使用說明應適當可見或易于檢索。

Saving the state of user definitely will raise the user experience when using our product because they didn’t need to remember all the steps that they already have done. For our project, we implement this point by creating a setting page for change user accessibility for the data. If we click the edit button, it will show the list possible for the accessibility and will automatically save the data without reloading the page if the user clicks the save button.

保存用戶狀態無疑會提高使用我們產品時的用戶體驗，因為他們不需要記住他們已經完成的所有步驟。 對于我們的項目，我們通過創建一個設置頁面來實現這一點，以更改數據的用戶可訪問性。 如果單擊編輯按鈕，它將顯示可能的輔助功能列表，并且如果用戶單擊保存按鈕，則將自動保存數據而無需重新加載頁面。

Preview Mode預覽模式 Edit Mode編輯模式

使用的靈活性和效率 (Flexibility and efficiency of use)

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

新手用戶看不見的加速器通常可以加快專家用戶的交互速度，從而使系統可以同時滿足沒有經驗的用戶和有經驗的用戶。 允許用戶調整頻繁的操作。

In our project, we trying to give as many features as we can with the good interface so any kind of user can use the website. Take a look at our dashboard in the left and right columns. The right column will show the camera data selected from the left column if it’s checkbox is checked. It doesn’t need a request to server again because we already got all the data when processing the page for the first time and we just need to use some function to do the calculation on the component file. When the user hits the checkbox icon on the left column it will directly call a function to do the calculation and also updating the right column. It’s easier to understand by novice users or even expert users.

在我們的項目中，我們試圖通過良好的界面提供盡可能多的功能，以便任何類型的用戶都可以使用該網站。 看看我們在左側和右側欄中的信息中心。 如果選中此復選框，則右列將顯示從左列中選擇的攝像機數據。 它不需要再次請求服務器，因為在第一次處理頁面時我們已經獲得了所有數據，我們只需要使用一些函數就可以對組件文件進行計算。 當用戶單擊左列的復選框圖標時，它將直接調用函數進行計算并更新右列。 新手甚至專業用戶都更容易理解。

Dashboard with 2 selected camera on the left panel在左側面板上有2個選定攝像機的儀表板 Dashboard with 3 selected camera on the left panel在左側面板上有3個選定攝像機的儀表板

美學和簡約設計 (Aesthetic and minimalist design)

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

對話中不應包含無關緊要或很少需要的信息。 對話中每增加一個信息單元都會與相關信息單元競爭，從而降低其相對可見度。

We’re trying to keep the interface as simple as possible with still trying to maximizing the information given. The dashboard is full of information because we want to make user navigation easier to access all the information needed on one page but still we try to minimize the design or the text that doesn't necessarily. Another example for this point is the login page, where we just show a card containing a login form consist of email, password, and also login button. It’s simple, still consistent with the guidelines, and also easy to understand.

我們正在嘗試使界面盡可能簡單，同時仍在嘗試使給定的信息最大化。 儀表板中充滿了信息，因為我們希望使用戶導航更容易訪問一頁上所需的所有信息，但是我們仍然嘗試盡量減少不必要的設計或文本。 關于這一點的另一個示例是登錄頁面，我們僅顯示一張包含登錄表單的卡片，該表單包含電子郵件，密碼和登錄按鈕。 它很簡單，仍然符合準則，也很容易理解。

Login page登錄頁面

幫助用戶識別，診斷錯誤并從錯誤中恢復 (Help users recognize, diagnose, and recover from errors)

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

錯誤消息應使用簡單的語言(無代碼)表示，準確指示問題并建設性地提出解決方案。

With all the prevention before, there will be still an error that will be occurred after processed on the backend server. In this case, the error information is needed to pass to the user so they will know what kind of error happens and what caused the error. Take an example of our login system, if the user fills the email and password the frontend system will not detect any error, but after it sent a request to the backend server for authentication and the credential given is invalid, we will give the notification on the form so the user knows what happens and retrying to fills the email and password correctly.

通過前面的所有預防措施，在后端服務器上進行處理后仍然會出現錯誤。 在這種情況下，需要將錯誤信息傳遞給用戶，以便他們知道發生了哪種錯誤以及導致錯誤的原因。 以我們的登錄系統為例，如果用戶填寫了電子郵件和密碼，則前端系統將不會檢測到任何錯誤，但是在它向后端服務器發送請求進行身份驗證并且給定的憑據無效之后，我們將在表單，以便用戶知道會發生什么，然后嘗試正確填寫電子郵件和密碼。

Login page showing an error登錄頁面顯示錯誤

幫助和文檔 (Help and documentation)

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

即使可以在沒有文檔的情況下使用系統會更好，但可能仍需要提供幫助和文檔。 任何此類信息都應該易于搜索，著眼于用戶的任務，列出要執行的具體步驟，并且不要太大。

All the lists of what users can do or even a simple error handling are needed to be documented and can be easily accessed by the users. But until this point, we still not implement the FAQ page because our client has set the prioritize features that needed to complete first. But in the end, after all the features implemented well, I think FAQ is one of the most pages needed because it can guide our users to use our website properly.

用戶可以做的所有列表甚至是簡單的錯誤處理都需要記錄在案，并且用戶可以輕松訪問。 但是直到現在，我們仍然沒有實現FAQ頁面，因為我們的客戶已經設置了需要先完成的優先功能。 但是最后，在所有功能都實現好之后，我認為常見問題解答是所需的最多頁面之一，因為它可以指導我們的用戶正確使用我們的網站。

結論 (Conclusion)

It seems to be fun when creating the wireframe and mockup but actually there are many things to be considered when we chose a design. User experiences are important because who will be using our website are the user. We need to make it user-oriented for providing the best user experience but also still keep the design as the product branding.

創建線框和模型時，這似乎很有趣，但是實際上，當我們選擇一種設計時，要考慮很多事情。 用戶體驗很重要，因為將要使用我們網站的是用戶。 我們需要使其面向用戶，以提供最佳的用戶體驗，但同時仍要保持設計與產品的品牌相同。

翻譯自: https://medium.com/@aryodh/planning-before-doing-wireframe-and-mockup-43d8941565a2

線框模型

總結

以上是生活随笔為你收集整理的线框模型_进行计划之前：线框和模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。