আমি কীভাবে লো-ফাই (অ-ইন্টারেক্টিভ) ইউআই প্রোটোটাইপ তৈরি করব?


10

আংশিকভাবে প্রয়োজনীয়তা সংগ্রহ করতে এবং আংশিকভাবে চূড়ান্ত ইউআই ডিজাইনের জন্য আমি কয়েকটি বেসিক প্রোটোটাইপ একসাথে ছুঁড়ে ফেলার কাজ করছি।

এই মুহুর্তে আমি পোস্ট-ইট নোটগুলি ব্যবহার করে, তথ্যের জন্য হলুদ নোট এবং ক্রিয়াগুলির জন্য গোলাপী (বোতাম বা মেনু) ব্যবহার করে পর্দা তৈরির চেষ্টা করছি। ধারণাটি হ'ল আপনি সহজেই সরানো, অপসারণ এবং তথ্য যুক্ত করতে পারেন। তবে আমি নিশ্চিত যে আরও কার্যকর পদ্ধতি আছে।

বিকাশকারীদের দক্ষতার সাথে ইন্টারঅ্যাক্টিভ ইউআই প্রোটোটাইপগুলি তৈরি করার প্রস্তাবিত উপায় কী?

এবং কেন?


আমি কিছু কলম, কাগজ এবং পোস্ট-নোট সংস্করণ দিয়ে চেষ্টা করেছি এবং তারা সীসা বেলুনের মতো নেমে গেছে (সম্ভবত আমার আঁকার দক্ষতা)। শেষ পর্যন্ত আমি বালামামিক ব্যবহার করেছি , যা এখন পর্যন্ত বেশিরভাগ ব্যবহারকারী পছন্দ করেছেন এবং তারা এটি পেয়েছেন প্রোটোটাইপ। হায় আফসোস, কিছু লোক এখনও এই ধারণা নিয়ে সমস্যায় আছে যে প্রথমে কিছু লো-ফাই প্রোটোটাইপের মাধ্যমে অ্যাপ্লিকেশনটি কী করা উচিত এবং একটি ধারণা করার আগে সত্যই "পর্দায় কিছু দেখতে" চায় তার ধারণা পাওয়া উচিত।


1
"হায় আফসোস, কিছু লোকের এখনও এই ধারণার সাথে সমস্যা রয়েছে যে প্রথমে অ্যাপ্লিকেশনটি কী করা উচিত সে সম্পর্কে ধারণা নেওয়া উচিত" - আসলে একটি ডায়ালগ সম্পাদক একটি ইউজার ইন্টারফেসের প্রোটোটাইপের দ্রুততম উপায় হতে পারে। এটি সর্বদা আদর্শ নয়, তবে যতক্ষণ আপনি প্রথম কয়েকটি সংস্করণ ফেলে দিতে ইচ্ছুক থাকেন এবং আপনার গ্রাহক জানেন যে স্ক্রিন লেআউটটির অর্থ এই নয় যে আপনি 99% সম্পন্ন করেছেন ...
স্টিভ 314

1
হাই @ এমএমকে, আমি দেখতে পেয়েছি যে আপনার প্রশ্নটি বন্ধ হয়ে গেছে কারণ এটি একটি সমীক্ষা, তাই আমি কীভাবে একটি দক্ষ এসই প্রশ্নে প্রত্যেকে তাদের প্রোটোটাইপিং কীভাবে দক্ষতার সাথে ইন্টারঅ্যাক্টিভ ইউআইগুলি করতে হয় তা সম্পর্কে জিজ্ঞাসা করে এটিকে পরিবর্তন করার জন্য আমি প্রশ্নটিতে একটি সম্পাদনা করেছি asking । যদি আমি এটিকে খুব বেশি পরিবর্তন করেছি তবে নির্দ্বিধায় এটিকে আরও সম্পাদনা করুন বা পরিবর্তনগুলি আবার রোল করুন। আমি এটি পুনরায় খুলতে ভোট দিয়েছি, তবে পুনরায় খোলা পেতে সম্প্রদায়ের আরও কিছু ভোট প্রয়োজন :)
রাচেল

উত্তর:


14

আমি একটি হোয়াইটবোর্ড পছন্দ করি

আপনি পুরো বিষয়টিকে পুনরায় অঙ্কন না করে সিদ্ধান্ত নেওয়ার সাথে সাথে এটি পরিবর্তন করা সহজ করে তোলে। অন্যান্য (কাছাকাছি) বিকাশকারীদের সাথে ভাগ করে নেওয়া সহজ। স্টিকি-নোট বা অন্যান্য রঙ ব্যবহার করে টিকাকর্ষণ করা সহজ।


1
+1 টি। দুটি (বা আরও বেশি !!) মার্কার রঙ পান (এবং তারপরে ঝুলতে চেষ্টা করুন)। আপনি যখন আলোচনায় গিয়ারগুলি স্যুইচ করেন (যখন আপনি উইজেটগুলি কোথায় যেতে হবে সে সম্পর্কে কথা বলার থেকে স্যুইচ করার সময়, কীভাবে তাদের ইন্টারঅ্যাক্ট করা উচিত, রঙ পরিবর্তন করতে হবে সে সম্পর্কে কথা বলতে) them এগুলি তাজা রাখুন, যাতে লোকেরা আসলে পড়তে পারে।
মাইক ক্লার্ক

+1 পাশাপাশি, এটি বালামামিকের মতো প্রায় অভিনব বলে মনে হচ্ছে না, তবে স্বাধীনতা এটির চেয়ে বেশি makes কোনও উইজেট অনুসন্ধান করছে না বা সেই প্রোগ্রামটি যা পেয়েছে তাতে সীমাবদ্ধ নেই।
ইজকাটা

7

বালসামিক মকআপগুলি সাধারণত কলের প্রথম বন্দর হয়, প্রায় পেন এবং কাগজ ব্যবহার করার মতো দ্রুত এবং পুনরায় ব্যবহারযোগ্য।

প্লাস আপনি সংযোগের উদাহরণস্বরূপ পৃষ্ঠাগুলি লিঙ্ক করে যদি আপনি কিছুটা ইন্টারঅ্যাক্টিভিটি যুক্ত করতে পারেন।

http://balsamiq.com/


5

পেন্সিল প্রকল্পটি একটি ফায়ারফক্স অ্যাডিন যা দুর্দান্ত এবং সাধারণ মকআপগুলি করে।

ডেস্কটপ থেকে মোবাইল প্ল্যাটফর্ম পর্যন্ত বিভিন্ন ধরণের ইউজার ইন্টারফেস আঁকার জন্য পেন্সিল বিভিন্ন অন্তর্নির্মিত আকারের সংগ্রহ সরবরাহ করে। ২.০.২ থেকে শুরু করে পেনসিলটি অ্যান্ড্রয়েড এবং আইওএস ইউআই স্টেনসিলগুলি প্রি ইনস্টলড দিয়ে প্রেরণ করা হয়। এটি একটি সাধারণ ইনস্টলেশন সহ অ্যাপ্লিকেশনগুলির প্রোটাইপিং শুরু করা আরও সহজ করে তোলে।

অঙ্কন কার্যক্রম সহজ করার জন্য পেন্সিলে জনপ্রিয় অঙ্কন বৈশিষ্ট্যগুলিও প্রয়োগ করা হয়েছে ...


5

আমি এমএস পেইন্ট এবং ভিজ্যুয়াল স্টুডিওর সংমিশ্রণটি ব্যবহার করি। আমি ফর্মের মধ্যে থাকা সমস্ত কন্ট্রোলগুলিকে টেনে আনতে / ছাড়তে আমি ভিএস ব্যবহার করি, তারপরে এটির মতো সাজানো না হওয়া পর্যন্ত এগুলি পুনরায় সাজানোর জন্য এটিকে এমএস পেইন্টে স্ক্রিনশট করুন।

এইভাবে আমি আমার ইউআইটিকে উপহাস করার জন্য সহজ, পরিচিত, নিখরচায় এবং সর্বদা অ্যাক্সেসযোগ্য সরঞ্জামগুলি (আমার জন্য) ব্যবহার করতে পারি এবং ক্লায়েন্টটি ইউআই দেখতে পাবে কারণ অ্যাপ্লিকেশন শেষ হয়ে গেলে সম্ভবত এটি দেখতে পাবেন। এছাড়াও, প্রায়শই ভিএস আমার জন্য আমার প্রকল্পের সূচনা সমাপ্ত করে containing

সম্পাদনা: টবির উত্তর আমাকে বালাসামিকের দিকে নিয়ে যায় , এবং ইউআই মকআপগুলি অন্য লোকের কাছে উপস্থাপনের জন্য এটি এখন আমার পছন্দসই প্রাথমিক সরঞ্জাম।

আমি এখনও উপলক্ষে এমস্পেন্ট বা পেন / কাগজ টানছি, তবে এটি সাধারণত তখনই হয় যখন আমি আমার নিজস্ব রেফারেন্সের জন্য বেসিক ইউআই ডিজাইনটি স্কেচ করি বা আমি ক্লায়েন্টকে একটি সম্পূর্ণ পর্দার জন্য দুটি বিকল্প সহ উপস্থাপন করতে চাই (প্রাক্তন। "আপনি কি এখানে বা এখানে বোতামগুলি চান? " )


2

দেখে মনে হচ্ছে আপনি ভাল পদ্ধতি ব্যবহার করছেন তবে আপনি দ্রুত প্রতিরোধের ইউটিলিটি গ্রহণ করার কারণে আপনি প্রতিরোধের দিকে চলে যাচ্ছেন। প্রত্যেকে কোড করতে পছন্দ করে, তবে যদি আধ ঘন্টা পরে তারা এখনও জেএসক্রলবার্সের সাথে লড়াই করে এবং আপনি 12 টি মকআপ তৈরি করেছেন তারা বুঝতে পারে যে এই সরঞ্জামগুলির শক্তি দ্রুত পুনরাবৃত্তিতে রয়েছে

বলা হচ্ছে, বিভিন্ন লো-ফাই পদ্ধতির বিভিন্ন শক্তি রয়েছে:

  • হোয়াইটবোর্ড প্রোটোটাইপিং দরকারী কারণ যে কেউ অংশ নিতে পারে এবং এটি গ্রাউন্ড আইডিয়াগুলিতে সহায়তা করে তবে এটি কেবল একটি আলোচনার সরঞ্জাম। আপনি যদি কোনও ডিজাইনের পুনরাবৃত্তি করতে যাচ্ছেন তবে এক ধাপ এগিয়ে আরও কিছু চান, কেবল যদি তাই পুরানো চিহ্নিতকারীটিকে মুছতে অসুবিধা হয়। ;)

  • কাগজ প্রোটোটাইপিং দরকারী কারণ লোকেরা বুঝতে পারে এটি স্থায়ী এবং পরিবর্তনের জন্য উন্মুক্ত, এবং আপনি দ্রুত পুনরাবৃত্তি করতে পারেন এবং আপনি এখনও খুব ভাল ফলাফল পেতে পারেন। কাগজের প্রোটোটাইপে কিছু ব্যবহারকারীর সাথে ব্যবহারযোগ্যতা পরীক্ষা করুন এবং আপনি খুব কম দামে খুব দ্রুত ডিজাইনের উপর দুর্দান্ত প্রতিক্রিয়া পেতে পারেন। লোকেরা যখন কাগজে ইন্টারফেসটি দেখতে এবং অনুভব করতে পারে তখন সত্যই তারা জড়িয়ে পড়ে।

  • বালাসামিক দ্রুত পুনরায় ব্যবহারযোগ্য এমন কাগজ প্রোটোটাইপগুলি তৈরি করার জন্য একটি শর্টকাট। আমি স্ক্রিনশটগুলি মুদ্রণ করি এবং সেগুলি কাগজের প্রোটোটাইপ হিসাবে ব্যবহার করি। হোয়াইটবোর্ড প্রোটোটাইপিংয়ের মতো - আমরা ধারণাগুলি উপহাস করার জন্য সভাগুলির সময়ও এটি ব্যবহার করি । আমি এর জন্য ভিজিও এবং ওমনিগ্রাফলও ব্যবহার করেছি।

  • কাট এবং পেস্ট প্রোটোটাইপগুলি বিদ্যমান ডিজাইনের পুনরাবৃত্তির জন্য ভাল - একটি স্ক্রিন শট নেবে, এটি একটি চিত্র সম্পাদককে টুকরো টুকরো করে নতুন মিশ্রণ (বালাসামিক বা অন্য কোথাও) এর সাথে মিশ্রিত করে মেলে। আবার আপনার লক্ষ্যটি প্রোটোটাইপের দ্রুত পুনরাবৃত্তি, ভাল দেখাচ্ছে এমন কিছু নয়।

আমি কখনও ব্যবহারকারীদের সাথে প্রোটোটাইপিং করি না। আমরা আমাদের ব্যবহারকারীর ডেটা ভিত্তিতে ডিজাইন দলটি দিয়ে এটি করি do ব্যবহারকারীরা ডিজাইনার নন ; যদি আপনি তাদের ডিজাইনার হিসাবে বিবেচনা করেন তবে আপনি জলযুক্ত টমেটো সস, তেতো কফি (ধন্যবাদ ম্যালকম গ্লাডওয়েল) এবং হোমারের গাড়িটি শেষ করবেন। আপনার ডিজাইনে ব্যবহারকারীর ইনপুট সংগ্রহ করুন এবং ডিজাইন দলের সাথে নকশাটি পরিমার্জন করতে এটি ব্যবহার করুন।


2

আমার প্রথম মক-আপগুলি সর্বদা পেন্সিল এবং কাগজ বা হোয়াইটবোর্ড হয়, তবে একবারে বেসিকগুলি খালি হয়ে গেলে আমি সাধারণত HTML এ চলে যাই। আমার কাছে একাধিক স্থানধারক চিত্র রয়েছে যা কেবল "শিরোনাম", "ব্যানার", "চিত্র", "চার্ট" এবং এর মতো বলে say কিছুটা বুদ্ধিমানভাবে জিনিস দেওয়ার জন্য কিছু সাধারণ সিএসএস এবং আমার কাজ শেষ। একটি নিয়ন্ত্রণে সামান্য সামান্য জেএস আপনাকে কার্যকারিতার কিছুটা লক্ষণ দিতে পারে এবং লোকেরা কেবল "এটি" আরও ভাল বলে মনে হয়।

এর সাথে একমাত্র সমস্যা হ'ল আমি সম্ভবত বিশ্বের সবচেয়ে খারাপ জীবনযাপনের ইউআই ডিজাইনার এবং কখনও কখনও লোকজনকে মনে করিয়ে দিতে হয় যে আমি কেবল প্রয়োজনীয়তাগুলি সংগ্রহ করছি, সম্পূর্ণ জিনিসটি কী দেখাচ্ছে তা তাদের প্রদর্শন করে না। আমি প্রায়শই গোলাপী বা কোনও কিছুতে ব্যাকগ্রাউন্ড সেট করি, তাই যখনই কেউ জিজ্ঞাসা করে "এটি কি গোলাপী হতে হবে?" আমি "এটি কেবল একটি মক-আপ, আসল জিনিসটি অন্যরকম দেখবে" (বা "আপনাকে ডিজাইনারের সাথে এটি নিয়ে আলোচনা করতে হবে") সাথে পাল্টা দিতে পারি।


1

আমি প্রথমে কলম এবং কাগজ ব্যবহার করি, তারপরে কয়েকবার দ্রুত ইউআই আঁকার পরে, আমি এটি 2 বা 3 বার পাওয়ারপয়েন্টে তৈরি করার চেষ্টা করি। প্রকৃত সম্পাদক হওয়ার আগে 5 বা 6 টি পুনরাবৃত্তি থাকা আমাকে অকার্যকর UIs (যেমন পাঠ্য বাক্স এক্স এর উপর ভিত্তি করে কনটেন্ট ওয়াই জেনারেট করা যখন ব্যবহারকারী এখনও এক্স দেখেনি) সাহায্য করে। আমি এটি অবিলম্বে বোকা খুঁজে পেতে একটি সুযোগ হিসাবে দেখতে।


1

পেন এবং কাগজ / হোয়াইটবোর্ড, এবং আপনি ভিজিও বা অনুরূপ কিছু ব্যবহার করতে পারেন (সাধারণ নিয়ন্ত্রণগুলির জন্য ভিজিও ইউআই টেম্পলেটগুলির সাথে আসে)। কখনও কখনও আমি বিদ্যমান (অনুরূপ) ইউআই শট নিয়ে যাই এবং পেইন্ট.নেটের মতো পেইন্ট প্রোগ্রাম ব্যবহার করে এটিতে নতুন ইউআই কেটে পেস্ট করি।


1

আমি বেশ কয়েকবার ডেলফিতে দ্রুত প্রোটোটাইপিং করেছি। এটি পাওয়ারপয়েন্ট বা ভিজিওর চেয়ে অনেক দ্রুত স্ক্রিন লেআউট একসাথে ছুঁড়ে ফেলা সহজ করে তোলে। ফলস্বরূপ উদাহরণটি কোনও নির্ভরতার প্রয়োজন ছাড়াই ইমেলগুলিতে সংযুক্ত হতে পারে। যেহেতু আমি এটিকে প্রোটোটাইপ ওয়েব অ্যাপ্লিকেশনগুলিতে ব্যবহার করি, তাই অর্ধেকের সমাপ্ত সংস্করণ দিয়ে প্রোটোটাইপটিকে বিভ্রান্ত করার কোনও আশঙ্কা নেই।

আমি সেনচা এক্সট্রা ডিজাইনারের সাথেও এটি করার চেষ্টা করেছি, তবে এক্সট্রা জেএসের লেআউট সিস্টেমটি ব্যবহার করা আরও কঠিন এবং এটি ধারণাগুলির দ্রুত পুনরাবৃত্তি করার সুবিধার চেয়ে বোঝা বেশি মনে হয়েছে।


1

আমি সবসময় একই পদ্ধতি ব্যবহার করি না। আমি ব্যবহার করি এমন কয়েকটি কৌশল হ'ল (ফ্রিকোয়েন্সিটির মোটামুটি ক্রমে):

  • হোয়াইটবোর্ড (ইন্টারেক্টিভ / আলোচনার জন্য প্রোটোটাইপ করার জন্য after পরে একটি ফটো তোলা!)

  • আরএডি স্টাইলের জিইউআই ডিজাইনার (ভিজ্যুয়াল স্টুডিও, নেটবিয়ানস, ডেল্ফি)

    • এতে ভাল হয়ে উঠুন এবং এটি আসলে "উইন্ডোজ, উইজেট এবং ফর্ম" অ্যাপ্লিকেশনটির প্রোটোটাইপ তৈরির অন্যতম দ্রুততম উপায় হয়ে উঠতে পারে। বোনাস: আপনি কত দ্রুত একসাথে নিক্ষেপ করেন তার উপর নির্ভর করে প্রোটোটাইপগুলি সত্যিই বেশ পেশাদার দেখাবে। এগুলি কখনও কখনও আসল জিনিসটি তৈরির জন্য একটি প্রবর্তক পয়েন্ট হিসাবে পরিবেশন করতে পারে, একবার প্রোটোটাইপ অনুমোদিত হয়ে যায়।

  • কাগজ এবং কলম / পেন্সিল (সাধারণত আমার কাছে মস্তিষ্কের জন্য)

  • স্থির এইচটিএমএল / সিএসএস / জেএস ফাইলগুলি ডিস্কে

    • আমি কল্পনা করতাম যে WYSIWYG ডিজাইন অ্যাপ্লিকেশনটি এখানে আঘাত না পাবে তবে আমি সাধারণত কাঁচা এইচটিএমএলকে হ্যাক করি। আমি যাইহোক, এগুলি অনেক কিছুই করি না।

  • ভেক্টর অঙ্কন সরঞ্জাম - চিত্রক / ইনস্কেপ / ভিজিও / পাওয়ারপয়েন্ট / ইমপ্রেস

  • রাস্টার গ্রাফিক্স সরঞ্জাম - ফটোশপ / জিম্প

  • ASCII শিল্প ;-)

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.