Hà Nội Tìm hiểu Balsamiq Mockups trong lập trình Web

Thảo luận trong 'Quảng cáo tổng hợp' bắt đầu bởi nerudite, 17/12/15.

  1. nerudite

    nerudite New Member

    Balsamiq Mockups là gì?
    Balsamiq Mockups là một công cụ giúp các nhà phát triển để tạo wireframes và giao tiếp với khách hàng và đồng nghiệp với đại diện trực quan của phương án thiết kế của họ. Không giống như Codiqa, Balsamiq là ẩn phần mềm máy tính để bàn. May mắn thay, bạn có thể làm việc với nó bằng cách sử dụng hệ điều hành của bạn lựa chọn; nó chạy trên Mac, Windows, và Linux.

    Balsamiq có thể giúp bạn nhanh chóng cải tiến thiết kế trong thời gian thực, đề xuất một thiết kế mà là cố ý thô và độ trung thực thấp (với các yếu tố UI sơ sài và một phông chữ vẽ tay) để khuyến khích càng nhiều phản hồi nhất có thể. Công cụ này cung cấp nhiều cách để chia sẻ và thông tin phản hồi về các khái niệm thiết kế: mockups có thể được xuất khẩu sang PDF, và hình ảnh phổ biến PNG và cũng sao chép vào clipboard để bạn có thể gửi qua e-mail hoặc trong các định dạng tài liệu khác.

    Giống như Codiqa, Balsamiq có thể hỗ trợ bạn trong việc tạo ra các giao diện bằng cách kéo và thả các thành phần đơn giản; chương trình hỗ trợ 75 được xây dựng trong các thành phần giao diện người dùng và 187 biểu tượng, với sự bổ sung của một toàn bộ rất nhiều thành phần khác được tạo ra bởi cộng đồng. Balsamiq Mockups cũng có sẵn như là một plugin cho Google Drive, Confluence, JIRA, FogBugz, và Xwiki. Phiên bản thử nghiệm chỉ kéo dài bảy ngày, nhưng bạn có thể sử dụng nó với đầy đủ chức năng cho khoảng thời gian cả.

    Làm thế nào Balsamiq Mockups trình
    Khi bạn mở phần mềm, bạn sẽ tìm thấy một số chuyên mục chính sẽ giúp đỡ trong việc tạo ra các mockup thiết kế của bạn. Họ là mười hai loại trong tổng số. Việc đầu tiên, được gọi là Tất cả, như bạn có thể đoán, có chứa tất cả các yếu tố mà bạn có thể sử dụng trong công việc của bạn. Các hạng mục khác là: Big, Buttons, Common, Container, Forms, iPhone, Layout, Markup, Truyền thông, Tài sản Dự án, và văn bản.

    Hãy xem những gì chúng tôi có thể làm được bằng cách sử dụng các yếu tố của Balsamiq Mockups. Là bước đầu tiên, tôi đặt các hình dạng iPhone (đó là một trong những chỉ có sẵn, do đó, nó đại diện cho hồ sơ của tất cả các điện thoại thông minh hiện đại) và thiết lập kích thước của nó bằng cách sử dụng điều chỉnh nhẹ với con chuột. Bạn sẽ thấy rằng ở phía bên phải của hình ảnh là một hộp với tất cả các công cụ bạn cần phải chỉnh sửa các thành phần được chọn. Trong trường hợp hoc php này, bạn có thể chọn các định hướng của thiết bị, mô hình nền, nếu bạn muốn thanh toggle đầu có mặt, và không giới hạn.

    Bây giờ, chúng ta hãy làm việc vào phong cách của trang chính và xác định những yếu tố chúng ta muốn hiển thị trên trang chủ của thương hiệu mới của chúng tôi. Nói chung, chúng ta có thể tìm thấy một header, footer, một menu-danh sách, một hộp văn bản đối với một số nội dung, hình ảnh, hoặc một số liên kết, ví dụ. Cũng giống như trong Codiqa, chương trình cung cấp một đơn giản, trực quan hệ thống kéo và thả dễ dàng thêm tất cả mọi thứ bạn muốn với một vài cú nhấp chuột. ". Big" cho các thành phần đầu tiên của trang của chúng tôi, chúng ta phải mở các loại gọi là Ở đây, chúng ta sẽ tìm thấy những yếu tố yếu tố sau: Tiêu đề / tiêu đề, khu vực văn bản, và các hộp hình ảnh. Vì vậy, kéo và thả mỗi của các thành mockup của bạn. Tại thời điểm này, khái niệm thiết kế của bạn sẽ trông như thế này:
    [​IMG]

    >> Tham khảo khóa học lap trinh android tai ha noi
    Một khi bạn đã kéo và thả các yếu tố, bạn sẽ thấy rằng mỗi phần tử có các tùy chọn biên tập mở rộng. Khi bạn nhấp chuột vào tên / tiêu đề hoặc trên hộp văn bản, bạn sẽ thấy một trình soạn thảo văn điển hình, nơi bạn sẽ có thể để xác định các đặc tính hoặc nội dung. Bạn có thể sửa đổi các văn bản lựa chọn kích cỡ, sắp chữ, định dạng, và màu sắc. Bạn cũng có thể thiết lập màu nền, thiết lập màu sắc biên giới, thêm một thanh cuộn, và chơi với opacity và tập trung. Đối với hình ảnh, chúng ta có thể hiển thị hoặc ẩn một biên giới, cắt hình ảnh, siêu liên kết và hình ảnh được lựa chọn để dẫn đến một URL mới hoặc màn hình.

    Hãy xem cách chúng tôi có thể tạo ra một mockup cho trang cuối cùng của một trò chơi mà trong đó điểm số cuối cùng được hiển thị, biểu tượng được cung cấp để chia sẻ số điểm thông qua phương tiện truyền thông xã hội, và ba lựa chọn tiếp tục được trình bày: tiết kiệm, quay trở lại trang chủ, hoặc thoát khỏi trò chơi. Trước hết, chúng ta phải lặp lại hình dạng của điện thoại di động của chúng tôi. Sau đó, kéo và thả ba nút nhỏ hình chữ nhật từ các "Nút" thể loại (hình đầu tiên từ trái sang). Sau đó, kéo và thả một biểu tượng và sau đó sao chép nó bốn lần (tôi đã quyết định để chèn các biểu tượng đại diện cho Facebook, Twitter, Google+, và Delicious). Lặp lại quá trình này cho ba biểu tượng còn lại để kết thúc thanh xã hội của chúng tôi.

    Cuối cùng. chúng ta hãy sửa nút của chúng tôi. Thay đổi chức danh của họ để "tiết kiệm", "trò chơi mới", và "Exit". Thêm một liên kết cho mỗi trang để đến đích mong muốn của họ, và thay đổi màu sắc, phông chữ và biểu tượng cho phù hợp với phong cách của bạn. Tại thời điểm này, công việc của chúng ta sẽ giống như sau:

    [​IMG]

    Chúng ta hãy làm một ví dụ khác, hãy tưởng tượng rằng bạn muốn tạo các mockup của một cuộc khảo sát. Chúng tôi sẽ sử dụng các "nút radio nhóm" từ "Tất cả" thể loại. Vì tất cả những yếu tố hình thức, bạn có thể thay đổi màu sắc, kích thước, kiểu dáng và siêu liên kết có liên quan. Xem bên dưới để biết rõ hơn về các tùy chọn yếu tố hình thức mạnh mẽ.

    [​IMG]

    Bạn có thể nhanh chóng xây dựng bất cứ điều gì bạn muốn trên wireframes Balsamiq. Bạn sẽ khám phá ra nhiều thành phần khác mà bạn có thể thêm vào mockup của bạn, chẳng hạn như danh sách, các thanh menu, thanh tiến độ, accordions, lịch, bảng xếp hạng, hộp kiểm tra, datagrids, bảng, thanh cuộn, hộp thoại, và như vậy.

    Sự khác nhau giữa Codiqa và Balsamiq Mockups
    So với Codiqa, Balsamiq có một khu vực làm việc rộng rãi hơn cho phép người dùng làm việc trên các trang khác nhau cùng một lúc (Codiqa không, và nó hạn chế khả năng của bạn để hình dung ứng dụng đầy đủ của bạn). Balsamiq cũng cung cấp một số lượng lớn các yếu tố thiết kế, do đó khả năng không giới hạn cho các thành phần phổ biến nhất của các trang web. Cả hai Codiqa và Balsamiq là khá dễ dàng để sử dụng. Hai ứng dụng thậm chí có thể được sử dụng bởi khách hàng để giúp họ minh họa cho ý tưởng của họ.

    Lời kết
    Chúng tôi đã nhìn thấy cách dễ dàng và trực quan Mockups Balsamiq là, và nhanh như thế nào chúng ta có thể tạo ra một mockup sử dụng phần mềm này. Bạn có thể sử dụng những mockups là điểm khởi đầu cho việc tạo ra các cấu trúc và đồ họa của các ứng dụng di động của bạn, và bạn cũng có thể sử dụng chúng để giúp bạn vượt qua những khó khăn giai đoạn chính khách hàng của bất kỳ dự án điện thoại di động. Sửa đổi là luôn luôn chỉ cần một vài cú nhấp chuột đơn giản, và thay đổi mockup của bạn là dễ dàng hơn nhiều so với việc thay đổi một ứng dụng điện thoại di động đầy đủ-xây dựng.
    Xem thêm khóa học photoshop tại hà nội
     

Chia sẻ trang này

Đang tải...